<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;
        justify-content: space-between;
        padding: 10px 0;
    }
    .dataText-left{
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0;
        align-items: center;
    }
    .dataText-right{
        flex-shrink: 0;
    }
    .dataText_text {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .select-radio {
        display: flex;
        align-items: center;
    }
    .moreText{
        display: block;
        color: #409EFF;
        font-size: 14px;
        cursor: pointer;
        margin-top: 20px;
    }
</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">
                <div class="dataText-left">
                    <template v-if="moreSalesShow">
                        <el-tag v-for="(item,index) in msg.FlowList" :key="index" class="dataText_text">{{item.EmName}}
                        </el-tag>
                    </template>
                    <template v-else>
                        <el-tag v-for="(item,index) in FlowList" :key="index" class="dataText_text">{{item.EmName}}
                        </el-tag>
                    </template>
                </div>
                <div class="dataText-right" v-if="msg.FlowList.length>23">
                   <i class="icon moreText"
                :class="!moreSalesShow?'el-icon-arrow-down':'el-icon-arrow-up'" 
                @click="moreSalesShow=!moreSalesShow">
                {{!moreSalesShow?'更多':'收起'}}</i> 
                </div>
                
            </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">
                <div class="dataText-left">
                    <template v-if="moreDrainageShow">
                        <el-tag v-for="(item,index) in msg.SaleList" :key="index" class="dataText_text">{{item.EmName}}
                        </el-tag>
                    </template>
                    <template v-else>
                        <el-tag v-for="(item,index) in SaleList" :key="index" class="dataText_text">{{item.EmName}}
                        </el-tag>
                    </template>
                </div>
                <div class="dataText-right" v-if="msg.SaleList.length>23">
                   <i class="icon moreText"
                :class="!moreDrainageShow?'el-icon-arrow-down':'el-icon-arrow-up'" 
                @click="moreDrainageShow=!moreDrainageShow">{{!moreDrainageShow?'更多':'收起'}}</i> 
                </div>
            </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 {
                moreDrainageShow:false,
                moreSalesShow:false,
                disabledOff: false,
                isShowRuleForm: false,
                SaleList:[],
                FlowList:[],
                msg: {
                    ID: 0,
                    SNO: 1,
                    Content: "",//引流人员编号
                    Mask: "",//销售人员编号
                    FlowList: [], //引流排行配置
                    SaleList: [], //销售排行配置
                },
                chooseObj: {
                    chooseType: 1, //选择类型(1-引流人员配置，2-销售人员配置)
                    EmpList: [], //已选择的员工
                }
            };
        },
        watch:{
            chooseObj:{
                handler(val, oldVal) {
                    if(this.chooseObj.chooseType==1){
                        if(val.EmpList.length>23){
                            this.FlowList = []
                            val.EmpList.forEach((item,x)=>{
                                if(x<23){
                                    this.FlowList.push(item)
                                }
                            })
                        }else{
                            this.moreSalesShow = true
                        }
                    }else{
                        if(val.EmpList.length>23){
                            this.SaleList = []
                            val.EmpList.forEach((item,x)=>{
                                if(x<23){
                                    this.SaleList.push(item)
                                }
                            })
                        }else{
                            this.moreDrainageShow = true
                        }
                    }
                },
                deep: true,
            }
        },
        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)
                        this.GetRankRule()
                    } 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;
                        if(tempData.FlowList.length>23){
                            tempData.FlowList.forEach((item,x)=>{
                                if(x<23){
                                    this.FlowList.push(item)
                                }
                            })
                        }else{
                            this.moreSalesShow = true
                        }
                        this.msg.SaleList = tempData.SaleList;
                        if(tempData.SaleList.length>23){
                            tempData.SaleList.forEach((item,x)=>{
                                if(x<23){
                                    this.SaleList.push(item)
                                }
                            })
                        }else{
                            this.moreDrainageShow = true
                        }
                    }
                })
            },
        }
    };
</script>