<template>
    <ele-page flex-table>
        <page-search @search="reload" />

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <!-- 状态列 -->
            <template #status="{ row }">
                {{
                    row.status === 1
                        ? '待处理'
                        : row.status === 2
                          ? '已跟进'
                          : '已处理'
                }}
            </template>

            <!-- 图片/视频列 -->
            <template #media="{ row }">
                <div
                    class="flex gap-1"
                    v-if="row.feedbackImgList && row.feedbackImgList.length"
                >
                    <el-image
                        v-for="(img, idx) in row.feedbackImgList.slice(0, 2)"
                        :key="idx"
                        :src="img"
                        :preview-src-list="row.feedbackImgList"
                        :initial-index="idx"
                        preview-teleported
                        style="width: 40px; height: 40px; border-radius: 4px"
                    />
                </div>
            </template>

            <!-- 操作列 -->
            <template #action="{ row }">
                <el-button
                    link
                    type="primary"
                    @click="handleProcess(row)"
                    v-if="row.status != 3"
                    >[去处理]</el-button
                >
                <el-button link type="primary" @click="handleDetail(row)" v-else
                    >[详情]</el-button
                >
            </template>
        </common-table>

        <handle-dialog ref="handleDialogRef" @success="reload" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/page-search.vue';
    import HandleDialog from './components/handle-dialog.vue';

    defineOptions({ name: 'SearchFeedback' });

    const pageRef = ref(null);
    const handleDialogRef = ref(null);

    const pageConfig = reactive({
        fileName: '搜索反馈记录',
        cacheKey: 'searchFeedbackTable',
        rowKey: 'id',
        pageUrl: '/shop/shopSearch/searchFeedbackList'
    });

    const columns = ref([
        { label: '序号', width: 60, type: 'index', align: 'center' },
        {
            label: '状态',
            prop: 'status',
            minWidth: 100,
            slot: 'status',
            align: 'center'
        },
        {
            label: '反馈日期',
            prop: 'createTime',
            minWidth: 160,
            align: 'center'
        },
        { label: '用户ID', prop: 'userId', minWidth: 150, align: 'center' },
        { label: '用户名', prop: 'userName', minWidth: 150, align: 'center' },
        {
            label: '反馈信息',
            prop: 'description',
            minWidth: 300,
            showOverflowTooltip: true
        },
        { label: '打分', prop: 'score', minWidth: 80, align: 'center' },
        {
            label: '图片/视频',
            prop: 'feedbackImgList',
            minWidth: 120,
            slot: 'media',
            align: 'center'
        },
        {
            label: '操作',
            prop: 'action',
            minWidth: 150,
            slot: 'action',
            fixed: 'right',
            align: 'center'
        }
    ]);

    // Mock Datasource removed, using pageUrl in pageConfig

    const reload = (where) => {
        pageRef.value?.reload(where);
    };

    const handleProcess = (row) => {
        handleDialogRef.value?.handleOpen(row);
    };

    const handleDetail = (row) => {
        // 详情逻辑与处理逻辑类似，可能只是只读或者打开同一个弹窗
        handleDialogRef.value?.handleOpen(row);
    };
</script>
