<style>
.main{
    height: 100%;
    position: relative;
}
.left-nav{
    width: 184px;
    float: left;
    box-sizing: border-box;
    background:rgba(13,36,129,1);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
.right-content{
    position: absolute;
    top:0;
    left: 184px;
    background: #F4F5F9;
    box-sizing: border-box;
    right: 0;
    bottom: 0;
}
.home-nv-top{
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    position: absolute;
    left:0;
    right: 0;
    top: 0px;
    background: #FFF;
    border-bottom: 1px solid #F1F1F1;
}
.template-div{
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 0 30px;
}
*::-webkit-scrollbar{
    width: 4px;
    height: 8px;
}
*::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #555;
}
*::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #555;
}
.main .el-tag.el-tag--info{
  background-color: rgba(0,0,0,0);
  border-color: rgba(0,0,0,0);
  display: inline-block;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow:ellipsis;
}
.el-image-viewer__wrapper{
    z-index: 10086 !important;
}
.add-scene .el-dialog__body{
    padding-top: 20px;
}
.add-scene2 .el-dialog__body{
    padding-bottom: 20px;
}
</style>
<template>
    <div class="main">
        <div class="left-nav">
            <HomeNavLeft/>
        </div>
        <div class="right-content">
            <div class="home-nv-top">
                <HomeNavTop/>
            </div>
            <div class="template-div">
                <router-view/>
            </div>
        </div>
        <!-- 添加商机弹窗 -->
        <div v-if="dialogBusinessVisible">
            <addBusinessBox :name="dialogBusinessVisibleName" :ID="BusinessId" :CustomerId="CustomerId" :ContactId="ContactId" type="1" :isGuest="isGuest"/>
        </div>
        <!-- 客户信息抽屉 -->
        <el-drawer
            :with-header="false"
            size='70%'
            :visible.sync="drawer" 
            direction="rtl"
            :before-close="handleClose">
            <customerInfoBox :CustomerId="CustomerId"  @transferS="transfer" @watersS="waters" @editCustS="editCust"/>
        </el-drawer>
        <!-- 转交联系人 -->
        <el-dialog :visible.sync="transferVisible" :close-on-click-modal="false" width="450px" custom-class="transfer-box add-box add-box2">
            <div class="add-tit" slot="title">
                <p><span></span>移交联系人</p>
                <span icon="el-icon-close"></span>
            </div>
            <el-form :model="transferMsg" ref="form" class="MyEditForm" >
                <div class="MyEditForm-item">
                    <el-form-item label="变更负责人为" class="label-pad-left">
                        <el-select
                            filterable
                            v-model="transferMsg.EmpId" placeholder="请选择">
                            <el-option
                                v-for="item in EmployeeList"
                                :label='item.EmName'
                                :value='item.EmployeeId'
                                :key='item.EmployeeId'>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="add-box-btn" @click="transfer(2)">确 定</el-button>
                <el-button class="add-box-btn add-box-cancel" @click="transferVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 编辑客户 -->
        <div v-if="dialogCustomerVisible">
            <customerDialogBox :name="dialogTableVisibleName" :CustomerId="CustomerId"/>
        </div>
        <!-- 线索抽屉 -->
        <el-drawer
            :with-header="false"
            size='70%'
            :visible.sync="dialogClueWinVisible"
            direction="rtl"
            :before-close="handleClose">
            <clueBox :CustomerId="ClueCustomerId" @transferS="transfer2" @deleteClue="deleteClue2" @watersS="waters2" @editCustS="editCust2"/>
        </el-drawer>
        <!-- 修改线索 -->
        <div v-if="dialogClue">
            <customerDialogBox :name="dialogClueName" :CustomerId="ClueCustomerId" type="2"/>
        </div>
        <!-- 图片预览 -->
        <el-image-viewer 
        v-if="showViewer" 
        :on-close="closeViewer" 
        :url-list="[url]" />
        <!-- 境内合同弹窗 -->
        <domesticTravelcontract v-if="domesticTravelcontractShow" :ID="contractID"/>
        <!-- 一日合同弹窗 -->
        <onedayTripContract v-if="onedayTripContractShow" :ID="contractID"/>
        <!-- 委托合同弹窗 -->
        <singleContract v-if="singleContractShow" :ID="contractID"/>
        <!-- 合同查看 -->
        <TravelContractView v-if="TravelContractViewShow" :ID="contractID"/>
        <!-- 合同抽屉 -->
        <el-drawer
            :with-header="false"
            size='70%'
            :visible.sync="contractDrawer" 
            direction="rtl"
            :before-close="handleClose">
            <contractInfoBox :ID="contractID"/>
        </el-drawer>
        <!-- 商机抽屉 -->
        <el-drawer
            :with-header="false"
            size='70%'
            :visible.sync="busnessDrawer"
            direction="rtl"
            :before-close="handleClose">
            <businessInfoBox :BusinessId="BusinessId" :CustomerType="CustomerType" :BusinessIdCustomerId="BusinessIdCustomerId" @transferS="busTransfer" @watersS="busWaters" @editCustbusiness="editCustbusiness"/>
        </el-drawer>
        <!-- 高级筛选 -->
        <el-dialog :visible.sync="sceneShow" :close-on-click-modal="false" width="800px" custom-class="transfer-box add-box add-box2 add-scene">
            <div class="add-tit" slot="title">
                <p><span></span>新建场景</p>
                <span icon="el-icon-close"></span>
            </div>
            <sceneBox :LableType="LableType" :sceneType="sceneType" :sceneDataList="sceneDataList"/>
        </el-dialog>
        <!-- 高级筛选修改 -->
        <el-dialog :visible.sync="sceneEditBoxShow" :close-on-click-modal="false" width="800px" custom-class="transfer-box add-box add-box2 add-scene add-scene2">
            <div class="add-tit" slot="title">
                <p><span></span>场景管理</p>
                <span icon="el-icon-close"></span>
            </div>
            <sceneEditBox :LableType="LableType" :sceneData="sceneData" />
        </el-dialog>
    </div>
