<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-dropdown @command="handleCommand">
                <el-button icon="el-icon-plus" class="crm-btn org-btn">新建商机</el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1"><i class="iconfont iconkehu"></i> 客户商机</el-dropdown-item>
                    <el-dropdown-item command="2"><i class="iconfont icontongxunlu"></i> 直客商机</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!-- <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="d"><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', 3, 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', 3, 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="5">
                    <span class="font-size-12" style="padding-right: 10px">客户类型</span>
                    <el-select size="mini" v-model="msg.CustomerType" placeholder="请选择" @change="getList">
                        <el-option key="0" label="客户" :value="0"></el-option>
                        <el-option key="1" label="直客" :value="1"></el-option>
                    </el-select>
                </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', 3)">高级筛选</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 :selectable='checkboxT' fixed type="selection" width="50"></el-table-column>
            <el-table-column 
                fixed
                prop="BusinessName"
                label="商机名称"
                width="120"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p @click="openDetails2(scope)" class="font-color-link cp">{{scope.row.BusinessName}}</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=""
                label="线路"
                v-if="queryType[9].show"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p  class="" v-if="scope.row.LineName">{{ scope.row.LineName }}</p>
                    <p  class="" v-if="scope.row.LineTeamName">{{ scope.row.LineTeamName }}</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="BudgetPrice"
                label="预算价格"
                sortable
                v-if="queryType[2].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="PeopleNumber"
                label="预计人数"
                sortable
                v-if="queryType[3].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="BusinessStatusStr"
                label="商机状态"
                v-if="queryType[5].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="DepartTimestr"
                label="预计出发时间"
                sortable
                v-if="queryType[6].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="Remark"
                label="备注"
                v-if="queryType[4].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="PersonChargeStr"
                label="负责人"
                sortable
                v-if="queryType[7].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="UpdateTimestr"
                label="更新时间"
                sortable
                v-if="queryType[7].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CreateByStr"
                label="创建人"
                v-if="queryType[9].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CreateTimestr"
                label="创建时间"
                sortable
                v-if="queryType[8].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>
        <el-pagination
            class="Mypagination"
            background
            @current-change="handleCurrentChange"
            :page-sizes="[30, 60, 90, 100]"
            :page-size="msg.pageSize"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            :total="total">
        </el-pagination>
    </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-drawer
        :with-header="false"
        size='70%'
        :visible.sync="drawer2"
        direction="rtl"
        :before-close="handleClose">
        <businessInfoBox :BusinessId="BusinessId" :CustomerType="msg.CustomerType" :BusinessIdCustomerId="BusinessIdCustomerId" @transferS="transfer" @watersS="waters" @editCustbusiness="editCustbusiness"/>
    </el-drawer>
    <!-- 编辑客户 -->
    <div v-if="dialogCustomerVisible">
        <customerDialogBox :name="dialogTableVisibleName" :CustomerId="CustomerId"/>
    </div>
    <!-- 添加商机弹窗 -->
    <div v-if="dialogBusinessVisible">
        <addBusinessBox @getList="getList" :name="dialogBusinessVisibleName" :ID="BusinessId" :isGuest="isGuest"/>
    </div>
    <!-- 添加团队成员弹窗 -->
    <div v-if="addBusinessShow">
        <addTeamman :ID="businessIds" @addTeammanOk="addTeammanOk"/>
    </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>
            <div class="MyEditForm-item">
                <el-form-item label="将原负责人" class="label-pad-left form-check">
                    <div class="pad-left-10">
                        <el-radio v-model="transferMsg.TransferType" :label="1">移出</el-radio>
                        <el-radio v-model="transferMsg.TransferType" :label="2">转为团队成员</el-radio>
                    </div>
                </el-form-item>
            </div>
            <div class="MyEditForm-item" v-if="transferMsg.TransferType === 2">
                <el-form-item label="权限" class="label-pad-left form-check">
                    <div class="pad-left-10">
                        <el-radio v-model="transferMsg.IsRead" :label="0">只读</el-radio>
                        <el-radio v-model="transferMsg.IsRead" :label="1">读写</el-radio>
                    </div>
                </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="TraOrderShow">
        <TraOrder :ID="businessIds" :EmployeeList="EmployeeList" 
        @cancel="TraOrderShow=false"
        @TraOrder="TraOrderShow=false"></TraOrder>
    </div> 
  </div>
