<template>
    <ele-page flex-table>
        <page-search @search="reload" />
        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #toolbar>
                <el-button
                    type="success"
                    plain
                    v-permission="'optimization:fallback:export'"
                    @click="handleExportExcel"
                    :icon="DownloadOutlined"
                >
                    导出EXCEL
                </el-button>
            </template>
            <template #status="{ row }">
                <dict-data
                    code="feedback_status"
                    type="tag"
                    :model-value="row.status"
                />
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        v-permission="'optimization:fallback:detail'"
                        @click="handleUpdate(row, 'detail')"
                    >
                        [详情]
                    </el-button>
                    <el-button
                        type="primary"
                        link
                        v-if="row.status != 3"
                        v-permission="'optimization:fallback:deal'"
                        @click="handleUpdate(row, 'deal')"
                    >
                        去处理
                    </el-button>
                </div>
            </template>
        </common-table>
        <deal-fallback ref="dealFallbackRef" @done="reload()" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { DownloadOutlined } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import dealFallback from '@/views/optimization/fallback/components/deal-fallback.vue';
    import pageSearch from '@/views/optimization/fallback/components/page-search.vue';

    defineOptions({ name: 'FallbackList' });

    /** 表格列配置 */
    const columns = ref([
        { type: 'index', label: '序号', width: 60, align: 'center' },
        { label: '状态', prop: 'status', align: 'center', slot: 'status' },
        { label: '用户昵称', prop: 'nickName', align: 'center' },
        { label: '用户ID', prop: 'userId', align: 'center' },
        { label: '联系方式', prop: 'mobile', align: 'center' },
        { label: '意见类型', prop: 'reason', align: 'center', minWidth: 150 },
        { label: '反馈时间', prop: 'createTime', align: 'center', width: 180 },
        {
            label: '意见描述',
            prop: 'description',
            align: 'center',
            minWidth: 200
        },
        {
            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: 'fallbackTable'
    });

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

    //导出excel
    function handleExportExcel() {
        pageRef.value?.exportData('意见反馈');
    }

    //去处理
    const dealFallbackRef = ref(null);
    function handleUpdate(row, type) {
        dealFallbackRef.value?.handleOpen(row, type);
    }
</script>
