<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;
    }
    /deep/.el-radio-group{
        margin-bottom: 0 !important;
    }
    .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">选择部门/成员</el-button>
                </div>
                <div><span>已选择：{{list.length}}人</span></div>
            </div>
            <div class="dataText">
                <div class="dataText-left">
                    <template v-if="moreShow">
                        <el-tag v-for="(item,index) in list" :key="index" class="dataText_text">{{item.EmName}}
                        </el-tag>
                    </template>
                    <template v-else>
                        <el-tag v-for="(item,index) in numList" :key="index" class="dataText_text">{{item.EmName}}
                        </el-tag>
                    </template>
                </div>
                <div class="dataText-right" v-if="list.length>15">
                   <i class="icon moreText"
                :class="!moreShow?'el-icon-arrow-down':'el-icon-arrow-up'" 
                @click="moreShow=!moreShow">
                {{!moreSalesShow?'更多':'收起'}}</i>
                </div>
            </div>
            <br /><br />
            <el-button class="add-box-btn add-box-cancel" @click="saveNow" :disabled="disabledOff">立即保存</el-button>
        </div>
        <!-- 添加账号弹窗 -->
        <div v-if="addDistributionRulesShow">
            <addDistributionRules :obj="newObj" @addCustomerOk="addCustomerOk" />
        </div>
    </div>
</template>
<script>
    import addDistributionRules from "../dialogModel/addDistributionRules";
    export default {
        components: {
            addDistributionRules
        },
        data() {
            return {
                moreShow:false,
                disabledOff: false,
                newObj: {},
                numList:[],
                list: [],
                addDistributionRulesShow: false,
                tableData: [],
                msg: {
                    Content: ''
                }
            };
        },
        watch:{
            newObj:{
                handler(val, oldVal) {
                    if(val.EmpList.length>15){
                        this.numList = []
                        val.EmpList.forEach((item,x)=>{
                            if(x<15){
                                this.numList.push(item)
                            }
                        })
                    }else{
                        this.moreShow = true
                    }
                },
                deep: true,
            }
        },
        mounted() {
            this.GetConfigCuleAdmin()
            let $this = this
            this.MsgBus.$on('closeaaddDistributionRules', function () {
                $this.addDistributionRulesShow = false
            })
        },
        beforeDestroy() {
            
        },
        methods: {
            saveNow() {
                let ids = []
                this.list.forEach(item => {
                    ids.push(item.EmployeeId)
                })
                this.msg.Content = ids.join(',')
                this.disabledOff = true
                this.apipost('/api/Customer/SetConfigCuleAdmin', this.msg, res => {
                    if (res.data.resultCode == 1) {
                        this.$message.success(res.data.message)
                        this.disabledOff = false
                    } else {
                        this.$message.error(res.data.message)
                        this.disabledOff = false
                    }
                })
            },
            addCustomerOk() {
                this.addDistributionRulesShow = false
            },
            clickSelectPeople() {
                this.addDistributionRulesShow = true
            },
            // 获取线索管理详情
            GetConfigCuleAdmin() {
                this.apipost('/api/Customer/GetConfigCuleAdmin', {}, res => {
                    if (res.data.resultCode == 1) {
                        this.msg = {
                            SNO: res.data.data.SNO,
                            Content: res.data.data.Content
                        };
                        this.list = res.data.data.EmpList
                        if(res.data.data.EmpList.length>15){
                           res.data.data.EmpList.forEach((item,x)=>{
                                if(x<15){
                                    this.numList.push(item)
                                }
                            }) 
                        }else{
                            this.moreShow = true
                        }
                        this.newObj = res.data.data
                    }
                })

            },
        }
    };
</script>