<template>
    <a-modal  :visible="childShow" :footer="null" @cancel="infoCancel"
      :width=900 >
      <span slot="title">
           名单详情&nbsp; <span style="color:#1890ff;">({{this.infoOptions.name }})</span>
        </span>
      <a-row style="align-items: end; display: flex;">
        <a-col span="1"></a-col>
        <a-col span="2" >姓名:</a-col>
        <a-col span="4" style="margin-left: 2px;">
          {{this.infoOptions.name}}
          <a-icon v-if="this.infoOptions.sex == Number(1)" type="man" style="color:#1890ff;" />
          <a-icon v-if="this.infoOptions.sex ==  Number(2)" type="woman" style="color:tomato"/>
          <a-icon @click="handleEdit()" v-if="this.infoOptions.status != '2' && this.infoOptions.status != '5'" type="form" style="color:tomato;margin-left: 10px; font-size:medium; "/>
        </a-col>
        <a-col span="16" style="text-align: right;">
          <a-space :size="10" v-if="this.infoOptions.status !=='2' && this.infoOptions.status !=='5'">
            <a-button type="primary" @click="handleDialled()" ghost >未接听
              <span v-if="this.infoOptions.dialled !== null">({{this.infoOptions.dialled}})</span>
            </a-button>
            <a-button type="primary" @click="handleDelay()" ghost>延期处理
              <span v-if="this.infoOptions.delayNum !== null">({{this.infoOptions.delayNum}})</span>
            </a-button>
            <a-button type="primary" ghost @click="handleInvalid()">无效</a-button>
            <a-button type="primary" @click="handlePotential()" ghost>转为潜客</a-button>
            <a-button type="primary" ghost @click="handleVisiting()" v-if="this.infoOptions.status ==='4'">预约来访</a-button>
          </a-space>
          <a-button type="primary" @click="handleActive(this.infoOptions)" ghost v-if="this.infoOptions.status ==='5'">激活名单</a-button>
        </a-col>
      </a-row>
      <a-row style="margin-top: 6px;">
        <a-col span="1"></a-col>
        <a-col span="2">年龄:</a-col>
        <a-col span="4" style="margin-left: 2px;">{{this.age}}</a-col>
        <a-col span="4"></a-col>
      </a-row>
      <a-row style="margin-top: 6px;">
        <a-col span="1"></a-col>
        <a-col span="2">家长:</a-col>
        <a-col span="4" style="margin-left: 2px;">{{this.infoOptions.parents_dictText}}</a-col>
      </a-row>
      <a-row style="margin-top: 6px;">
        <a-col span="1"></a-col>
        <a-col span="2">联系方式:</a-col>
        <a-col span="4" style="margin-left: 2px;">{{this.infoOptions.phone}}</a-col>
      </a-row>
      <a-row style="margin-top: 6px;">
        <a-col span="1"></a-col>
        <a-col span="2">备注:</a-col>
        <a-col span="4" style="margin-left: 2px;">{{this.infoOptions.remarks}}</a-col>
      </a-row>
      <a-divider />
      <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="3" 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: 39%;"></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>
    <CustomerBusinessInvalid @childReturn="invalidReturn()" :childShow = "invalidVisiable" :para="invalidParam"></CustomerBusinessInvalid>
    <CustomerBusinessDelay @childReturn="delayReturn()" :childShow = "delayVisiable" :para="delayParam"></CustomerBusinessDelay>
    <CustomerBusinessEdit @childReturn="editReturn()" :childShow = "editVisiable" :para="editParam"></CustomerBusinessEdit>
    <CustomerBusinessActive @childReturn="activeReturn()" :childShow = "activeVisiable" :para="activeParam"></CustomerBusinessActive>
    <CustomerBusinessPotential @childReturn="potentialReturn()" :childShow = "potentialVisiable" :para="potentialParam"></CustomerBusinessPotential>
    <CustomerBusinessVisiting @childReturn="visitingReturn()" :childShow = "visitingVisiable" :para="visitingParam"></CustomerBusinessVisiting>
    </a-modal>
</template>
<script>

