<style>
@import '../../assets/css/customerManage.css';
</style>
<template>
  <div class="customerManage">
    <div class="tools">
        <h1>公海管理</h1>
        <div style="width: 340px;">
            <el-input placeholder="请输入客户名称/手机" v-model="msg.CustomerName" class="input-with-select">
                <el-button slot="append"  icon="el-icon-search" @click="getList"></el-button>
            </el-input>
        </div>
        <div class="rightmenu">
            <!-- <el-button class="crm-btn query-btn" @click="getList">查询</el-button> -->
            <!-- <el-button icon="el-icon-plus" class="crm-btn org-btn" @click="CustomerId = 0, dialogTableVisibleName = '新建客户', dialogTableVisible=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 icondaoru"></i> 导入</el-dropdown-item>
                    <!-- <el-dropdown-item><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'}">
         <el-row v-if="!multipleSelection.length" :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 WhereTypeList" :key="index" @click="changeWhere(item)">{{item.name}}</div>
                        </div>
                    </div>
                    <el-select size="mini" popper-class="select-no" slot="reference" v-model="msg.WhereType" placeholder="请选择">
                        <el-option
                            v-for="item in WhereTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-popover>
            </el-col>
            <!-- <el-col :span="4">
                <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', 6)">高级筛选</el-button>
            </el-col>
        </el-row>
        <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="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="CustomerName"
                label="客户名称"
                width="120"
                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="CustomerSourceTypeStr"
                label="客户来源"
                v-if="queryType[1].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="Contact"
                label="联系人"
                v-if="queryType[2].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="ContactNumber"
                label="联系电话"
                sortable
                v-if="queryType[3].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="Address"
                label="地址"
                v-if="queryType[4].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="BusinessCount"
                label="商机数"
                v-if="queryType[5].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="OrderCount"
                label="交易订单数"
                sortable
                width="100"
                v-if="queryType[6].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="OrderMoney"
                label="交易金额"
                sortable
                v-if="queryType[7].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CouponCount"
                label="优惠券"
                sortable
                v-if="queryType[8].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="Client_Balance"
                label="幸福存折"
                sortable
                v-if="queryType[9].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerLevelStr"
                label="客户级别"
                sortable
                v-if="queryType[10].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerStatus"
                label="审核状态"
                v-if="queryType[11].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="RealNameAuthentication"
                label="实名认证状态"
                v-if="queryType[12].show"
                width="120"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p v-if="scope.row.RealNameAuthentication === 1" class="font-color-success">已认证</p>
                    <p v-else class="font-color-warning">未认证</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="IsAppLogin"
                label="APP激活状态"
                v-if="queryType[13].show"
                width="120"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p v-if="scope.row.IsAppLogin === 0" class="font-color-warning">未激活</p>
                    <p v-else class="font-color-success">已激活</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数"
                sortable
                v-if="queryType[14].show"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <!-- <el-table-column 
                prop="NowSellName"
                label="负责人"
                width="120"
                v-if="queryType[15].show"
                show-overflow-tooltip>
            </el-table-column> -->
            <el-table-column
                prop="Visit"
                label="近期约访"
                sortable
                v-if="queryType[16].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="UpdateTime"
                label="更新时间"
                sortable
                v-if="queryType[17].show"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="CreateTimestr"
                label="创建时间"
                sortable
                v-if="queryType[18].show"
                show-overflow-tooltip>
            </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="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-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="addTeammanShow">
        <addTeamman :ID="CustomerIdStr" @addTeammanOk="addTeammanOk"/>
    </div>
  </div>
