<style>
@import '../../assets/css/customerManage.css';
.el-table__fixed-body-wrapper table{
    padding-bottom: 8px!important;
}
</style>
<template>
  <div class="customerManage">
    <div class="tools">
        <h1>联系人管理</h1>
        <div style="width: 340px;">
            <el-input placeholder="请输入联系人名" v-model="msg.KeyWord" class="input-with-select">
                <el-button slot="append"  icon="el-icon-search" @click="getList"></el-button>
            </el-input>
        </div>
        <div class="rightmenu">
            <el-button icon="el-icon-plus" class="crm-btn org-btn" @click="BusinessId = 0, dialogBusinessVisibleName = '新建联系人', dialogBusinessVisible=true">新建联系人</el-button>
            <el-dropdown @command="handleCommand">
                <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="1"><i class="iconfont icondaochu"></i> 导入</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    <div class="query-box" :style="{'padding-bottom': sceneList.length > 0 ? '0px' : '10px'}">
        <div v-if="!multipleSelection.length">
            <el-row :gutter="30">
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">场景</span>
                    <el-popover
                        placement="bottom"
                        width="180"
                        popper-class="popover-class"
                        v-model="visible"
                        trigger="click">
                        <div data-v-16d669bb="" class="scene-container">
                            <div class="scene-list">
                                <div class="scene-list-item" :class="{'scene-list-item-select': sceneID === item.ID}" v-for="(item, index) in SceneEmployeeList" :key="index" @click="changeWhere(item)">{{item.SceneName}}</div>
                            </div>
                            <div class="handle-interval">
                                <div class="vux-flexbox handle-button vux-flex-row"  @click="MsgBus.$emit('sceneBoxShow', 2, 1)">
                                    <i class="el-icon-circle-plus-outline handle-button-icon"></i>
                                <div class="handle-button-name">新建场景</div></div>
                                <div class="vux-flexbox handle-button vux-flex-row" @click="MsgBus.$emit('sceneEditBoxShow', 2, SceneEmployeeList)">
                                    <i class="el-icon-setting handle-button-icon"></i>
                                    <div class="handle-button-name">管理</div>
                                </div>
                            </div>
                        </div>
                        <el-select size="mini" popper-class="select-no" slot="reference" v-model="msg.ID" placeholder="请选择">
                            <el-option
                                v-for="item in SceneEmployeeList"
                                :key="item.ID"
                                :label="item.SceneName"
                                :value="item.ID">
                            </el-option>
                        </el-select>
                    </el-popover>
                    
                </el-col>
                <el-col :span="4">
                    <el-button icon="iconfont iconshaixuan" class="crm-btn query-btn crm-btn-mini margin-right0" @click="MsgBus.$emit('sceneBoxShow', 2)">高级筛选</el-button>
                </el-col>
            </el-row>
        </div>
        <div v-else class="flex-center">
            <p class="font-size-12">已选 <span class="font-color-link">{{multipleSelection.length}}</span> 项</p>
            <div class="selection-box">
               <el-button  v-for="(item, index) in selectionList" :key="index" @click="item.myFun"><i :class="item.class"></i>{{item.name}}</el-button>
            </div>
        </div>
        <div class="scene-wrapper" v-if="sceneList.length > 0">
            <ul class="list">
                <li class="list-item" v-for="(item, index) in sceneList" :key="index">
                    <span v-if="item.formType !== 'datetime'">{{item.str}}&nbsp;{{item.regionStr}}“{{item.nameFC ? item.nameFC : item.value}}”</span>
                    <span v-else>{{item.str}}&nbsp;“{{item.start}}-{{item.end}}”</span>
                    <i class="el-icon-close icon" @click="deleteScene(index)"></i>
                </li>
            </ul>
        </div>
    </div>
    <div class="page-content">
        <el-table 
            v-if="loading"
            v-loading="true"
            :data="[]">
            <el-table-column 
                v-for="(item, index) in queryType2" :key="index"
                :label="item.label">
            </el-table-column>
        </el-table>
        <el-table
            v-if="!loading"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :height="sceneList.length > 0 ? '600' : '660'"
            border
            row-class-name="font-size-12"
            @selection-change="handleSelectionChange">
            <el-table-column fixed type="selection" width="40"></el-table-column>
            <el-table-column 
                fixed
                prop="ContactName"
                label="联系人"
                width="120"
                v-if="queryType[0].show"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p @click="openDetails2(scope)" class="font-color-link cp">{{scope.row.ContactName}}</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="CustomerName"
                label="客户名称"
                v-if="queryType[1].show"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p @click="openDetails(scope)" class="font-color-link cp">{{scope.row.CustomerName}}</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="SexStr"
                label="性别"
                v-if="queryType[9].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="ContactPhone"
                label="联系人电话"
                sortable
                v-if="queryType[2].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="ContactDutyStr"
                label="职务"
                sortable
                v-if="queryType[3].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="IsCarefor"
                label="是否是决策人"
                v-if="queryType[4].show"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p v-if="scope.row.IsCarefor === 0">否</p>
                    <p v-else>是</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="PersonChargeStr"
                label="负责人"
                sortable
                v-if="queryType[5].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="UpdateTimeStr"
                label="更新时间"
                v-if="queryType[6].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CreateByStr"
                label="创建人"
                v-if="queryType[7].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CreateTimestr"
                label="创建时间"
                v-if="queryType[6].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="IsCarefor"
                fixed="right"
                width="50"
                label="关注">
                <template slot-scope="scope">
                    <p>
                        <el-tooltip class="item" effect="dark" content="关注" placement="top">
                            <i v-if="scope.row.IsCarefor === 0" @click="CareforCustomerBusiness(scope)" class="iconfont iconwujiaoxing cp"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="取消关注" placement="top">
                            <i v-if="scope.row.IsCarefor === 1" @click="CareforCustomerBusiness(scope)" class="iconfont iconstar_full cp"></i>
                        </el-tooltip>
                    </p>
                </template>
            </el-table-column>
            <el-table-column 
                width="40"
                fixed="right">
                <template slot="header" slot-scope="scope">
                    <el-popover
                        placement="bottom"
                        width="240">
                        <mySelect :queryType="queryType" @listenTochildEvent="showMessageFromChild"/>
                        <i class="el-icon-s-operation cp" slot="reference"></i>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination">
        <el-pagination
            class="Mypagination"
            background
            @current-change="handleCurrentChange"
            :page-sizes="[30, 60, 90, 100]"
            :page-size="msg.pageSize"
            layout="sizes, prev, pager, next"
            @size-change="handleSizeChange"
            :total="total">
        </el-pagination>
    </div>
    <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>
    <!-- 客户信息抽屉 -->
    <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-drawer
        :with-header="false"
        size='70%'
        :visible.sync="drawer2"
        direction="rtl"
        :before-close="handleClose">
        <ContactsInfoBox :ContactId="BusinessId" :CustomerId="BusinessIdCustomerId"  @transferS="transfer" @watersS="waters" @editCustbusiness="editCustbusiness"/>
    </el-drawer>
    <!-- 编辑客户 -->
    <div v-if="dialogCustomerVisible">
        <customerDialogBox :name="dialogTableVisibleName" :CustomerId="CustomerId"/>
    </div>
    <!-- 添加弹窗 -->
    <div v-if="dialogBusinessVisible">
        <addContactsBox @getList="getList"  :name="dialogBusinessVisibleName" :ID="BusinessId" :BusinessIdCustomerId="BusinessIdCustomerId" />
    </div>
  </div>
