<!-- 搜索表单 -->
<template>
    <el-dialog
        v-model="visible"
        :title="type === 'detail' ? '反馈详情' : '处理反馈'"
        width="600px"
    >
        <el-form ref="formRef" :model="form" label-width="100px">
            <el-form-item label="联系方式">
                <el-input v-model="form.mobile" :disabled="type === 'detail'" />
            </el-form-item>
            <el-form-item label="意见描述">
                <el-input
                    v-model="form.description"
                    type="textarea"
                    :rows="4"
                    :disabled="type === 'detail'"
                />
            </el-form-item>
            <el-form-item label="反馈图片">
                <div class="image-container">
                    <el-image
                        v-for="(img, index) in form.images"
                        :key="index"
                        :src="img"
                        style="
                            width: 120px;
                            height: 120px;
                            border-radius: 4px;
                            margin-right: 10px;
                            margin-bottom: 10px;
                            cursor: pointer;
                        "
                        fit="cover"
                        :preview-src-list="form.images"
                        :initial-index="index"
                    />
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <template v-if="type === 'deal' && form.status != 3">
                    <el-button type="primary" @click="handleProcessing"
                        >已反馈</el-button
                    >
                    <el-button type="success" @click="handleFinish"
                        >已处理</el-button
                    >
                </template>
            </span>
        </template>
    </el-dialog>
</template>

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

    const emit = defineEmits(['done']);

    const visible = ref(false);
    const type = ref('');
    const form = ref({
        id: '',
        mobile: '',
        description: '',
        images: [],
        status: 1
    });

    // 打开弹窗
    function handleOpen(data, dialogType) {
        if (data && data.id) {
            type.value = dialogType;
            form.value = data;
            visible.value = true;
            // 获取反馈详情
            getFallbackDetail();
        }
    }
    //获取反馈详情
    async function getFallbackDetail() {
        request
            .get(`/sys/suggestionLog/getInfo/${form.value.id}`)
            .then((res) => {
                if (res.data.code === 200) {
                    form.value = res.data.data;
                    // 确保 image 是数组
                    if (
                        form.value.images &&
                        !Array.isArray(form.value.images)
                    ) {
                        form.value.images = [form.value.images];
                    }
                } else {
                    ElMessage.error(res.data.msg);
                }
            });
    }

    // 处理中
    async function handleProcessing() {
        try {
            await request.post(
                `/sys/suggestionLog/processing/${form.value.id}`
            );
            ElMessage.success('操作成功');
            visible.value = false;
            emit('done');
        } catch (error) {
            console.error(error);
        }
    }

    // 已处理
    async function handleFinish() {
        try {
            await request.post(`/sys/suggestionLog/finish/${form.value.id}`);
            ElMessage.success('操作成功');
            visible.value = false;
            emit('done');
        } catch (error) {
            console.error(error);
        }
    }

    defineExpose({ handleOpen });
</script>

<style scoped>
    .dialog-footer {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .image-container {
        display: flex;
        flex-wrap: wrap;
    }
</style>
