<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="editCustomerInfo">编辑</el-button>
                <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-item command="w"><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}}</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="8">
                        <Enclosure v-if="activeName === '8'" :ID='CustomerId' :type='1' />
                    </el-tab-pane>
                    <el-tab-pane label="操作记录" name="9">
                        <Record v-if="activeName === '9'" :CustomerId="CustomerId" />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <invalidDialogBox v-if="isShowInvalidBox" :customerInfo="detailsData" @success="refreshParentPage" />
    </div>
</template>
<script>
    import Activity from "./Activity";
    import Details from "./Details";
    import Enclosure from "./Enclosure";
    import Record from "./Record";
    import invalidDialogBox from "./invalidDialogBox";
    export default {
        components: {
            Activity,
            Details,
            Enclosure,
            Record,
            invalidDialogBox
        },
        props: {
            CustomerId: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                activeName: '1',
                detailsData: {},
                loading: false,
                isShowInvalidBox: 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()
            })
            //关闭无效线索弹窗
            this.MsgBus.$on('closeInvalidDialogBox', function () {
                $this.isShowInvalidBox = false;
            })
        },
        methods: {
            //刷新父页面
            refreshParentPage() {
                this.$emit('getList');
            },
            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)
                } else if (command === 'd') {
                    this.$emit('deleteClue', 1)
                }
                //无效线索弹窗
                else if (command === 'w') {
                    this.isShowInvalidBox = true;
                }
            },
            handleClick(tab, event) {},
            //编辑客户信息
            editCustomerInfo() {
                this.$emit('editCustS', 1)
            },
            handleClose(done) {
                done();
            }
        }
    }
</script>