<template>
    <a-modal title="操作记录" :visible="childShow" :footer="null" @cancel="logsCancel" :width=800
        :body-style="{width:200}">
        <div style="height:300px;width:100%;overflow:auto;">
            <template v-if="logsOptions.length ==0">
                <a-empty :image="simpleImage" />
            </template>
            <template v-else v-for="(item,index) in logsOptions">
                <a-row style="display: flex; flex-wrap: wrap; margin-bottom: 20px;">
                    <a-col :span="7" style="text-align: right;">
                        <a-row>
                            <a-col>{{item.createTime}}</a-col>
                            <a-col>操作人:{{item.createBy_dictText}}</a-col>
                        </a-row>
                    </a-col>
                    <a-col :span="2" style="text-align: center;">
                        <div class="ran" style="margin-left: 38%;"></div>
                        <a-divider type="vertical" style="width: 2px; margin-top: 2px; height: 70%;" />
                    </a-col>
                    <a-col :span="13" style="text-align: left;">
                        <a-row style="background-color: #F7F8FA; width:80%;" :gutter="[8, 8]">
                            <a-col>【{{item.type_dictText}}】</a-col>
                            <a-col v-if="item.desc1 !== null">&nbsp;{{item.desc1}}&nbsp;&nbsp;<span
                                    style="color:#397fd4">{{item.content1}}</span></a-col>
                            <a-col v-if="item.desc2 !== null">&nbsp;{{item.desc2}}&nbsp;&nbsp;<span
                                    style="color:#397fd4">{{item.content2}}</span></a-col>
                            <a-col v-if="item.desc3 !== null">&nbsp;{{item.desc3}}&nbsp;&nbsp;<span
                                    style="color:#397fd4">{{item.content3}}</span></a-col>
                        </a-row>
                    </a-col>
                </a-row>
            </template>
        </div>
    </a-modal>
</template>
<script>

import { getAction } from '@/api/manage'
import { Empty } from 'ant-design-vue';
export default {
    name: 'CustomerBusinessLogs',
    data() {
        return {
            logsOptions: [],
            simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
        }
    },
    props: ['childShow', 'para'],
    watch: {
        immediate: true,
        childShow: {
            handler() {
                getAction("/customer/customerBusinessLogs/getLogs", this.para).then((res) => {
                    if (res.success) {
                        this.logsOptions = res.result.records;
                    }
                });
            },
        }
    },
    methods: {
        logsCancel() {
            this.$emit('childReturn',false);
        },
    }
}
</script>
  