import { getAction,postAction } from '@/api/manage'
import { getAge } from '@/utils/util';
import { Empty } from 'ant-design-vue';
import CustomerBusinessInvalid from './CustomerBusinessInvalid.vue'
import CustomerBusinessDelay from './CustomerBusinessDelay.vue'
import CustomerBusinessEdit from './CustomerBusinessEdit.vue'
import CustomerBusinessActive from './CustomerBusinessActive.vue'
import CustomerBusinessPotential from './CustomerBusinessPotential.vue'
import CustomerBusinessVisiting from './CustomerBusinessVisiting.vue';
export default {
  components: {CustomerBusinessInvalid,CustomerBusinessDelay,CustomerBusinessVisiting,
    CustomerBusinessEdit,CustomerBusinessActive,CustomerBusinessPotential
    },
    name: 'CustomerBusinessInfo',
    data() {
        return {
          simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
          infoOptions:[],
          logsOptions:[],
          age: 0,
          invalidVisiable: false,
          delayVisiable: false,
          activeVisiable: false,
          infoVisiable: false,
          potentialVisiable: false,
          editVisiable: false,
          visitingVisiable: false,
          visitingParam: {},
          invalidParam: {
            invalidReason: "1"
          },
          potentialParam: {},
          delayParam: {},
          editParam:{},
          activeParam:{},
        }
    },
    props: ['childShow', 'para'],
    watch: {
      immediate: true,
      childShow: {
        handler() {
          this.infoOptions = this.para;
          this.age = getAge(String(this.infoOptions.birthday));
          this.infoVisiable = true;
          let params = {
            cbId: this.infoOptions.id
          }
          getAction("/customer/customerBusinessLogs/getLogs", params).then((res) => {
            if(res.success) {
              this.logsOptions = res.result.records;
            }
          });
        },
      }
    },
    methods: {
      getData() {
        let para = {
          id:this.para.id
        }
        getAction("/customer/customerBusiness/queryById",para).then((res) => {
          this.infoOptions = res.result;
          this.age = getAge(String(this.infoOptions.birthday));
          this.infoVisiable = true;
          let params = {
            cbId: this.infoOptions.id
          }
          getAction("/customer/customerBusinessLogs/getLogs", params).then((res) => {
            if(res.success) {
              this.logsOptions = res.result.records;
            }
          });
        });
      },
      infoCancel() {
        this.$emit('childReturn',false);
        this.age = 0;
      },
      delayReturn() {
        this.delayVisiable = false;
        this.delayParam = {};
        this.getData();
      },
      editReturn() {
        this.editVisiable = false;
        this.editParam = {};
        this.getData();
      },
      activeReturn(){
        this.activeVisiable = false;
        this.activeParam = {};
        this.getData();
      },
      potentialReturn() {
        this.potentialVisiable = false;
        this.potentialParam = {};
        this.getData();
      },
      invalidReturn() {
        this.invalidVisiable = false;
        this.invalidParam = {};
        this.getData();
      },
      visitingReturn() {
        this.visitingVisiable = false;
        this.getData();
      },
      handleInvalid() {
        this.invalidVisiable = true;
        this.invalidParam.id = this.infoOptions.id
      },
      handlePotential() {
        this.potentialVisiable = true;
        this.potentialParam = this.infoOptions;
      },
      handleActive() {
        this.activeVisiable = true;
        this.activeParam = this.infoOptions;
      },
      handleEdit() {
        this.editVisiable = true;
        this.editParam = this.infoOptions;
      },
      handleDialled() {
        let params = {
          id: this.infoOptions.id,
          status: 4,
          dialled: Number(this.infoOptions.dialled) + 1
        }
        postAction("/customer/customerBusiness/edit", params).then((res) => {
          if(res.success) {
            this.$message.success('编辑成功');
            this.getData();
          }
        });
      },
      handleDelay(){
        this.delayVisiable = true;
        this.delayParam.id = this.infoOptions.id;
        this.delayParam.remarks = this.infoOptions.remarks;
        this.delayParam.delayNum = this.infoOptions.delayNum;
      },
      handleVisiting() {
        this.visitingVisiable = true;
        this.visitingParam = this.infoOptions;
      }
    }
}
</script>
  