<template>
    <div class="contents" v-if="item!=null">
        <div class="customer-title"  >
            <div class="customer-name">
                {{item.customerName}}
            </div>
        </div>
        <el-descriptions title="" :column="3" border>
            <el-descriptions-item label="客户编号"  >
                <span v-if="item!=null">{{item.customerCode}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="客户名称" >
                <span v-if="item!=null">{{item.customerName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="手机号" >
                <span v-if="item!=null">{{item.mobile}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="性别" >
                <span v-if="item!=null">
                    <el-tag  v-for="(dict, index) in sexOptions"    v-if="item.sex==dict.dictValue">{{dict.dictLabel}}</el-tag>
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="所属公司" >
                <span v-if="company!=null">
                    {{company.companyName}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="微信号" >
                <span v-if="item!=null">
                    {{item.weixin}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="所在地">
                <span v-if="item!=null">
                    {{item.address}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="客户来源" >
                <span v-if="item!=null">
                    <el-tag  v-for="(dict, index) in sourceOptions"    v-if="item.source==dict.dictValue">{{dict.dictLabel}}</el-tag>
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="客户类型" >
                <span v-if="item!=null">
                    <el-tag  v-for="(dict, index) in typeOptions"    v-if="item.customerType==dict.dictValue">{{dict.dictLabel}}</el-tag>
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="客户状态" >
                <span v-if="item!=null">
                     <dict-tag :options="statusOptions" :value="statusOptions.dictValue"/>
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" >
                <span v-if="item!=null">
                    {{item.createTime}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="最后一次跟进时间" label-class-name="my-label">
                <span v-if="item!=null">
                    {{item.receiveTime}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="入公海时间" label-class-name="my-label">
                <span v-if="item!=null">
                    {{item.poolTime}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="标签" label-class-name="my-label">
                <span v-if="item!=null">
                    {{item.tags}}
                </span>
            </el-descriptions-item>

            <el-descriptions-item label="进线日期" label-class-name="my-label">
                <span v-if="item!=null">
                    {{item.registerDate}}
                </span>
                <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
            </el-descriptions-item>
            <el-descriptions-item label="进线链接" label-class-name="my-label">
                <span v-if="item!=null">
                    {{item.registerLinkUrl}}
                </span>
                <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
            </el-descriptions-item>
            <el-descriptions-item label="进线客户详情" label-class-name="my-label">
                <span v-if="item!=null">
                    {{item.registerDesc}}
                </span>
                <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
            </el-descriptions-item>
            <el-descriptions-item label="进线客户填写时间" label-class-name="my-label">
                <span v-if="item!=null">
                    {{item.registerSubmitTime}}
                </span>
                <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
            </el-descriptions-item>
            <el-descriptions-item :label="ext.name" v-for="ext in exts" label-class-name="my-label">
                <span >
                    {{ext.value}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="备注" label-class-name="my-label">
                <span v-if="item!=null">
                    {{item.remark}}
                </span>
            </el-descriptions-item>
        </el-descriptions>

        <el-tabs style="margin-top:20px;"  z-index = "99" type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="联系人" name="contacts">
                <customer-contacts ref="contacts"></customer-contacts>
            </el-tab-pane>
            <el-tab-pane label="订单记录" name="storeOrder">
                <customer-store-order-list ref="storeOrder"></customer-store-order-list>
            </el-tab-pane>
            <el-tab-pane label="跟进记录" name="visit">
                <customer-visit-list ref="visit"></customer-visit-list>
            </el-tab-pane>
            <el-tab-pane label="通话记录" name="voiceLogs">
                <customer-voice-logs-list ref="voiceLogs"></customer-voice-logs-list>
            </el-tab-pane>
            <el-tab-pane label="短信记录" name="smsLogs">
                <customer-sms-logs-list ref="smsLogs"></customer-sms-logs-list>
            </el-tab-pane>
            <el-tab-pane label="客户日志" name="logs">
                <customer-logs-list ref="logs"></customer-logs-list>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
    import { listCustomerExt } from "@/api/crm/customerExt";
    import customerVisitList from '../components/customerVisitList.vue';
    import customerLogsList from '../components/customerLogsList.vue';
    import customerSmsLogsList from '../components/customerSmsLogsList.vue';
    import customerVoiceLogsList from '../components/customerVoiceLogsList.vue';
    import customerStoreOrderList from '../components/customerStoreOrderList.vue';
    import customerContacts from './customerContacts.vue';
    import { getCustomer } from "@/api/crm/customer";
    export default {
        name: "customer",
        components: { customerContacts,customerVisitList,customerLogsList,customerVoiceLogsList,customerStoreOrderList,customerSmsLogsList },
        data() {
            return {
                customerExts:[],
                exts:[],
                activeName:"",
                statusOptions:[],
                typeOptions:[],
                sourceOptions:[],
                sexOptions:[],
                item:null,
                platform:null,

            };
        },
        created() {
            this.getDicts("sys_crm_customer_source").then((response) => {
                this.sourceOptions = response.data;
            });
            this.getDicts("sys_sex").then((response) => {
                this.sexOptions = response.data;
            });
            this.getDicts("sys_crm_customer_status").then((response) => {
                this.statusOptions = response.data;
            });
            this.getDicts("sys_crm_customer_type").then((response) => {
                this.typeOptions = response.data;
            });
            var data={status:1}
            listCustomerExt(data).then(response => {
                this.customerExts = response.data;

            });

        },
        mounted(){
        },
        methods: {
            handleClick(tab, event) {
                if(tab.name=="contacts"){
                    this.$refs.contacts.getData(this.item.customerId);
                }
                if(tab.name=="visit"){
                    this.$refs.visit.getData(this.item.customerId);
                }
                if(tab.name=="logs"){
                    this.$refs.logs.getData(this.item.customerId);
                }
                if(tab.name=="voiceLogs"){
                    this.$refs.voiceLogs.getData(this.item.customerId);
                }
                if(tab.name=="storeOrder"){
                    this.$refs.storeOrder.getData(this.item.customerId);
                }
                if(tab.name=="smsLogs"){
                    this.$refs.smsLogs.getData(this.item.customerId);
                }
            },
            getDetails(orderId) {
                getCustomer(orderId).then(response => {
                    this.item = response.customer;
                    this.company = response.company;
                    var that=this;
                    this.exts=[];
                    this.customerExts.forEach(element => {
                        var data={extId:element.extId,name:element.name,value:""};
                        that.exts.push(data)
                    });
                    if(this.item.extJson!=null){
                        var extList=JSON.parse(this.item.extJson);
                        that.exts.forEach(item => {
                            extList.forEach(element => {
                                if(item.extId==element.extId){
                                    item.value=element.value
                                }
                            });

                        });
                    }
                    this.activeName="contacts"
                    setTimeout(() => {
                        that.$refs.contacts.getData(this.item.customerId);
                    }, 500);

                });
            },
        }
    };
</script>
<style lang="scss" scoped>
.contents{
    height: 100%;
    background-color: #fff;
    padding: 0px 20px;

}
.customer-title{
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .customer-name{
        font-size: 28px;
    }
}
</style>
<style>
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }

</style>
