<template>
    <a-modal :visible="infoShow" :footer="null"  @cancel="confirmCancel" width="75%" :dialogStyle = "dialogStyle">
        <span slot="title">
           潜客详情&nbsp; <span style="color:#1890ff;">({{this.dataPara.name }}&nbsp;&nbsp;&nbsp;{{this.dataPara.contactPhone}})</span>
        </span>
        <a-tabs @change="handleChangeTab" :animated="false" :activeKey="customActiveKey"
        :tab-bar-style="{marginTop: '-20px', paddingLeft: '0px'}">
            <a-tab-pane tab="基本信息" key="tab1">
                <CustomerInfoBasic @editRefresh="editRefresh" @deleteRefresh="deleteRefresh" :key="timer1" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="跟进记录" key="tab2" >
                <CustomerInfoFollow :key="timer2" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="报读课程" key="tab3">
                <CustomerInfoCourse :infoShow="timer3" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="订单信息" key="tab4">
                <CustomerInfoOrder :infoShow="timer4" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="可用活动" key="tab5">
                <CustomerInfoPromotion :infoShow="timer5" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="优惠券" key="tab6">
                <CustomerInfoCoupon :show="timer6" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="调查问卷" key="tab7">
                <CustomerInfoSurvey :infoShow="timer7" :dataPara="dataPara"/>
            </a-tab-pane>
            <a-tab-pane tab="操作日志" key="tab8">
                <CustomerInfoLog :key="timer8" :dataPara="dataPara"/>
            </a-tab-pane>
        </a-tabs>
    </a-modal>
</template>
<script>
import CustomerInfoBasic from './CustomerInfos/CustomerInfoBasic.vue'
import CustomerInfoSurvey from './CustomerInfos/CustomerInfoSurvey.vue'
import CustomerInfoCoupon from './CustomerInfos/CustomerInfoCoupon.vue'
import CustomerInfoCourse from './CustomerInfos/CustomerInfoCourse.vue'
import CustomerInfoFollow from './CustomerInfos/CustomerInfoFollow.vue'
import CustomerInfoLog from './CustomerInfos/CustomerInfoLog.vue'
import CustomerInfoOrder from './CustomerInfos/CustomerInfoOrder.vue'
import CustomerInfoPromotion from './CustomerInfos/CustomerInfoPromotion.vue'
import { getAction } from '@/api/manage'
export default {
    components: {
        CustomerInfoBasic,CustomerInfoSurvey,CustomerInfoCoupon,CustomerInfoCourse,
        CustomerInfoFollow,CustomerInfoLog,CustomerInfoLog,CustomerInfoOrder,CustomerInfoPromotion
    },
    name: 'CustomerInfo',
    data() {
        return {
            customActiveKey: undefined,
            timer1: '',
            timer2: '',
            timer3: '',
            timer4: '',
            timer5: '',
            timer6: '',
            timer7: '',
            timer8: '',
            dialogStyle: {
                top: "50px"
            }
        }
    },
    props: ['infoShow', 'dataPara', 'activeKey'],
    watch: {
        immediate: true,
        infoShow: {
            handler() {
                if(this.infoShow){
                    this.customActiveKey = this.activeKey;
                    this.timer2 = new Date().getTime() + 1;
                }
            },
        }
    },
    methods: {
        handleChangeTab(key) {
            if (key === "tab1") {
                this.timer1 = new Date().getTime();
            }else if (key === "tab2") {
                this.timer2 = new Date().getTime();
            }else if (key === "tab3") {
                this.timer3 = new Date().getTime();
            }else if (key === "tab4") {
                this.timer4 = new Date().getTime();
            }else if(key === "tab5")  {
                this.timer5 = new Date().getTime();
            }else if (key === "tab6") {
                this.timer6 = new Date().getTime();
            }else if (key === "tab7") {
                this.timer7 = new Date().getTime();
            }else if (key === "tab8") {
                this.timer8 = new Date().getTime();
            }
            this.customActiveKey = String(key)
            
        },
        confirmCancel() {
            this.$emit('info-event', true);
        },
        confirmOk() {
        },
        editRefresh(name,phone) { //子组件不能覆盖父组件的值,父组件可以覆盖子组件，拆开写
            this.dataPara.name = name;
            this.dataPara.contactPhone = phone;
        },
        deleteRefresh() {
            this.$emit('info-event', true);
        }
    }
}
</script>
  