</template>
<script>
import HomeNavLeft from '../components/HomeNav/HomeNavLeft';
import HomeNavTop from '../components/HomeNav/HomeNavTop';
import addBusinessBox from "../components/businessManagement/addBusinessBox";
import customerDialogBox from "../components/dialogModel/customerDialogBox";
import customerInfoBox from "../components/assembly/customerInfoBox";
import clueBox from "../components/clueManagement/customerInfoBox";
import clueDialogBox from "../components/clueManagement/customerInfoBox";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import domesticTravelcontract from '../components/contractManagement/domesticTravelcontract'
import onedayTripContract from '../components/contractManagement/onedayTripContract'
import singleContract from '../components/contractManagement/singleContract'
import TravelContractView from '../components/contractManagement/TravelContractView'
import contractInfoBox from '../components/contractManagement/contractInfoBox'
import businessInfoBox from "../components/businessManagement/businessInfoBox";
import sceneBox from "../components/dialogModel/sceneBox"
import sceneEditBox from "../components/dialogModel/sceneEditBox"
export default {
    components: {HomeNavLeft, HomeNavTop, addBusinessBox, customerDialogBox, customerInfoBox, clueBox, clueDialogBox, ElImageViewer, domesticTravelcontract, onedayTripContract, singleContract, TravelContractView, contractInfoBox, businessInfoBox, sceneBox, sceneEditBox},
    data () {
        return {
            sceneType: 0,
            LableType: 1,
            sceneShow: false,
            dialogBusinessVisibleName: '新建商机',
            BusinessId: 0,
            BusinessIdCustomerId: 0,
            busnessDrawer: false,
            contractDrawer: false,
            CustomerType: 0,
            contractID: 0,
            url: '',
            showViewer: false,
            dialogBusinessVisible: false,
            CustomerId: 0,
            ContactId: 0,
            drawer: false,
            CustomerId: 0,
            CustomerName: '',
            ClueCustomerId: 0,
            ClueCustomerName: '',
            transferVisible: false,
            EmployeeList: [],
            dialogCustomerVisible: false,
            dialogClue: false,
            dialogTableVisibleName: '新建客户',
            dialogClueName: '新建线索',
            transferMsg: {
                ContactIds: [],
                EmpId: '',
            },
            businessIdsArr: [],
            multipleSelection: [],
            multipleSelection2: [],
            dialogClueWinVisible: false,
            domesticTravelcontractShow: false,
            singleContractShow: false,
            onedayTripContractShow: false,
            TravelContractViewShow: false,
            isGuest: false,
            sceneData: [],
            sceneEditBoxShow: false,
            sceneDataList: [],
            SceneName: '',
            SceneID: 0,
        }
    },
    mounted () {
        this.userInfo = this.getLocalStorage();
        this.Employee()
        let $this= this
        this.MsgBus.$on('openCustomerWin', function (row) {
            $this.CustomerId = row.CustomerId
            $this.CustomerName = row.CustomerName
            $this.drawer = true
        })
        this.MsgBus.$on('addBusinessBoxOpen', function(CustomerId, ContactId, isGuest){
            $this.CustomerId = CustomerId
            $this.ContactId = ContactId
            $this.dialogBusinessVisible = true
            $this.isGuest = isGuest
            this.dialogBusinessVisibleName = '新建商机'
        })
        this.MsgBus.$on('closeBusinessDialogBox', function (){
            $this.dialogBusinessVisible = false
        })
        this.MsgBus.$on('closeCustomerDialogBox', function (){
            $this.dialogCustomerVisible = false
        })
        this.MsgBus.$on('openClueWin', function (row){
            $this.ClueCustomerId = row.CustomerId
            $this.ClueCustomerName = row.CustomerName
            $this.dialogClueWinVisible = true
        })
        this.MsgBus.$on('closeCustomerDialogBox', function (){
            $this.dialogClue = false
        })
        this.MsgBus.$on('showImg', function (url){
            $this.url = url
            $this.onPreview()
        })
        this.MsgBus.$on('contractOpen', function (type , ID){
            $this.contractID = 0
            if (ID) {
                $this.contractID = ID
            }
            if(type === '1') {
                $this.onedayTripContractShow = true
            } else if(type === '2') {
                $this.domesticTravelcontractShow = true
            } else if(type === '3') {
                $this.singleContractShow = true
            }
        })
        this.MsgBus.$on('contractClose', function (type){
            if(type === '1') {
                $this.onedayTripContractShow = false
            } else if(type === '2') {
                $this.domesticTravelcontractShow = false
            } else if(type === '3') {
                $this.singleContractShow = false
            }
        })
        this.MsgBus.$on('ViewContractShow', function (ID){
            $this.contractID = ID
            $this.TravelContractViewShow = true
        })
        this.MsgBus.$on('ViewContractClose', function (){
            $this.TravelContractViewShow = false
        })
        this.MsgBus.$on('contractDrawerShow', function (ID){
            $this.contractID = ID
            $this.contractDrawer = true
        })
        this.MsgBus.$on('busnessDrawerShow', function (ID, CustomerType){
            $this.busnessDrawer = true
            $this.BusinessId = ID
            $this.CustomerType = CustomerType
        })
        this.MsgBus.$on('sceneBoxShow', function (type, sceneType, sceneDataList){
            $this.LableType = type
            $this.sceneType = sceneType
            $this.sceneDataList = sceneDataList
            $this.sceneShow = true
        })
        this.MsgBus.$on('sceneBoxClose', function (){
            $this.sceneShow = false
        })
        this.MsgBus.$on('sceneEditBoxShow', function (type, data){
            $this.LableType = type
            $this.sceneData = data
            $this.sceneEditBoxShow = true
        })
        this.MsgBus.$on('ssceneEditBoxClose', function (){
            $this.sceneEditBoxShow = false
        })
    },
    methods: {
        sceneAdd(){

        },
        editCustbusiness(){
            this.dialogBusinessVisibleName = '修改商机'
            this.dialogBusinessVisible = true
        },
        // 放入公海
        busWaters(type){
            let tips = '是否放入公海？'
            if(type === 1) {
                tips = '是否把客户“'+ this.CustomerName + '”放入公海？'
                this.multipleSelection.push(this.CustomerId)
            }
            this.$confirm(tips, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                let str = ''
                this.multipleSelection.map((x, i)=>{
                    str = str + x + ','
                })
                this.apipost('/api/Customer/RemoveMyCustomer', {CustomerIds: str.substring(0, str.length - 1)}, res=>{
                    if (res.data.resultCode == 1) {
                        if (type === 1) {} {
                            this.drawer = false
                        }
                        this.multipleSelection = []
                        this.$message.success(res.data.message);
                        this.getList()
                    }
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            }); 
        },
        // 转移
        busTransfer(type){
            if (type !== 2) {
                if (type === 3) {
                    this.multipleSelection.push(this.CustomerId)
                }
                this.transferVisible = true
            } else {
                if (this.transferMsg.EmpId === '') {
                    return this.$message.error('请选择变更负责人！')
                }
                let str = ''
                this.multipleSelection.map((x, i)=>{
                    str = str + x + ','
                })
                let str2 = ''
                this.transferMsg.TransferOther.map((x, i)=>{
                    str2 = str2 + x + ','
                })
                this.transferMsg.CustomerIds = str.substring(0, str.length - 1)
                this.transferMsg.TransferOther = str2.substring(0, str.length - 1)
                this.apipost('/api/Customer/TransferCustomerBusiness', this.transferMsg, res=>{
                    if (res.data.resultCode == 1) {
                        this.multipleSelection = []
                        this.transferVisible = false
                        if (type === 3) {} {
                            this.drawer = false
                        }
                        this.$message.success(res.data.message);
                        this.getList()
                        this.transferMsg = {
                            CustomerIds: [],
                            TransferType: 1,
                            IsRead: 0,
                            EmpId: ''
                        }
                    }
                })
            }
        },
        onPreview() {
            this.showViewer = true
        },
        // 关闭查看器
        closeViewer() {
            this.showViewer = false
        },
        editCust2(){
            this.dialogClueName = '修改线索'
            this.dialogClue = true
        },
        editCust(){
            this.dialogTableVisibleName = '修改客户'
            this.dialogCustomerVisible = true
        },
        Employee(){
            let msg = {
                RB_Group_id: this.userInfo.RB_Group_id,
                BranchId:-1,
                DepartmentId:0,
                PostId:0,
                IsLeave:0,
            }
            this.apipost2(
            "admin_get_EmployeeGetList",
            this.msg,
            res => {
                if (res.data.resultCode == 1) {
                this.EmployeeList = res.data.data;
                } else {
                }
            },
            err => {}
            );
        },
        handleClose(done) {
            done();
        },
        // 放入公海
        waters(type){
            let tips = '是否放入公海？'
            if(type === 1) {
                tips = '是否把客户“'+ this.CustomerName + '”放入公海？'
                this.multipleSelection.push(this.CustomerId)
            }
            this.$confirm(tips, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                let str = ''
                this.multipleSelection.map((x, i)=>{
                    str = str + x + ','
                })
                this.apipost('/api/Customer/RemoveMyCustomer', {CustomerIds: str.substring(0, str.length - 1)}, res=>{
                    if (res.data.resultCode == 1) {
                        if (type === 1) {} {
                            this.drawer = false
                        }
                        this.multipleSelection = []
                        this.$message.success(res.data.message);
                        this.getList()
                    }
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            }); 
        },
        // 转换为客户
        waters2(type){
            let tips = '确定将这些线索转换为客户吗?'
            if(type === 1) {
                tips = '是否把线索“'+ this.ClueCustomerName + '”转换为客户吗？'
                this.multipleSelection2.push(this.CustomerId)
            }
            this.$confirm(tips, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                let str = ''
                this.multipleSelection2.map((x, i)=>{
                    str = str + x + ','
                })
                this.apipost('/api/Customer/UpdateCustomerClue', {CustomerIds: str.substring(0, str.length - 1)}, res=>{
                    if (res.data.resultCode == 1) {
                        if (type === 1) {} {
                            this.drawer = false
                        }
                        this.multipleSelection2 = []
                        this.$message.success(res.data.message);
                        this.getList()
                    }
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            }); 
        },
        //删除线索
        deleteClue2(type){
            let tips = '确定将这些线索删除?'
            if(type === 1) {
                tips = '是否把线索“'+ this.ClueCustomerName + '”删除？'
                this.multipleSelection2.push(this.CustomerId)
            }
            this.$confirm(tips, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                let str = ''
                this.multipleSelection2.map((x, i)=>{
                    str = str + x + ','
                })
                this.apipost('/api/Customer/DelCustomerClue', {CustomerIds: str.substring(0, str.length - 1)}, res=>{
                    if (res.data.resultCode == 1) {
                        if (type === 1) {} {
                            this.drawer = false
                        }
                        this.multipleSelection2 = []
                        this.$message.success(res.data.message);
                        this.getList()
                    }
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            }); 
        },
        // 线索转移
        transfer2(type){
            if (type !== 2) {
                if (type === 3) {
                    this.multipleSelection2.push(this.CustomerId)
                }
                this.transferVisible = true
            } else {
                if (this.transferMsg.EmpId === '') {
                    return this.$message.error('请选择变更负责人！')
                }
                let str = ''
                this.multipleSelection2.map((x, i)=>{
                    str = str + x + ','
                })
                this.transferMsg.CustomerIds = str.substring(0, str.length - 1)
                this.apipost('/api/Customer/TransferCustomerClue', this.transferMsg, res=>{
                    if (res.data.resultCode == 1) {
                        this.multipleSelection2 = []
                        this.transferVisible = false
                        if (type === 3) {} {
                            this.drawer = false
                        }
                        this.$message.success(res.data.message);
                        this.getList()
                        this.transferMsg = {
                            CustomerIds: [],
                            EmpId: '',
                        }
                    }
                })
            }
        },
        // 转移
        transfer(type){
            if (type !== 2) {
                if (type === 3) {
                    this.businessIdsArr.push(this.CustomerId)
                }
                this.transferVisible = true
            } else {
                if (this.transferMsg.EmpId === '') {
                    return this.$message.error('请选择变更负责人！')
                }
                let str = ''
                this.businessIdsArr.map((x, i)=>{
                    str = str + x + ','
                })
                this.transferMsg.ContactIds = str.substring(0, str.length - 1)
                this.apipost('/api/Customer/TransferCustomerContact', this.transferMsg, res=>{
                    if (res.data.resultCode == 1) {
                        this.businessIdsArr = []
                        this.transferVisible = false
                        if (type === 3) {} {
                            this.drawer = false
                        }
                        this.$message.success(res.data.message);
                        this.getList()
                        this.transferMsg = {
                            ContactIds: [],
                            EmpId: '',
                        }
                    }
                })
            }
        },
    }

}
</script>
