<template>
    <a-modal :mask-closable="false" :title="dialogTitle" :visible="isOpen" :width="500" class="geg" centered>
        <template #footer>
            <a-button :disabled="loading" @click="onClickCancel">取消</a-button>
            <a-button :loading="loading" type="primary" @click="onClickOK">确定</a-button>
        </template>
        <div class="dialog-wrap">
            <a-form ref="formRef" :label-col="{ span: 6 }" :model="formState" :rules="rules" autocomplete="off">
                <a-form-item label="部门" name="department">
                    <a-cascader v-model:value="formState.department" :field-names="{ label: 'name', value: 'id' }" :options="departmentList" :show-search="{ filter }" placeholder="请选择部门" @change="handleChangeDepartment"> </a-cascader>
                </a-form-item>
                <a-form-item label="转办人" name="userId" required>
                    <a-select
                        v-model:value="formState.userId"
                        show-search
                        placeholder="请选择转办人"
                        :default-active-first-option="false"
                        :show-arrow="false"
                        :filter-option="false"
                        :not-found-content="null"
                        :options="userList"
                        @search="handleSearchUser"
                    >
                    </a-select>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

<script setup>
    import { reactive, ref, onMounted } from 'vue';
    import { getDepartmentTree } from '/@/api/system/department';
    import { getUserPageList } from '/@/api/system/user';

    import { debounce } from 'lodash-es';

    const dialogTitle = ref('转办');
    const isOpen = ref(false);
    const loading = ref(false);
    const userList = ref([]);
    const departmentList = ref([]);
    const formRef = ref();
    const formState = reactive({
        department: undefined, // 部门
        userId: undefined
    });

    const rules = {
        userId: [{ required: true, message: '请选择转办人', trigger: 'change' }]
    };
    let _taskId = '';
    let _callback = null;

    async function toggleDialog({ isClose, taskId, callback }) {
        if (isClose) {
            isOpen.value = false;
            loading.value = false;
            return;
        }
        _taskId = taskId;
        isOpen.value = true;
        _callback = callback;
        getUserList();
        getDepartmentTree().then((res) => {
            departmentList.value = res || [];
        });
    }

    async function getUserList(params = {}) {
        let userRes = await getUserPageList(params);
        userList.value = (userRes.list || []).map((user) => {
            return {
                value: user.id,
                label: user.name + (user.code ? ` - ${user.code}` : '')
            };
        });
    }

    function handleChangeDepartment(value) {
        getUserList({
            departmentId: value[value.length - 1]
        });
    }

    const handleSearchUser = debounce((value) => {
        const departmentId = formState.department?.length > 0 ? formState.department[formState.department.length - 1] : '';
        getUserList({
            departmentId,
            keyword: value
        });
    }, 500);

    function onClickCancel() {
        isOpen.value = false;
    }

    function onClickOK() {
        if (_callback && typeof _callback === 'function') {
            _callback({
                taskId: _taskId,
                userId: formState.userId
            });
        } else {
            isOpen.value = false;
        }
    }

    function validate() {
        return formRef.value.validate();
    }

    function startLoading() {
        loading.value = true;
    }

    function stopLoading() {
        loading.value = false;
    }

    defineExpose({
        toggleDialog,
        validate,
        startLoading,
        stopLoading
    });
</script>

<style lang="less" scoped>
    .dialog-wrap {
        padding: 10px 15px 0 0;
    }
</style>