</template>
<script>
import mySelect from "../dialogModel/select";
import customerInfoBox from "./customerInfoBox";
import addTeamman from "../dialogModel/addTeamman";
export default {
    components: {
        mySelect,
        customerInfoBox,
        addTeamman
    },
  data() {
    return {
        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,
            },{
                label: '客户级别',
                show: true,
            },{
                label: '审核状态',
                show: true,
            },{
                label: '实名认证状态',
                show: true,
            },{
                label: 'APP激活状态',
                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,
            },{
                label: '审核状态',
                show: true,
            },{
                label: '实名认证状态',
                show: true,
            },{
                label: 'APP激活状态',
                show: true,
            },{
                label: '距进入公海天数',
                show: true,
            },{
                label: '负责人',
                show: true,
            },{
                label: '近期约访',
                show: true,
            },{
                label: '更新时间',
                show: true,
            },{
                label: '创建时间',
                show: true,
            },
        ],
        CustomerId: 0,
        CustomerIdStr: '',
        addTeammanShow: false,
        transferVisible: false,
        mySelectCtrl: false,
        drawer: false,
        loading: true,
        dialogTableVisible: false,
        dialogTableVisibleName: '新建客户',
        tableData: [],
        multipleSelection: [],
        EmployeeList: [],
        value: '',
        userInfo: {},
        transferMsg: {
            CustomerIds: [],
            EmpId: '',
        },
        msg: {
            CustomerName: '',
            Contact: '',
            pageIndex: 1,
            pageSize: 30,
            ContactNumber: '',
            WhereType: -1,
            OrderBy: '',
        },
        total: 0,
        WhereTypeList: [
            {
                id: -1,
                name: '全部'
            },{
                id: 1,
                name: '我负责的'
            },{
                id: 2,
                name: '下属的'
            },{
                id: 3,
                name: '我参与的'
            },{
                id: 4,
                name: '我关注的'
            },
        ],
        selectionList: [
            {
                name: '分配',
                class:'iconfont iconfenpei',
                myFun: this.transfer
            },{
                name: '领取',
                class:'iconfont iconlingqu',
                myFun: this.waters
            },{
                name: '删除',
                class:'iconfont icondelete',
                myFun: this.delete
            }
        ],
         sceneList: [],
        SceneEmployeeList: [],
        sceneID: -1,
        visible: false,
    };
  },
  mounted() {
    this.userInfo = this.getLocalStorage();
    this.getList()
    this.Employee()
    let $this = this
    this.MsgBus.$on('closeaddTeamman', function (){
      $this.addTeammanShow = 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()
        })
    },beforeDestroy() {
        this.MsgBus.$off('sceneSave');
    },
  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: 6}, 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 => {}
        );
    },
    
    //锁定
    locking(){
        console.log('锁定')
    },
    //解锁
    Unlock(){
        console.log('解锁')
    },
    addTeammanOk(){
        this.addTeammanShow = false
    },
    //添加团队成员
    addCust(){
        let str = ''
        this.multipleSelection.map((x, i)=>{
            str = str + x + ','
        })
        this.CustomerIdStr = str.substring(0, str.length - 1)
        this.addTeammanShow = true
    },
    //删除团队成员
    delCust(){
        console.log('删除团队成员')
    },
    //删除
    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 EmpId = this.userInfo.EmployeeId
            let str = ''
            this.multipleSelection.map((x, i)=>{
                str = str + x + ','
            })
            this.apipost('/api/Customer/ReceiveCustomer', {CustomerIds: str.substring(0, str.length - 1), EmpId: EmpId}, 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: '已取消'
            });
        }); 
    },
    // 转移
    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 + ','
            })
            this.transferMsg.CustomerIds = str.substring(0, str.length - 1)
            this.apipost('/api/Customer/ReceiveCustomer', 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: [],
                        EmpId: '',
                    }
                }
            })
        }
    },
    showMessageFromChild(list){
        this.mySelectCtrl=!this.mySelectCtrl
        if (list) {
            this.queryType = list
            this.getList()
        }
    },
    editCust(){
        this.dialogTableVisibleName = '修改客户'
        this.dialogTableVisible = 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/GetSharePageList ', this.msg, res=>{
            if (res.data.resultCode == 1) {
                this.tableData = res.data.data.pageData;
                this.loading = false;
            }
        })
    },
    handleSelectionChange(val) {
        this.multipleSelection = val.map(x=>
            x.CustomerId
        )
    }
  }
};
</script>
