<template>
    <ele-modal v-model="visible" title="处理反馈" :width="800" :footer="null">
        <div class="p-4">
            <el-form :model="form" label-width="120px">
                <el-form-item label="体验打分：">
                    <el-input
                        v-model="form.score"
                        readonly
                        style="width: 200px"
                    >
                        <template #append>分</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="反馈信息：">
                    <el-input
                        v-model="form.content"
                        type="textarea"
                        :rows="6"
                        readonly
                        resize="none"
                    />
                </el-form-item>

                <el-form-item label="反馈图片/视频：">
                    <div
                        class="flex gap-2"
                        v-if="form.images && form.images.length"
                    >
                        <el-image
                            v-for="(img, index) in form.images"
                            :key="index"
                            :src="img"
                            :preview-src-list="form.images"
                            :initial-index="index"
                            fit="cover"
                            style="
                                width: 100px;
                                height: 100px;
                                border-radius: 4px;
                            "
                        />
                    </div>
                    <div v-else class="text-gray-400">无图片/视频</div>
                </el-form-item>
            </el-form>

            <div class="flex justify-center gap-4 mt-8">
                <el-button
                    v-if="form.status != 3"
                    type="success"
                    @click="handleComplete"
                    >处理完成</el-button
                >
                <el-button
                    v-if="form.status != 3"
                    color="#000080"
                    style="color: white"
                    @click="handleFollowUp"
                    >跟进</el-button
                >
                <el-button type="info" plain @click="visible = false"
                    >关闭</el-button
                >
            </div>
        </div>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance } from 'vue';
    import { ElMessage } from 'element-plus';

    const { proxy } = getCurrentInstance();
    const visible = ref(false);
    const emit = defineEmits(['success']);

    const form = reactive({
        id: null,
        score: '',
        content: '',
        status: null,
        images: []
    });

    const handleOpen = (row) => {
        if (row) {
            form.id = row.id;
            form.score = row.score;
            form.status = row.status;
            form.content = row.description;
            form.images = row.feedbackImgList || [];
        }
        visible.value = true;
    };

    const submitCheck = (status) => {
        proxy.$http
            .post('/shop/shopSearch/searchFeedbackCheck', {
                id: form.id,
                status: status
            })
            .then(() => {
                ElMessage.success(status === 2 ? '已跟进' : '处理完成');
                visible.value = false;
                emit('success');
            });
    };

    const handleComplete = () => {
        submitCheck(3);
    };

    const handleFollowUp = () => {
        submitCheck(2);
    };

    defineExpose({
        handleOpen
    });
</script>
