<style>
.drawer-box{
    height: 100%;
}
.drawer-header{
    height: 83px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
}
.drawer-header .left{
    display: flex;
    align-items: center;
}
.drawer-header .left img{
    display: inline-block;
    margin-right: 10px;
}
.drawer-body{
    height: calc( 100% - 83px);
}
.drawer-body .top-info{
    height: 115px;
    padding: 30px;
    box-sizing: border-box;
    font-size: 12px;
    background-color: #F6F4FC;
}
.drawer-body .top-info .info-lable{
    display: inline-block;
    width: 80px;
    color: #999999;
}
.margin-bottom-25{
    margin-bottom: 25px;
}
.drawer-box .el-tabs__nav-wrap::after{
    height: 0;
}
.drawer-body .el-tabs__header{
    padding: 0 25px;
    margin-bottom: 0;
}
.drawer-body>.content{
    height: calc(100% - 115px);
}
.drawer-body .el-tabs{
    height: 100%;
}
.drawer-body .el-tabs__content{
    background-color: #F6F4FC;
    height: calc(100% - 40px);
    box-sizing: border-box;
}
.drawer-body .el-tabs__content .el-tab-pane{
    height: 100%;
    position: absolute;
    width: calc(100%);
    padding: 17px 20px;
    box-sizing: border-box
}
</style>
<template>
    <div class="drawer-box" v-if="loading">
        <div class="drawer-header">
            <div class="left">
                <img src="../../assets/img/cust/kehu2.png" alt="">
                <p>{{detailsData.CustomerName}}</p>
            </div>
            <div class="right">
                <el-dropdown @command="handleCommand" style="top: 1px;">
                    <el-button class="crm-btn crm-btn-more easy-btn margin-right0">
                        <i class="iconfont icongengduo"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="z"><i class="iconfont iconplus-transfer"></i> 分配</el-dropdown-item>
                        <el-dropdown-item command="g"><i class="iconfont icongonghaiguanli"></i> 领取</el-dropdown-item>
                        <el-dropdown-item command="d"><i class="iconfont icondelete"></i> 删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="drawer-body">
            <div class="top-info">
                <el-row class="margin-bottom-25">
                    <el-col :span="12">
                        <span class="info-lable">客户级别：</span><span>{{detailsData.CustomerIdLevelStr}}</span>
                    </el-col>
                    <el-col :span="12">
                        <span class="info-lable">成交状态：</span><span >已成交</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <span class="info-lable">负责人：</span><span>{{detailsData.Contact}}</span>
                    </el-col>
                    <el-col :span="12">
                        <span class="info-lable">更新时间：</span><span>{{detailsData.UpdateTime ? detailsData.UpdateTime : ''}}</span>
                    </el-col>
                </el-row>
            </div>
            <div class="content">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="活动" name="1">
                        <Activity v-if="activeName === '1'" :CustomerId="CustomerId" />
                    </el-tab-pane>
                    <el-tab-pane label="详细资料" name="2">
                        <Details v-if="activeName === '2'" :detailsData="detailsData"/>
                    </el-tab-pane>
                    <el-tab-pane label="联系人" name="3">
                        <Contacts v-if="activeName === '3'" :CustomerId="CustomerId" :IsRead="detailsData.IsRead"/>
                    </el-tab-pane>
                    <el-tab-pane label="团队成员" name="4">
                        <TeamMembers v-if="activeName === '4'" :CustomerId="CustomerId" :IsRead="detailsData.IsRead"/>
                    </el-tab-pane>
                    <el-tab-pane label="商机" name="5">
                        <Business v-if="activeName === '5'" :ID="CustomerId"/>
                    </el-tab-pane>
                    <el-tab-pane label="订单" name="6" v-if="false">
                        <Agreement />
                    </el-tab-pane>
                    <el-tab-pane label="回款" name="7" v-if="false">
                        <MoneyBack />
                    </el-tab-pane>
                    <el-tab-pane label="附件" name="8">
                        <Enclosure :ID='CustomerId' :type='1' :IsRead='0' :upload='2'/>
                    </el-tab-pane>
                    <el-tab-pane label="操作记录" name="9">
                        <Record v-if="activeName === '9'" :CustomerId="CustomerId"/>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
import Activity from "./Activity";
import Details from "./Details";
import Contacts from "./Contacts";
import TeamMembers from "./TeamMembers";
import Business from "./Business";
import Agreement from "./Agreement";
import MoneyBack from "./MoneyBack";
import Enclosure from "../clueManagement/Enclosure";
import Record from "./Record";
export default {
    components: {
        Activity,
        Details,
        Contacts,
        TeamMembers,
        Business,
        Agreement,
        MoneyBack,
        Enclosure,
        Record
    },
    props:{
        CustomerId: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            activeName: '1',
            detailsData: {},
            loading: false,
        };
    },watch:{
        CustomerId: {
            handler(val, oldVal){
                this.init()
                this.activeName = '1'
            },
            deep:true
        }
    },
    mounted() {
        let $this = this
        $this.init()
        // 监听修改更新界面
        this.MsgBus.$on('RefreshInfoBox', function () {
            $this.init()
        })
    },
    methods: {
        init(){
            this.apipost('/api/Customer/GetAllCustmersModel', {CustomerId: this.CustomerId}, res=>{
                if (res.data.resultCode == 1) {
                    let data = res.data.data
                    if(!data.HousePhotos){
                        data.HousePhotos = []
                    }
                    if(!data.BusinessCardPhotos){
                        data.BusinessCardPhotos = []
                    }
                    if(!data.Images){
                        data.Images = []
                    }
                    if(!data.CustomerSourceType){
                        data.CustomerSourceType = ''
                    }
                    if(!data.CustomerSource){
                        data.CustomerSource = ''
                    }
                    if(!data.Province){
                        data.Province = ''
                    }
                    if(!data.Country){
                        data.Country = ''
                    }
                    if(!data.City){
                        data.City = ''
                    }
                    if(!data.District){
                        data.District = ''
                    }
                    this.detailsData = data
                    this.loading = true
                }
            })
        },
        handleCommand(command){
            if (command === 'z') {
                this.$emit('transferS', 3);
            } else if (command === 'g') {
                this.$emit('watersS', 1)
            }
        },
        handleClick(tab, event) {},
        editCust(){
            this.$emit('editCustS', 1)
        },
        handleClose(done) {
            done();
        }
    }
}
</script>