<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-button class="crm-btn query-btn" @click="editCust" v-if="detailsData.IsRead === 0 && transferState">
                    编辑</el-button>
                <!-- <el-button class="crm-btn easy-btn iconfont iconwancheng" v-if="detailsData.IsRead === 0">更改成交状态</el-button> -->
                <el-dropdown @command="handleCommand" style="top: 1px;"
                    v-if="detailsData.IsRead === 0 && transferState">
                    <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="s"><i class="iconfont iconsuoguan"></i> 锁定</el-dropdown-item>
                        <el-dropdown-item command="j"><i class="iconfont iconsuokai"></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' />
                    </el-tab-pane>
                    <el-tab-pane label="操作记录" name="9">
                        <Record v-if="activeName === '9'" :CustomerId="CustomerId" />
                    </el-tab-pane>
                    <el-tab-pane label="交易信息" name="10">
                        <Transaction v-if="activeName === '10'" :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";
    import Transaction from "./Transaction"
    export default {
        components: {
            Activity,
            Details,
            Contacts,
            TeamMembers,
            Business,
            Agreement,
            MoneyBack,
            Enclosure,
            Record,
            Transaction
        },
        props: {
            CustomerId: {
                type: Number,
                default: 0
            },
            transferState: {
                type: Boolean,
                default: true
            }
        },
        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>