</template>
<script>
import mySelect from "../dialogModel/select";
import customerInfoBox from "../assembly/customerInfoBox";
import customerDialogBox from "../dialogModel/customerDialogBox";
import businessInfoBox from "./businessInfoBox";
import addBusinessBox from "./addBusinessBox";
import addTeamman from "./addTeamman";
import TraOrder from "./TraOrder";
export default {
    components: {
        mySelect,
        customerInfoBox,
        businessInfoBox,
        addBusinessBox,
        customerDialogBox,
        addTeamman,
        TraOrder
    },
    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,
                },
                {
                    label: '线路',
                    show: true,
                }
            ],
            isGuest: false,
            BusinessId: 0,
            BusinessIdCustomerId: 0,
            dialogTableVisibleName: '新建客户',
            dialogBusinessVisibleName: '新建商机',
            CustomerId: 0,
            CustomerIdStr: '',
            addBusinessShow: false,
            transferVisible: false,
            dialogCustomerVisible: false,
            mySelectCtrl: false,
            drawer: false,
            drawer2: false,
            loading: true,
            dialogBusinessVisible: false,
            tableData: [],
            multipleSelection: [],
            EmployeeList: [],
            value: '',
            userInfo: {},
            transferMsg: {
                CustomerIds: [],
                TransferType: 1, //类型，1-移除，2-转为团员
                IsRead: 0, //0-读写，1-只读
                EmpId: '',
            },
            msg: {
                KeyWord: '',
                pageIndex: 1,
                pageSize: 30,
                ContactNumber: '',
                WhereType: -1,
                OrderBy: '',
                ID: 24,
                CustomerType: 0
            },
            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 iconplus-transfer',
                    myFun: this.TransferOrder
                },
                // {
                //     name: '删除',
                //     class:'iconfont icondelete',
                //     myFun: this.delete
                // },
                {
                    name: '添加团队成员',
                    class:'iconfont icontianjia',
                    myFun: this.addCust
                }            
            ],
            sceneList: [],
            SceneEmployeeList: [],
            sceneID: 24,
            visible: false,
            TraOrderShow: false,
        };
    },
    mounted() {
        this.userInfo = this.getLocalStorage();
        this.getList()
        this.Employee()
        let $this = this
        this.MsgBus.$on('closeCustomerDialogBox', function (){
            $this.dialogCustomerVisible = false
        })
        this.MsgBus.$on('closeBusinessDialogBox', function (){
            $this.dialogBusinessVisible = false
        })
        this.MsgBus.$on('closeaddTeamman', function (){
        $this.addBusinessShow = false
        })
        this.GetSceneEmployeeList()
        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){
          if(command ==='d') {
            this.$message.warning('功能正在开发中~');
          }else {
            this.isGuest = command === '1' ? false : true
            this.BusinessId = 0
            this.dialogBusinessVisibleName = '新建商机'
            this.dialogBusinessVisible=true
          }
        },
    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: 3}, 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()
    },
    checkboxT(row,index){
      if(row.IsRead===0){
        return 1;
      }else{
        return 0;
      }
    },
    addTeammanOk(){
        this.addBusinessShow = false
    },
    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 => {}
        );
    },
    //转移订单
    TransferOrder(){
        return
        let str = ''
        this.businessIdsArr.map((x, i)=>{
            str = str + x + ','
        })
        this.businessIds = str.substring(0, str.length - 1)
        this.TraOrderShow = true
    },
    //添加团队成员
    addCust(){
        let str = ''
        this.businessIdsArr.map((x, i)=>{
            str = str + x + ','
        })
        this.businessIds = str.substring(0, str.length - 1)
        this.addBusinessShow = true
    },
    //删除
    delete(){
         
    },
    //导出
    export(){
      
    },
    // 更改状态
    changeState(){
         
    },
    // 放入公海
    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){
        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.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: ''
                    }
                }
            })
        }
    },
    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/GetCustomerBusinessPage', 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>
