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

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <div class="flex gap-2">
                    <el-button type="primary" @click="handleImport"
                        >导入</el-button
                    >
                    <el-button type="success" @click="handleExport"
                        >导出</el-button
                    >
                    <el-button type="primary" @click="handleAdd"
                        >添加图书</el-button
                    >
                </div>
            </template>

            <template #platform="{ row }">
                <div class="flex flex-wrap gap-2">
                    <template
                        v-for="item in Array.isArray(row.platformList)
                            ? row.platformList
                            : row.platformList
                              ? row.platformList.split(',')
                              : []"
                        :key="item"
                    >
                        <span
                            class="platform-tag"
                            :style="getPlatformStyle(item)"
                            >{{ item }}</span
                        >
                    </template>
                </div>
            </template>

            <!-- 操作列 -->
            <template #action="{ row }">
                <el-button link type="primary" @click="handleEdit(row)"
                    >[编辑]</el-button
                >
                <el-button link type="danger" @click="handleDelete(row)"
                    >[删除]</el-button
                >
            </template>
        </common-table>

        <add-dialog ref="addDialogRef" @success="reload" />
        <import-dialog v-model="importVisible" @done="reload" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/page-search.vue';
    import AddDialog from './components/add-dialog.vue';
    import ImportDialog from './components/import-dialog.vue';

    defineOptions({ name: 'HighComplaintBooks' });

    const pageRef = ref(null);
    const addDialogRef = ref(null);
    const importVisible = ref(false);

    const pageConfig = reactive({
        fileName: '易投诉书单',
        cacheKey: 'highComplaintBooksTable',
        rowKey: 'id',
        pageUrl: '/shop/complaintBook/pagelist',
        exportUrl: '/shop/complaintBook/export'
    });

    const columns = ref([
        { label: 'ISBN', prop: 'isbn', minWidth: 100, align: 'center' },
        { label: '书名', prop: 'bookName', minWidth: 180 },
        {
            label: '易投诉平台',
            prop: 'platformList',
            minWidth: 220,
            slot: 'platform'
        },
        { label: '投诉原因', prop: 'reason', minWidth: 120 },
        { label: '操作员', prop: 'createName', width: 100, align: 'center' },
        { label: '添加日期', prop: 'createTime', width: 160, align: 'center' },
        {
            label: '操作',
            prop: 'action',
            width: 150,
            slot: 'action',
            fixed: 'right',
            align: 'center'
        }
    ]);

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

    const handleAdd = () => {
        addDialogRef.value?.handleOpen();
    };

    const handleEdit = (row) => {
        addDialogRef.value?.handleOpen(row);
    };

    const handleDelete = (row) => {
        ElMessageBox.confirm('确定要删除该条记录吗？', '提示', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
        })
            .then(() => {
                ElMessage.success('删除成功');
                reload();
            })
            .catch(() => {});
    };

    const handleImport = () => {
        importVisible.value = true;
    };

    const handleExport = () => {
        pageRef.value?.exportData();
    };

    const getPlatformStyle = (platform) => {
        const styleMap = {
            拼多多: { backgroundColor: '#FF0000', color: '#FFFFFF' },
            淘宝: { backgroundColor: '#E6A23C', color: '#FFFFFF' },
            孔网: { backgroundColor: '#B22222', color: '#FFFFFF' },
            小程序: { backgroundColor: '#4CAF50', color: '#FFFFFF' }
        };
        return (
            styleMap[platform] || {
                backgroundColor: '#909399',
                color: '#FFFFFF'
            }
        );
    };
</script>

<style scoped>
    .platform-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 10px;
        border-radius: 4px;
        font-size: 13px;
        line-height: 22px;
        white-space: nowrap;
    }
</style>
