<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="完成" />
        </div>
        <div class="container">
            <div class="content-block">
                <div class="fission-title">选择待分配客户</div>
                <div class="fission-subtitle">当待分配客户符合以下条件时</div>
                <requestGroup />
            </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>已选：0人</span>
                        <div class="per"></div>
                        <span>有效账号数（已启用探马账号人数）：0人</span>
                    </div>
                </div>
                <div class="staff-box mt20">
                    <!-- <q-chip color="primary" text-color="white" icon="work" label="部门"></q-chip>
                    <q-chip color="accent" text-color="white" icon="person" label="员工"></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="data.editMsg.RuleAllotWay" :val="1" label="顺序分配" />
                        <q-radio v-model="data.editMsg.RuleAllotWay" :val="2" label="随机分配" />
                    </div>
                </div>
            </div>
        </div>
        <departmentStaff
            v-model="data.showDialog"
            v-model:defaultArray="data.defaultArray"
            nodeKey="newId"
            labelKey="DeptName"
            childrenKey="ChildList"
            strategy='leaf'
            :treeData="data.dataTree"
        />
    </div>
</template>
<script lang="ts">
import {
    defineComponent,
    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,
            getDetail,
            getEmployeeData
        } = editRuleModule();
        onMounted(() => {

            if (msg().RuleId > 0) {
                console.log('getDetail', msg())
                getDetail()
            }
            getEmployeeData()
        })
        return {
            jumpBeforePage,
            changeDialog,
            data,
        }
    }

})

</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>
