<template>
    <a-modal
        title="操作记录"
        :visible="showCustomerLogs"
        :confirm-loading="dialogloading"
        :footer="null"
        @cancel="logsCancel"
        :width=900
        :body-style="{width:200}">
         <a-descriptions bordered>
            <a-descriptions-item label="姓名" :span="3">{{customerName}}</a-descriptions-item>
            <a-descriptions-item label="年龄">{{age}}</a-descriptions-item>
            <a-descriptions-item label="电话">{{contactPhone}}</a-descriptions-item>
            <a-descriptions-item label="家长" >{{contactName}}</a-descriptions-item>
            <a-descriptions-item label="备注" :span="3">
                {{mark}}
            </a-descriptions-item>
        </a-descriptions>
        <br>
         <a-timeline>
            <a-timeline-item v-for="(log,index) of logs" :key="index"> 
                <a-row>
                    <a-col :span="6">时间: {{log.createTime}}</a-col>
                    <a-col :span="6">事项: {{log.typeDes}}</a-col>
                    <a-col :span="6">操作人: {{log.createBy_dictText}}</a-col>
                    <a-col :span="6">校区: {{log.schoolDistrictId_dictText}}</a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        {{log.descType1}}&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #397fd4;">{{log.descComm1}}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;{{log.descType2}}&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #397fd4;">{{log.descComm2}}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;{{log.descType3}}&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #397fd4;">{{log.descComm3}}</span>
                    </a-col>
                </a-row>
            </a-timeline-item>
        </a-timeline>
    </a-modal>
</template>
<script>
import { getAge } from '@/utils/util';
import {postAction} from '@/api/manage'

export default {
    data () {
      return {
        dialogloading: false,
        customerName: undefined,
        age: undefined,
        contactPhone: undefined,
        contactName: undefined,
        mark: undefined,
        birthday: undefined,
        logs:[]
      }
    },
    props: {
        showChildDialog: {
            type: Boolean,
            default: false
        },
        logInfo: {
            type: Object,
            default: null
        }
    },
    computed: {
        showCustomerLogs: { 
            get: function(para) {
                this.customerName = para.logInfo.name;
                this.contactPhone = para.logInfo.contactPhone;
                this.contactName = para.logInfo.contactName;
                this.mark = para.logInfo.markString;
                this.birthday = para.logInfo.birthday;
                this.age = para.logInfo.age;
                if(para.showChildDialog) {
                    if(para.logInfo.birthday !== null && para.logInfo.birthday !=="" && para.logInfo.birthday !== undefined) {
                    this.age = getAge(para.logInfo.birthday);
                    }
                    if(para.logInfo.id !== null && para.logInfo.id !=="" && para.logInfo.id !== undefined) {
                        let params = {
                            customer_id: para.logInfo.id
                        }
                        postAction("/customer/customerLogs/queryByCustomerId", params).then((res) => {
                            console.log(res.result.records);
                            this.logs = res.result.records;
                        });
                    }
                }
                return this.showChildDialog
            },
            set: function() {
                return
            }
        }
    },
     methods: {
        logsCancel() {
            this.$emit('update:showChildDialog', false) // 触发更新事件，父组件的showDialog会自动更新
        }
    }
}
</script>
