<template>
    <a-card :bordered="false" :body-style="{ padding: '0px 0px 0px' }" >
    <div style="height:400px;width:100%;overflow:auto;">
      <a-row>
        <a-space :size="Number(10)" style="margin-top: 6px">
            <a-button type="primary" @click="show('follow')" ghost>添加跟进</a-button>
            <a-button type="primary" @click="show('audition')" ghost>预约试听</a-button>
            <a-button type="primary" @click="show('registration')" ghost>报名</a-button>
            <a-button type="primary" @click="show('visiting')" ghost>预约来访</a-button>
            <a-button type="primary" @click="show('change')" ghost>转让潜客</a-button>
            <a-button type="primary" @click="show('invalid')" ghost>放回公池</a-button>
        </a-space>
      </a-row>
      <a-divider />
        <a-skeleton active :loading = "followLoading" />
      <template v-if="followData.length ==0">
        <a-empty :image="simpleImage"/>
      </template>
      <template v-else v-for="(item,index) in followData" >
      <a-row style="display: flex; flex-wrap: wrap; margin-bottom: 20px;" >
        <a-col :span="3" style="text-align: right;" >
            <a-row >
                <a-col>{{item.createTime.substring(0,10)}}</a-col>
                <a-col>{{item.createTime.substring(11,19)}}</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: 42%;"></div>
            <a-divider type="vertical" style="width: 2px; margin-top: 2px; height: 70%;" />
        </a-col>
        <a-col :span="18" style="text-align: left;">
            <a-row style="background-color: #F7F8FA; width:80%;" :gutter="[8, 8]">
                <a-col>【{{item.followType_dictText}}】</a-col>
                <a-col>跟进内容:{{item.followContent}}</a-col>
                <a-col v-if="item.followTime !== null">本次跟进时间:{{item.followTime}}</a-col>
                <a-col v-if="item.nextFollowTime !== null">下次跟进时间:{{item.nextFollowTime}}</a-col>
            </a-row>
        </a-col>
      </a-row>
    </template>
    <CustomerFollowAdd @follow-event="childReturn" :followShow="followShow" :dataPara="dataPara"></CustomerFollowAdd>
    <CustomerAuditionAdd @audition-event="childReturn" :auditionShow="auditionShow" :dataPara="dataPara"></CustomerAuditionAdd>
    <CustomerRegistration @registration-event="childReturn" :registrationShow="registrationShow" :dataPara="dataPara"></CustomerRegistration>
    <CustomerVisitingAdd @visiting-event="childReturn" :visitingShow="visitingShow" :dataPara="dataPara"></CustomerVisitingAdd>
    <CustomerChangeSales @change-event="childReturn" :changeShow="changeShow" :dataPara="dataPara"></CustomerChangeSales>
    <CustomerInvalid @invalid-event="childReturn" :invalidShow="invalidShow" :dataPara="dataPara"></CustomerInvalid>
    </div>
    </a-card>
</template>
<script>

import { getAction,postAction } from '@/api/manage'
import { Empty } from 'ant-design-vue';
import CustomerFollowAdd from '../CustomerFollowAdd.vue';
import CustomerAuditionAdd from '../CustomerAuditionAdd.vue';
import CustomerRegistration from '../CustomerRegistration.vue';
import CustomerVisitingAdd from '../CustomerVisitingAdd.vue';
import CustomerChangeSales from '../CustomerChangeSales.vue';
import CustomerInvalid from '../CustomerInvalid.vue';


export default {
    components: {
        CustomerFollowAdd,CustomerAuditionAdd,CustomerVisitingAdd,CustomerRegistration,
        CustomerChangeSales,CustomerInvalid
    },
    name: 'CustomerInfoFollow',
    created() { //没用watch 用的create 传入不同的key  key不同每次都会调用刷新 尤其应用在tabs上
        this.followLoading = true;
        let params = {
            cp_id :this.dataPara.id
        }
        getAction("/customer/customerFollow/getFollows", params).then((res) => {
            this.followData = res.result.records;
            this.followLoading = false;
        });
    },
    data() {
        return {
            followShow: false,
            auditionShow: false,
            registrationShow: false,
            visitingShow: false,
            changeShow: false,
            invalidShow: false,
            followData: [],
            followLoading: false,
            simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
        }
    },
    props: ['infoShow','dataPara'],
    // watch: {  //把watch 改成computed  computed或许开始就能接收！！！！！！！！！！！！！！！！！
    methods: {
        show(para){
            switch(para) {      
                case 'follow':
                    this.followShow = true
                    break
                case 'audition':
                    this.auditionShow = true
                    break
                case 'registration':
                    this.registrationShow = true
                    break
                case 'visiting':
                    this.visitingShow = true
                    break
                case 'change':
                    this.changeShow = true
                    break
                case 'invalid':
                    this.invalidShow = true
                    break
            }
        },
        childReturn(para) {
            switch(para) {      
                case 'follow':
                    this.followShow = false
                    break
                case 'audition':
                    this.auditionShow = false
                    break
                case 'registration':
                    this.registrationShow = false
                    break
                case 'visiting':
                    this.visitingShow = false
                    break
                case 'change':
                    this.changeShow = false
                    break
                case 'invalid':
                    this.invalidShow = false
                    break
            }
        },
    }
}
</script>
<style lang="less">
.leftStyle {
  position: absolute;
  left: -200px;
  top: 1px;
  font-size: 12px;
}


#appStyle {
  position: relative;
  top: 50px;
  left: 250px;
  width: 50%;
}
.logDetail {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ran {
    width: 15px; 
    height: 15px;
    border-radius: 50%;
    background: none; 
    border: 3px solid #1890ff;
}
.ant-skeleton {
    display: table;
    width: 90%;
    margin-left: 3%;
}
</style>