<template>
    <common-table
        ref="pageRef"
        :pageConfig="pageConfig"
        :columns="columns"
        :tools="false"
        :body-style="{ padding: 0 }"
    >
        <template #status="{ row }">
            <dict-data
                code="feedback_status"
                type="tag"
                :model-value="row.status"
            />
        </template>
        <template #action="{ row }">
            <div>
                <el-button
                    type="primary"
                    link
                    @click="handleUpdate(row, 'detail')"
                >
                    查看详情
                </el-button>
                <el-button
                    type="primary"
                    link
                    @click="handleUpdate(row, 'deal')"
                >
                    去处理
                </el-button>
            </div>
        </template>
    </common-table>
    <deal-fallback ref="dealFallbackRef" @done="reload()" />
</template>

<script setup>
    import { ref, reactive, watch } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import dealFallback from '@/views/optimization/fallback/components/deal-fallback.vue';
    import { useDictData } from '@/utils/use-dict-data';

    const props = defineProps({
        userId: {
            type: [String, Number],
            required: true
        }
    });

    defineOptions({ name: 'FallbackInfoList' });
    const [useStatusDicts] = useDictData(['sys_normal_disable']);

    /** 表格列配置 */
    const columns = ref([
        {
            label: '内容',
            prop: 'description',
            align: 'center',
            minWidth: 200
        },
        { label: '分类', prop: 'reason', align: 'center', minWidth: 160 },

        {
            label: '状态',
            prop: 'useStatus',
            align: 'center',
            slot: 'status'
        },
        { label: '时间', prop: 'createTime', align: 'center', width: 180 },
        {
            columnKey: 'action',
            label: '操作',
            width: 160,
            align: 'center',
            slot: 'action'
        }
    ]);

    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/sys/suggestionLog/pagelist',
        exportUrl: '/sys/suggestionLog/export',
        fileName: '意见反馈',
        cacheKey: 'fallbackInfoTable',
        params: {
            userId: props.userId
        }
    });

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }

    //去处理
    const dealFallbackRef = ref(null);
    function handleUpdate(row, type) {
        dealFallbackRef.value?.handleOpen(row, type);
    }
    //监听用户id
    watch(
        () => props.userId,
        (newVal) => {
            if (newVal) {
                reload();
            }
        }
    );
</script>
