<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.GusetName" 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="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-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 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', 5, 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', 5, 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', 5)">高级筛选</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="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="GusetName" label="客户名称" width="120" v-if="queryType[0].show"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div style="width:100%;min-height:38px;line-height:38px;" class="cp"
                            @click="openDetails(scope)">
                            <p class="font-color-link cp">{{scope.row.GusetName}}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="MobilePhone" label="手机号码" width="120" v-if="queryType[1].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="CustomerSourceTypeStr" label="客户来源" v-if="queryType[3].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="SourceAccountName" label="来源细分" v-if="queryType[31].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="ClueDemand" label="需求" v-if="queryType[32].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="WeChatNo" label="微信号" v-if="queryType[33].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="TraveNum" label="参团数" sortable v-if="queryType[4].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="OrderCount" label="订单交易数" sortable v-if="queryType[24].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="OrderMoney" label="交易金额" sortable v-if="queryType[25].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="BirthdayAddress" label="出生地点" sortable v-if="queryType[28].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="AddressDetail" label="家庭详细地址" sortable v-if="queryType[27].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="Address" label="地址" v-if="queryType[2].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="HistoryRecord" label="出境记录" sortable v-if="queryType[26].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="EconomicCapability" label="经济能力确认" sortable v-if="queryType[29].show"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-for="(item, index) in scope.row.EconomicCapability"
                            :key="index">{{item.Value}}{{index === scope.row.EconomicCapability.length -1 ? '' : '、'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="IsRecommendStr" label="是否推存" sortable v-if="queryType[30].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="BusinessCount" label="商机数" sortable v-if="queryType[5].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="ScoreNum" label="总评分" sortable v-if="queryType[6].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="Client_Balance" label="余额" sortable v-if="queryType[8].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="Birthday" label="生日" width="120" sortable v-if="queryType[13].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="MarriageStr" label="是否结婚" sortable v-if="queryType[14].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop=" Duty" label="职务" sortable v-if="queryType[15].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="IsHightSchool" label="是否高中生" sortable width="120" v-if="queryType[16].show"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <p>{{scope.row.IsHightSchool === 1 ? '是': '否'}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop=" IdCard" label="身份证" sortable v-if="queryType[17].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="PassportNo" label="护照号" sortable v-if="queryType[18].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="PassportAddress" label="护照签发地" width="120" sortable v-if="queryType[19].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="PassportIssuedStr" label="护照签发日期" width="120" sortable v-if="queryType[20].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="PassportExpiryStr" label="护照过期时间" width="120" sortable v-if="queryType[21].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="IssuingAuthority" label="签发机关" sortable v-if="queryType[22].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="CustomerLevelStr" label="客户等级" sortable v-if="false" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="Remarks" label="备注" sortable v-if="queryType[23].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="UpdateDate" label="最后更新时间" sortable v-if="queryType[9].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="PersonChargeStr" label="负责人" sortable v-if="queryType[10].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="CreateTimestr" label="创建时间" v-if="queryType[11].show" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="CreateByStr" label="创建人" v-if="queryType[12].show" width="120"
                    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="CareforCustomer(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="CareforCustomer(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="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" @editCustS="editCust" />
        </el-drawer>
        <div v-if="dialogTableVisible">
            <customerDialogBox @getList="getList" :name="dialogTableVisibleName" :CustomerId="CustomerId" />
        </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>
    </div>
</template>
<script>
    import mySelect from "../dialogModel/select";
    import customerInfoBox from "./customerInfoBox";
    import customerDialogBox from "./customerDialogBox";
    export default {
        components: {
            mySelect,
            customerInfoBox,
            customerDialogBox,
        },
        data() {
            return {
                ruleList: [],
                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: "生日",
                    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: "出境记录",
                    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: "生日",
                    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: "出境记录",
                    show: true,
                }, {
                    label: "家庭详细地址 ",
                    show: true,
                }, {
                    label: "出生地点",
                    show: true,
                }, {
                    label: "经济能力确认",
                    show: true,
                }, {
                    label: "是否推存",
                    show: true,
                }, {
                    label: "来源细分",
                    show: true,
                }, {
                    label: "需求",
                    show: true,
                }, {
                    label: "微信号",
                    show: true,
                }, ],
                CustomerId: 0,
                CustomerIdStr: "",
                transferVisible: false,
                mySelectCtrl: false,
                drawer: false,
                loading: true,
                dialogTableVisible: false,
                dialogTableVisibleName: "新建直客",
                tableData: [],
                multipleSelection: [],
                EmployeeList: [],
                value: "",
                userInfo: {},
                transferMsg: {
                    IDs: [],
                    EmpId: "",
                },
                msg: {
                    GusetName: "",
                    pageIndex: 1,
                    pageSize: 30,
                    ContactNumber: "",
                    WhereType: -1,
                    OrderBy: "",
                    ID: 36,
                },
                total: 0,
                WhereTypeList: [{
                    id: -1,
                    name: "全部",
                }, {
                    id: 1,
                    name: "我负责的",
                }, {
                    id: 2,
                    name: "下属的",
                }, {
                    id: 3,
                    name: "我关注的",
                }, ],
                selectionList: [{
                    name: "转移",
                    class: "iconfont iconplus-transfer",
                    myFun: this.transfer,
                }, {
                    name: "删除",
                    class: "iconfont icondelete",
                    myFun: this.delete,
                }, ],
                sceneList: [],
                SceneEmployeeList: [],
                sceneID: 36,
                visible: false,
            };
        },
        mounted() {
            this.userInfo = this.getLocalStorage();
            this.getList();
            this.Employee();
            let $this = this;
            this.MsgBus.$on("closeCustomerDialogBox", function () {
                $this.dialogTableVisible = 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) {
                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: 5,
                    },
                    (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();
            },
            getMarriageStr(type) {
                if (type === 5) return "其他";
                if (type === 4) return "丧偶";
                if (type === 3) return "未婚";
                if (type === 2) return "离婚";
                if (type === 1) return "已婚";
                if (type === 0) return "无";
            },
            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() {

            },
            // 关注
            CareforCustomer(scope) {
                this.apipost(
                    "/api/Customer/CareforGuesstCustomer", {
                        ID: scope.row.ID,
                    },
                    (res) => {
                        if (res.data.resultCode == 1) {
                            this.$message.success("操作成功");
                            this.getList();
                        }
                    }
                );
            },
            // 转移
            transfer(type) {
                if (type !== 2) {
                    if (type === 3) {
                        this.multipleSelection.push(this.CustomerId);
                    }
                    if (this.ruleList.length == 0) {
                        this.transferVisible = true
                    } else {
                        let tips = '系统已开启自动分配，无法指定推送，是否继续推送?'
                        this.$confirm(tips, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            let ids
                            if (this.CustomerId) {
                                ids = this.CustomerId
                            } else {
                                ids = this.multipleSelection.join(',')
                            }
                            this.apipost('/api/Customer/AutoTransferCustomer', {
                                IDs: ids
                            }, res => {
                                if (res.data.resultCode == 1) {
                                    this.$message.success(res.data.message);
                                    this.getList()
                                }
                            })
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        });
                    }
                } else {
                    if (this.transferMsg.EmpId === "") {
                        return this.$message.error("请选择变更负责人！");
                    }
                    let str = "";
                    this.multipleSelection.map((x, i) => {
                        str = str + x + ",";
                    });
                    this.transferMsg.IDs = str.substring(0, str.length - 1);
                    this.apipost(
                        "/api/Customer/TransferGuesstCustomer",
                        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 = {
                                    IDs: [],
                                    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.ID;
                this.CustomerName = scope.row.GusetName;
            },
            // 获取是否开启规则
            GetCustomerAllotRule() {
                this.apipost('/api/Customer/GetCustomerAllotRule', {}, res => {
                    if (res.data.resultCode == 1) {
                        this.ruleList = res.data.data.EmpList
                    }
                })
            },
            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/GetGuesstCustomerPageList",
                    this.msg,
                    (res) => {
                        if (res.data.resultCode == 1) {
                            this.tableData = res.data.data.pageData;
                            this.tableData.map((x) => {
                                if (x.EconomicCapability) {
                                    x.EconomicCapability = JSON.parse(x.EconomicCapability);
                                } else {
                                    x.EconomicCapability = [];
                                }
                            });
                            this.total = res.data.data.count;
                            this.loading = false;
                            this.GetCustomerAllotRule()
                        }
                    }
                );
            },
            handleSelectionChange(val) {
                this.multipleSelection = val.map((x) => x.ID);
            },
        },
    };
</script>