</template>
<script>
import mySelect from "../dialogModel/select";
import customerInfoBox from "../assembly/customerInfoBox";
import customerDialogBox from "../dialogModel/customerDialogBox";
import ContactsInfoBox from "./contactsInfoBox";
import addContactsBox from "./addContactsBox";
export default {
    components: {
        mySelect,
        customerInfoBox,
        ContactsInfoBox,
        addContactsBox,
        customerDialogBox
    },
  data() {
    return {
        businessIdsArr: [],
        businessIds: '',
        queryType2: [
            {
                label: '联系人',
                show: true,
            },{
                label: '客户名称',
                show: true,
            },{
                label: '联系电话',
                show: true,
            },{
                label: '职务',
                show: true,
            },{
                label: '是否是决策人',
                show: true,
            },{
                label: '负责人',
                show: true,
            },{
                label: '更新时间',
                show: true,
            },{
                label: '创建人',
                show: true,
            },{
                label: '创建时间',
                show: true,
            },{
                label: '性别',
                show: true,
            }
        ],
        queryType: [
            {
                label: '联系人',
                show: true,
            },{
                label: '客户名称',
                show: true,
            },{
                label: '联系电话',
                show: true,
            },{
                label: '职务',
                show: true,
            },{
                label: '是否是决策人',
                show: true,
            },{
                label: '负责人',
                show: true,
            },{
                label: '更新时间',
                show: true,
            },{
                label: '创建人',
                show: true,
            },{
                label: '创建时间',
                show: true,
            },{
                label: '性别',
                show: true,
            }
        ],
        BusinessId: 0,
        BusinessIdCustomerId: 0,
        dialogTableVisibleName: '新建客户',
        dialogBusinessVisibleName: '新建联系人',
        CustomerId: 0,
        CustomerIdStr: '',
        transferVisible: false,
        dialogCustomerVisible: false,
        mySelectCtrl: false,
        drawer: false,
        drawer2: false,
        loading: true,
        dialogBusinessVisible: false,
        tableData: [],
        multipleSelection: [],
        EmployeeList: [],
        value: '',
        userInfo: {},
        transferMsg: {
            ContactIds: [],
            EmpId: '',
        },
        msg: {
            KeyWord: '',
            pageIndex: 1,
            pageSize: 30,
            ContactNumber: '',
            WhereType: -1,
            OrderBy: '',
            ID: 18,
        },
        total: 0,
        WhereTypeList: [
            {
                id: -1,
                name: '全部'
            },{
                id: 1,
                name: '我负责的'
            },{
                id: 2,
                name: '下属的'
            },{
                id: 3,
                name: '我参与的'
            },{
                id: 4,
                name: '我关注的'
            },
        ],
        selectionList: [
            {
                name: '转移',
                class:'iconfont iconplus-transfer',
                myFun: this.transfer
            },{
                name: '删除',
                class:'iconfont icondelete',
                myFun: this.delete
            }        
        ],
        sceneList: [],
        SceneEmployeeList: [],
        sceneID: 18,
        visible: false,
    };
  },
  mounted() {
    this.userInfo = this.getLocalStorage();
    this.getList()
    this.Employee()
    this.GetSceneEmployeeList()
    let $this = this
    this.MsgBus.$on('closeCustomerDialogBox', function (){
        $this.dialogCustomerVisible = false
    })
    this.MsgBus.$on('closeaddContacts', function (){
        $this.dialogBusinessVisible = false
    })
    this.MsgBus.$on('sceneSave', function (msg){
        $this.sceneList = [...msg]
        $this.GetSceneEmployeeList()
        let obj = {}
        msg.forEach(element => {
            obj[element.name] = element
        });
        $this.msg.Data = obj
        $this.getList()
    })
    this.MsgBus.$on('editScene', function (){
            $this.GetSceneEmployeeList()
        })
  },beforeDestroy() {
        this.MsgBus.$off('sceneSave');
        this.MsgBus.$off('editScene');
    },
  methods: {
        handleCommand(command){
            this.$message.warning('功能正在开发中~');
        },
      changeWhere(item){
        this.msg.ID = item.ID
        this.sceneID = item.ID
        this.msg.Data = item.WhereData ? JSON.parse(item.WhereData) : {}
        this.msg.WhereType = item.WhereType
        this.visible = false
        this.getList()
    },
    GetSceneEmployeeList(){
        this.apipost('/api/Scene/GetSceneEmployeeList', {LableType: 2}, res=>{
            if (res.data.resultCode == 1) {
                this.SceneEmployeeList = res.data.data
            }
        })
    },
    deleteScene(index){
        this.sceneList.splice(index, 1)
        let obj = {}
        this.sceneList.forEach(element => {
            obj[element.name] = element
        });
        this.msg.Data = obj
        this.getList()
    },
    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 => {}
        );
    },
    //删除
    delete(){
        console.log('删除')
    },
    //导出
    export(){
        console.log('导出')
    },
    // 更改状态
    changeState(){
        console.log('更改状态')
    },
    // 放入公海
    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: '已取消'
          });          
        }); 
    },
     // 关注
    CareforCustomerBusiness(scope){
        console.log(scope.row)
        this.apipost('/api/Customer/CareforCustomerBusiness', {BusinessCreateID: scope.row.BusinessCreateID}, res=>{
            if (res.data.resultCode == 1) {
                this.$message.success('操作成功');
                this.getList()
            }
        })
    },
    // 转移
    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: '',
                    }
                }
            })
        }
    },
    showMessageFromChild(list){
        this.mySelectCtrl=!this.mySelectCtrl
        if (list) {
            this.queryType = list
            this.getList()
        }
    },
    editCustbusiness(){
        this.dialogBusinessVisibleName = '修改联系人'
        this.dialogBusinessVisible = true
    },
    editCust(){
        this.dialogTableVisibleName = '修改客户'
        this.dialogCustomerVisible = true
    },
    openDetails2(scope){
        this.BusinessId = scope.row.ID
        this.BusinessIdCustomerId = scope.row.CustomerId
        this.drawer2 = true
    },
    openDetails(scope){ 
        this.drawer = true
        this.CustomerId = scope.row.CustomerId
        this.CustomerName = scope.row.CustomerName
        this.drawer = true
    },
    handleSizeChange(val) {
        this.msg.pageSize = val
        this.getList();
    },
    handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
    },
    handleClose(done) {
        done();
    },
    getList: function (){
        this.tableData = []
        this.loading = true
        this.apipost('/api/Customer/GetCustomerContactPage', this.msg, res=>{
            if (res.data.resultCode == 1) {
                this.tableData = res.data.data.pageData;
                this.total = res.data.data.count;
                this.loading = false;
            }
        })
    },
    handleSelectionChange(val) {
        this.multipleSelection = val.map(x=>
            x.CustomerId
        )
        this.businessIdsArr = val.map(x=>
            x.ID
        )
    }
  }
};
</script>
