<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;
    }
    /deep/.el-radio-group{
        margin-bottom: 0 !important;
    }
</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">
                <el-tag v-for="(item,index) in list" :key="index" class="dataText_text">{{item.EmName}}
                </el-tag>
            </div>
            <h1 class="distributionRules_title">设置分配规则</h1>
            <div class="select-radio">
                <span>选择设置分配：</span>
                <el-radio-group v-model="msg.SNO">
                    <el-radio v-for="(item,index) in radioList" :key="index" :label="item.id">{{item.name}}</el-radio>
                </el-radio-group>
            </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 {
                disabledOff: false,
                newObj: {},
                radioList: [{
                        name: '顺序分配',
                        id: 1
                    },
                    {
                        name: '随机分配',
                        id: 2
                    },
                ],
                list: [],
                addDistributionRulesShow: false,
                loading: false,
                tableData: [],
                msg: {
                    SNO: 0,
                    Content: ''
                }
            };
        },
        mounted() {
            this.GetCustomerAllotRule()
            let $this = this
            this.MsgBus.$on('closeaaddDistributionRules', function () {
                $this.addDistributionRulesShow = false
            })
        },
        beforeDestroy() {
            this.MsgBus.$off('sceneSave');
            this.MsgBus.$off('editScene');
        },
        methods: {
            saveNow() {
                let ids = []
                this.list.forEach(item => {
                    ids.push(item.EmployeeId)
                })
                this.msg.Content = ids.join(',')
                this.disabledOff = true
                this.apipost('/api/Customer/SetCustomerAllotRule', 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
            },
            // 获取规则详情
            GetCustomerAllotRule() {
                this.apipost('/api/Customer/GetCustomerAllotRule', {}, res => {
                    if (res.data.resultCode == 1) {
                        this.msg = {
                            SNO: res.data.data.SNO,
                            Content: res.data.data.Content
                        };
                        this.list = res.data.data.EmpList
                        this.newObj = res.data.data
                    }
                })

            },
        }
    };
</script>