<template>
    <ele-modal v-model="visible" title="分配任务" width="500px">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="生成数量" prop="quantity">
                <el-input v-model="form.quantity" disabled />
            </el-form-item>
            <el-form-item label="指派人" prop="assignee">
                <template #label>
                    <span>
                        指派人
                        <el-tooltip
                            content="数据 角色的人 都可以选择"
                            placement="top"
                        >
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </span>
                </template>
                <el-select
                    v-model="form.assignee"
                    placeholder="请选择指派人"
                    style="width: 100%"
                >
                    <el-option label="张三" value="zhangsan" />
                    <el-option label="李四" value="lisi" />
                    <el-option label="王五" value="wangwu" />
                </el-select>
            </el-form-item>
            <el-form-item label="计划完成时间" prop="scheduledTime">
                <el-date-picker
                    v-model="form.scheduledTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { QuestionFilled } from '@element-plus/icons-vue';
    import request from '@/utils/request';
    import { ElMessage } from 'element-plus';

    const emit = defineEmits(['success']);
    const visible = ref(false);
    const formRef = ref();
    const form = reactive({
        id: null,
        quantity: 0,
        assignee: '',
        scheduledTime: ''
    });

    const rules = {
        assignee: [
            { required: true, message: '请选择指派人', trigger: 'change' }
        ],
        scheduledTime: [
            { required: true, message: '请选择计划完成时间', trigger: 'change' }
        ]
    };

    const handleOpen = (row) => {
        form.id = row.id;
        form.quantity = row.quantity || 2000; // Mock data or from row
        form.assignee = '';
        form.scheduledTime = '';
        visible.value = true;
    };

    const handleSubmit = async () => {
        await formRef.value.validate();
        // TODO: Replace with actual API endpoint
        // const res = await request.post('/priceWorkbench/task/assign', form);
        // if (res.data.code === 200) {
        ElMessage.success('分配成功');
        visible.value = false;
        emit('success');
        // }
    };

    defineExpose({ handleOpen });
</script>
