<template>
    <ele-modal
        :title="title"
        v-model="visible"
        width="1100px"
        @closed="handleClose"
        :close-on-click-modal="false"
        destroy-on-close
        :body-style="{ padding: '20px' }"
    >
        <el-row :gutter="20">
            <!-- Left Column: Form -->
            <el-col :span="14" class="border-r border-gray-200 pr-5">
                <ProForm
                    ref="proFormRef"
                    :model="form"
                    :rules="rules"
                    :items="formItems"
                    label-width="100px"
                    :footer="false"
                    @updateValue="(prop, val) => (form[prop] = val)"
                >
                    <template #imageUpload="{ proForm }">
                        <ImageUpload
                            v-model="proForm.model.fileList"
                            :limit="5"
                        />
                    </template>
                </ProForm>
            </el-col>

            <!-- Right Column: Info & Timeline -->
            <el-col :span="10" class="pl-2">
                <TrackingTimeline :logs="logs" />
            </el-col>
        </el-row>

        <template #footer>
            <div class="flex justify-center space-x-4">
                <el-button
                    type="warning"
                    plain
                    @click="handleFollowUp"
                    v-if="form.id"
                    >待跟进</el-button
                >
                <el-button
                    type="success"
                    plain
                    @click="handleFeedback"
                    v-if="form.id"
                    >反馈</el-button
                >
                <el-button @click="handleClose">取消</el-button>
                <el-button
                    type="primary"
                    @click="handleSubmit"
                    :loading="loading"
                    >保存</el-button
                >
            </div>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, computed, watch, getCurrentInstance } from 'vue';
    import { ElMessage } from 'element-plus';
    import ImageUpload from '@/components/ImageUpload/index.vue';
    import ProForm from '@/components/ProForm/index.vue';
    import TrackingTimeline from './tracking-timeline.vue';
    import { pageUsers } from '@/api/system/user';

    const { proxy } = getCurrentInstance();

    const emit = defineEmits(['submit', 'success']);

    const visible = ref(false);
    const title = ref('工单信息');
    const loading = ref(false);
    // Use proFormRef instead of formRef
    const proFormRef = ref(null);

    const form = reactive({
        id: undefined,
        taskType: undefined,
        handleUserId: [], // Changed from undefined to []
        detail: '',
        fileList: '',
        carrierId: undefined,
        waybillCode: '',
        inspectionStatus: undefined,
        orderNo: '',
        type: 1 // 1-卖书 2-收书
    });

    const logs = ref([]);
    const userList = ref([]);
    const userLoading = ref(false);

    const rules = {
        taskType: [
            { required: true, message: '请选择任务类型', trigger: 'change' }
        ],
        handleUserId: [
            { required: true, message: '请选择指派人', trigger: 'change' }
        ],
        detail: [{ required: true, message: '请输入详情', trigger: 'blur' }],
        inspectionStatus: [
            { required: true, message: '请选择验货状态', trigger: 'change' }
        ]
    };

    // Form Items Configuration
    const formItems = computed(() => [
        {
            label: '任务类型',
            prop: 'taskType',
            type: 'dictSelect',
            props: {
                class: 'w-full',
                placeholder: '请选择任务类型',
                code: form.type === 1 ? 'sell_task_type' : 'task_type'
            }
        },
        {
            label: '指派给',
            prop: 'handleUserId',
            type: 'select',
            options: userList.value.map((user) => ({
                label: user.nickName || user.userName,
                value: user.userId
            })),
            props: {
                class: 'w-full',
                placeholder: '请选择',
                filterable: true,
                remote: true,
                multiple: true, // Enable multiple selection
                remoteMethod: searchUsers,
                loading: userLoading.value
            }
        },
        {
            label: '任务详情',
            prop: 'detail',
            type: 'textarea',
            props: { rows: 4, placeholder: '请输入' }
        },
        {
            label: '图片/附件',
            prop: 'fileList',
            type: 'imageUpload',
            itemType: 'view' // Triggers the slot mechanism
        },
        {
            label: '承运商',
            prop: 'carrierId',
            type: 'dictSelect',
            props: {
                class: 'w-full',
                placeholder: '请选择发货快递',
                filterable: true,
                code: 'shop_order_express_name'
            }
        },
        {
            label: '发出快递单号',
            prop: 'waybillCode',
            type: 'input',
            props: { placeholder: '请输入' }
        },
        {
            label: '验货状态',
            prop: 'inspectionStatus',
            type: 'dictSelect',
            props: {
                class: 'w-full',
                placeholder: '请选择验货状态',
                code: 'inspection_status'
            }
        },
        {
            label: '订单号',
            prop: 'orderNo',
            type: 'input',
            props: { placeholder: '请输入' }
        }
    ]);

    // 搜索用户
    const searchUsers = async (query = '') => {
        userLoading.value = true;
        try {
            const res = await pageUsers({
                pageNum: 1,
                pageSize: 50,
                nickName: query
            });
            if (res.code === 200) {
                userList.value = res.rows || res.data;
            }
        } catch (e) {
            console.error(e);
        } finally {
            userLoading.value = false;
        }
    };

    const handleOpen = async (data = {}) => {
        visible.value = true;
        title.value = data.id ? '编辑工单' : '新增工单';

        // Initialize lists
        if (userList.value.length === 0) searchUsers();

        // Reset form
        Object.assign(form, {
            id: undefined,
            taskType: undefined,
            handleUserId: [], // Reset to empty array
            detail: '',
            fileList: '',
            carrierId: undefined,
            waybillCode: '',
            inspectionStatus: undefined,
            orderNo: '',
            type: 1 // 1-卖书 2-收书
        });
        logs.value = [];

        if (data.id) {
            loading.value = true;
            try {
                // Fetch full details
                const res = await proxy.$http.get(
                    '/workorder/workorderinfo/getInfo/' + data.id
                );
                if (res.data && res.data.code === 200) {
                    const detail = res.data.data;

                    // Map backend data to form
                    form.id = detail.id;
                    form.taskType = String(detail.taskType); // Convert to number
                    form.inspectionStatus = String(detail.inspectionStatus); // Convert to number
                    form.waybillCode = detail.waybillCode;

                    // Map mismatched fields
                    form.detail = detail.deatil; // deatil -> detail
                    form.orderNo = detail.orderId; // orderId -> orderNo
                    form.carrierId = detail.expressType
                        ? String(detail.expressType)
                        : undefined; // expressType -> carrierId (String for dict match)

                    // handleUsers array of objects -> array of IDs
                    if (detail.handleUsers && detail.handleUsers.length > 0) {
                        form.handleUserId = detail.handleUsers.map((user) => {
                            // Ensure user is in list for display
                            if (typeof user === 'object' && user.userId) {
                                if (
                                    !userList.value.find(
                                        (u) => u.userId === user.userId
                                    )
                                ) {
                                    userList.value.push(user);
                                }
                                return user.userId;
                            }
                            return user;
                        });
                    } else {
                        form.handleUserId = [];
                    }

                    // imgInfo object -> fileList JSON string
                    if (
                        detail.imgInfo &&
                        detail.imgInfo.imgUrlList &&
                        Array.isArray(detail.imgInfo.imgUrlList)
                    ) {
                        form.fileList = JSON.stringify(
                            detail.imgInfo.imgUrlList
                        );
                    } else {
                        form.fileList = '';
                    }

                    // Logs
                    if (detail.changeRecords) {
                        logs.value = detail.changeRecords.map((item) => ({
                            createTime: item.createTime,
                            createName: item.createUserName,
                            content: item.remark
                        }));
                    } else {
                        logs.value = [];
                    }
                } else {
                    // Fallback mapping if API fails (unlikely to work well but safe)
                    Object.assign(form, data);
                }
            } catch (e) {
                console.error(e);
                Object.assign(form, data);
            } finally {
                loading.value = false;
            }
        }
    };

    const handleClose = () => {
        visible.value = false;
        // Use proFormRef to reset
        proFormRef.value?.resetFields();
    };

    const handleSubmit = () => {
        // Use proFormRef to validate
        proFormRef.value?.validate((valid) => {
            if (valid) {
                loading.value = true;

                // Map form data to API structure
                const submitData = {
                    id: form.id,
                    taskType: form.taskType,
                    inspectionStatus: form.inspectionStatus,
                    waybillCode: form.waybillCode,

                    deatil: form.detail, // detail -> deatil
                    orderId: form.orderNo, // orderNo -> orderId
                    expressType: form.carrierId, // carrierId -> expressType
                    type: form.type, // Fixed: 1-Sell Book

                    // handleUserId is already an array of IDs
                    handleUsers: Array.isArray(form.handleUserId)
                        ? form.handleUserId
                        : form.handleUserId
                          ? [form.handleUserId]
                          : [],

                    // fileList string -> imgInfo array
                    imgInfo: form.fileList ? JSON.parse(form.fileList) : []
                };

                const url = form.id
                    ? '/workorder/workorderinfo/update'
                    : '/workorder/workorderinfo/add';
                proxy.$http
                    .post(url, submitData)
                    .then((res) => {
                        if (res.data.code === 200) {
                            ElMessage.success(
                                form.id ? '修改成功' : '新增成功'
                            );
                            emit('success');
                            handleClose();
                        } else {
                            ElMessage.error(res.data.msg || '操作失败');
                        }
                    })
                    .catch((e) => {
                        console.error(e);
                    })
                    .finally(() => {
                        loading.value = false;
                    });
            }
        });
    };

    const handleFollowUp = () => {
        if (!form.id) return;

        loading.value = true;
        const submitData = {
            id: form.id,
            updateType: 1, // 待跟进
            deatil: form.detail || '',
            handleUsers: Array.isArray(form.handleUserId)
                ? form.handleUserId
                : form.handleUserId
                  ? [form.handleUserId]
                  : [],
            imgInfo: form.fileList ? JSON.parse(form.fileList) : []
        };

        proxy.$http
            .post('/workorder/workorderinfo/update', submitData)
            .then((res) => {
                if (res.data.code === 200) {
                    ElMessage.success('已设置为待跟进');
                    emit('success');
                    handleClose();
                } else {
                    ElMessage.error(res.data.msg || '操作失败');
                }
            })
            .catch((e) => {
                console.error(e);
                ElMessage.error('操作失败');
            })
            .finally(() => {
                loading.value = false;
            });
    };

    const handleFeedback = () => {
        if (!form.id) return;

        loading.value = true;
        const submitData = {
            id: form.id,
            updateType: 2, // 反馈
            deatil: form.detail || '',
            handleUsers: Array.isArray(form.handleUserId)
                ? form.handleUserId
                : form.handleUserId
                  ? [form.handleUserId]
                  : [],
            imgInfo: form.fileList ? JSON.parse(form.fileList) : []
        };

        proxy.$http
            .post('/workorder/workorderinfo/update', submitData)
            .then((res) => {
                if (res.data.code === 200) {
                    ElMessage.success('已提交反馈');
                    emit('success');
                    handleClose();
                } else {
                    ElMessage.error(res.data.msg || '操作失败');
                }
            })
            .catch((e) => {
                console.error(e);
                ElMessage.error('操作失败');
            })
            .finally(() => {
                loading.value = false;
            });
    };

    defineExpose({ handleOpen });
</script>
