<template>
    <div class="page">
        <div class="q-pa-md q-gutter-sm navbar">
            <q-breadcrumbs>
                <q-breadcrumbs-el label="返回" icon="navigate_before" @click="jumpBeforePage" />
                <q-breadcrumbs-el label="编辑" />
            </q-breadcrumbs>
            <q-btn color="primary" label="完成" @click="setCustomerClueRuleInfo" />
        </div>
        <div class="container">
            <div class="content-block">
                <div class="fission-title">选择待分配客户</div>
                <div class="fission-subtitle">当待分配客户符合以下条件时</div>
                <requestGroup
                    v-model:addCondition="editMsg.RuleSelectType"
                    :defaultData="defaultConditionList"
                    ref="condition"
                    @change="getCondition"
                />
            </div>
            <div class="content-block mt20">
                <div class="fission-title">分配给以下部门/成员</div>
                <div class="fission-subtitle">适用部门/成员</div>
                <div class="departs flex-between-center">
                    <q-btn outline color="primary" label="选择部门/成员" @click="changeDialog" />
                    <div class="flex align-center depart-title">
                        <span>已选：{{ peopleNum }}人</span>
                        <div class="per"></div>
                        <span>有效账号数（已启用探马账号人数）：0人</span>
                    </div>
                </div>
                <div class="staff-box mt20">
                    <q-chip
                        color="primary"
                        v-for="(item,index) in editMsg.DeptList"
                        :key="index"
                        text-color="white"
                        icon="work"
                        :label="item.DeptName"
                    ></q-chip>
                    <q-chip
                        color="primary"
                        v-for="(item,index) in editMsg.EmpList"
                        :key="index"
                        text-color="white"
                        icon="person"
                        :label="item.EmployeeName"
                    ></q-chip>
                </div>
            </div>
            <div class="content-block mt20">
                <div class="fission-title">设置分配规则</div>
                <div class="fission-subtitle flex align-center">
                    选择分配规则：
                    <div class="q-gutter-sm">
                        <q-radio v-model="editMsg.RuleAllotWay" :val="1" label="顺序分配" />
                        <q-radio v-model="editMsg.RuleAllotWay" :val="2" label="随机分配" />
                    </div>
                </div>
            </div>
        </div>
        <departmentStaff
            v-model="showDialog"
            :defaultArray="defaultArray"
            nodeKey="newId"
            labelKey="DeptName"
            childrenKey="ChildList"
            strategy="leaf"
            :treeData="dataTree"
            @select="getdpt"
            @getNum="getNum"
        />
    </div>
</template>
<script lang="ts">
import {
    defineComponent,
    toRefs,
    onMounted
} from 'vue'
import requestGroup from '@/components/customer/request-group.vue'
import departmentStaff from '@/components/common/departmentStaff.vue'
import editRuleModule from '@/module/editor/editRuleModule'
export default defineComponent({
    components: {
        requestGroup,
        departmentStaff
    },
    setup() {
        let {
            jumpBeforePage,
            changeDialog,
            msg,
            data,
            condition,
            getDetail,
            getEmployeeData,
            setCustomerClueRuleInfo,
            getCondition,
            getdpt,
            getNum,
        } = editRuleModule();
        onMounted(() => {
            if (msg().RuleId > 0) {
                data.editMsg.Id = msg().RuleId
                getDetail()
            } else {
                data.editMsg.DeptList = []
                data.editMsg.EmpList = []
                data.editMsg.ConditionList = []
                data.editMsg.RuleSelectType = 1
                data.editMsg.RuleAllotWay = 1
                data.defaultArray = []
            }
            getEmployeeData()
        })
        return {
            jumpBeforePage,
            changeDialog,
            condition,
            ...toRefs(data),
            setCustomerClueRuleInfo,
            getCondition,
            getdpt,
            getNum
        }
    }

})

</script>
<style lang="scss" scoped>
.page {
    height: 100vh;
    background-color: #f4f4f6;

    .mt20 {
        margin-top: 20px;
    }
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding-left: 24px;
    font-size: 16px;
    border-bottom: 1px solid #d7d7d7;
    background-color: #fff;
    margin-bottom: 50px;
}

.container {
    margin: 0 auto;
    width: 1087px;

    .content-block {
        padding: 30px 20px;
        border-radius: 8px;
        background-color: #fff;

        .fission-title {
            color: #000;
            font-size: 18px;
            font-weight: 600;
        }

        .fission-subtitle {
            color: #000;
            font-weight: bold;
            margin-top: 15px;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .departs {
            .depart-title {
                font-size: 14px;

                .per {
                    height: 16px;
                    width: 2px;
                    display: inline-block;
                    margin: 0 15px;
                    background: #d7d7d7;
                }
            }
        }
    }
}
</style>
