<style scoped>
    .distributionRules {}

    .distributionRules_title {
        font-weight: bold;
        font-size: 18px;
        font-family: perfectFont;
        padding: 20px 0;
    }

    .page-content {
        background-color: #fff;
        padding: 20px;
    }

    .distributionRules_text {
        padding: 0 0 20px 0;
    }

    .text-negative {
        color: #f5576c
    }

    .distributionRules_num {
        display: flex;
        justify-content: space-between;
    }

    .distributionRules_num div {
        flex: 1;
    }

    .dataText {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .dataText_text {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .select-radio {
        display: flex;
        align-items: center;
    }
</style>
<template>
    <div class="customerManage">
        <h1 class="distributionRules_title">分配给以下部门/成员</h1>
        <div class="page-content">
            <div class="distributionRules_text">
                <span>引流排行配置</span>
                <span class="text-negative">*</span>
            </div>
            <div class="distributionRules_num">
                <div>
                    <el-button @click="clickSelectPeople(1)">选择部门/成员</el-button>
                </div>
                <div><span>已选择：{{msg.FlowList.length}}人</span></div>
            </div>
            <div class="dataText">
                <el-tag v-for="(item,index) in msg.FlowList" :key="index" class="dataText_text">{{item.EmName}}
                </el-tag>
            </div>
            <div class="distributionRules_text">
                <span>销售排行配置</span>
                <span class="text-negative">*</span>
            </div>
            <div class="distributionRules_num">
                <div>
                    <el-button @click="clickSelectPeople(2)">选择部门/成员</el-button>
                </div>
                <div><span>已选择：{{msg.SaleList.length}}人</span></div>
            </div>
            <div class="dataText">
                <el-tag v-for="(item,index) in msg.SaleList" :key="index" class="dataText_text">{{item.EmName}}
                </el-tag>
            </div>
            <br /><br />
            <el-button class="add-box-btn add-box-cancel" @click="saveRankRule" :disabled="disabledOff">立即保存</el-button>
        </div>
        <!-- 添加账号弹窗 -->
        <div v-if="isShowRuleForm">
            <addDistributionRules :obj="chooseObj" @addCustomerOk="addCustomerOk" />
        </div>
    </div>
</template>
<script>
    import addDistributionRules from "../dialogModel/addDistributionRules";
    export default {
        components: {
            addDistributionRules
        },
        data() {
            return {
                disabledOff: false,
                isShowRuleForm: false,
                msg: {
                    ID: 0,
                    SNO: 1,
                    Content: "",//引流人员编号
                    Mask: "",//销售人员编号
                    FlowList: [], //引流排行配置
                    SaleList: [], //销售排行配置
                },
                chooseObj: {
                    chooseType: 1, //选择类型(1-引流人员配置，2-销售人员配置)
                    EmpList: [], //已选择的员工
                }
            };
        },
        mounted() {
            this.GetRankRule()
            let $this = this
            this.MsgBus.$on('closeaaddDistributionRules', function () {
                $this.isShowRuleForm = false
            })
        },
        methods: {
            saveRankRule() {
                let flowIds = [];
                let saleIds = [];
                this.msg.FlowList.forEach(item => {
                    flowIds.push(item.EmployeeId)
                })
                this.msg.SaleList.forEach(item => {
                    saleIds.push(item.EmployeeId)
                })
                this.msg.Content = flowIds.join(',');
                this.msg.Mask = saleIds.join(',');
                this.disabledOff = true
                this.apipost('/api/Customer/SetRankRule', this.msg, res => {
                    this.disabledOff = false
                    if (res.data.resultCode == 1) {
                        this.$message.success(res.data.message)
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            },
            addCustomerOk() {
                this.isShowRuleForm = false
            },
            clickSelectPeople(type) {
                this.chooseObj.chooseType = type;
                //引流人员配置
                if (this.chooseObj.chooseType == 1) {
                    this.chooseObj.EmpList = this.msg.FlowList;
                }
                //销售人员配置
                if (this.chooseObj.chooseType == 2) {
                    this.chooseObj.EmpList = this.msg.SaleList;
                }
                this.isShowRuleForm = true;
            },
            // 获取规则详情
            GetRankRule() {
                this.apipost('/api/Customer/GetRankRule', {}, res => {
                    if (res.data.resultCode == 1) {
                        var tempData = res.data.data;
                        this.msg.ID = tempData.ID;
                        this.msg.SNO = tempData.SNO;
                        this.msg.Content = tempData.Content;
                        this.msg.Mask = tempData.Mask;
                        this.msg.FlowList = tempData.FlowList;
                        this.msg.SaleList = tempData.SaleList;
                    }
                })
            },
        }
    };
</script>