<!-- 分配线索 -->
<template>
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="850px">
        <el-form ref="formRef" :model="form" label-width="100px">
            <el-form-item label="选择人员：" prop="ownerBy" :rules="{ required: true, message: '请选择人员', trigger: 'change' }">
                <SelectUser v-model="form.ownerBy"></SelectUser>
            </el-form-item>
            <el-form-item label="备注信息：" prop="remark">
                <el-input
                    v-model="form.remark"
                    type="textarea"
                    :rows="4"
                    :maxlength="300"
                    show-word-limit
                    resize="none"
                    placeholder="请输入备注信息"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
    import { AxiosResponse } from 'axios'

    const emits = defineEmits(['refresh'])

    const dialog = reactive({
        title: '',
        visible: false
    })
    const formRef = ref<ElFormInstance>()
    const buttonLoading = ref(false)

    const form = reactive({
        ownerBy: '',
        remark: ''
    })

    const queryParams = ref()
    const open = (params: any) => {
        formRef.value?.resetFields();
        dialog.title = '分配' + params.typeName
        queryParams.value = params
        dialog.visible = true
    }

    const submitForm = () => {
        formRef.value?.validate(async (valid: boolean) => {
            if (valid) {
                let params = Object.assign(form, queryParams.value.query)
                queryParams.value.handleFn(params).then((res: AxiosResponse) => {
                    if(res.success) {
                        ElMessage.success('分配成功')
                        dialog.visible = false
                        emits('refresh')
                    }
                })
            }
        })
    }

    const cancel = () => {
        dialog.visible = false
    }

    defineExpose({
        open
    })
</script>

<style lang="scss" scoped>
    .el-form-item{
        :deep(.el-row) {
            width: 100%;
        }
    }
</style>
