<template>
    <ele-page flex-table :bodyStyle="{ padding: 0 }">
        <common-table
            ref="tableRef"
            :columns="columns"
            :page-config="pageConfig"
            @selection-change="handleSelectionChange"
            :bodyStyle="{ padding: '0' }"
            flex-table="auto"
        >
            <template #toolbar>
                <div class="flex items-center w-full">
                    <page-search
                        @search="handleSearch"
                        style="margin-right: 30px"
                    />
                    <el-button type="primary" :icon="Plus" @click="handleAdd"
                        >新建</el-button
                    >
                    <el-button
                        type="danger"
                        :icon="Delete"
                        @click="handleBatchDelete"
                        >批量删除</el-button
                    >
                    <el-button
                        type="success"
                        :icon="Upload"
                        @click="handleImport"
                        >导入</el-button
                    >
                    <el-button
                        type="warning"
                        :icon="Download"
                        @click="handleExport"
                        >导出</el-button
                    >
                </div>
            </template>

            <template #cover="{ row }">
                <el-image
                    style="width: 50px; height: 70px"
                    :src="row.cover"
                    :preview-src-list="[row.cover]"
                    fit="cover"
                />
            </template>
            <template #sellStatus="{ row }">
                <dict-data
                    code="sell_status"
                    v-model="row.sellStatus"
                    type="tag"
                />
            </template>

            <template #action="{ row }">
                <el-button type="danger" link @click="handleDelete(row)"
                    >删除</el-button
                >
            </template>
        </common-table>

        <booklist-add ref="addRef" @success="refreshData" />

        <booklist-import ref="importRef" @success="refreshData" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { Plus, Delete, Upload, Download } from '@element-plus/icons-vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/PageSearch.vue';
    import BooklistAdd from './components/BooklistAdd.vue';
    import BooklistImport from './components/BooklistImport.vue';

    defineOptions({
        name: 'ShareDiscountBookList'
    });

    const tableRef = ref(null);
    const addRef = ref(null);
    const importRef = ref(null);
    const selection = ref([]);

    const pageConfig = reactive({
        pageUrl: '/activity/reduce/book/pagelist',
        exportUrl: '/activity/reduce/book/export',
        fileName: '降价营销书单',
        cacheKey: 'shareDiscountBookListTable',
        rowKey: 'isbn',
        tool: true
    });

    const columns = [
        { type: 'selection', width: 50 },
        { prop: 'cover', label: '封面', slot: 'cover', width: 80 },
        { prop: 'isbn', label: 'ISBN', width: 140 },
        { prop: 'bookName', label: '书名', minWidth: 150 },
        { prop: 'author', label: '作者', width: 120 },
        { prop: 'publish', label: '出版社', width: 150 },
        { prop: 'pubDate', label: '出版时间', width: 120 },
        { prop: 'price', label: '定价', width: 80 },
        { prop: 'productPrice', label: '售价', width: 80 },
        {
            prop: 'sellStatus',
            label: '销售状态',
            width: 100,
            slot: 'sellStatus',
            formatter: (row) =>
                ['待上架', '出售中', '手动下架', '售罄', '黑名单'][
                    row.sellStatus
                ] || row.sellStatus
        },
        { prop: 'recycleDiscount', label: '回收折扣', width: 100 },
        { prop: 'recyclePrice', label: '回收价格', width: 100 },
        { prop: 'upsellPrice', label: '加价金额', width: 100 },
        { prop: 'createTime', label: '添加时间', width: 160 },
        {
            prop: 'action',
            label: '操作',
            slot: 'action',
            width: 100,
            fixed: 'right'
        }
    ];

    const handleSearch = (params) => {
        tableRef.value?.reload(params);
    };

    const refreshData = () => {
        tableRef.value?.reload();
    };

    const handleSelectionChange = (val) => {
        selection.value = val;
    };

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

    const handleImport = () => {
        importRef.value?.handleOpen();
    };

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

    const handleBatchDelete = () => {
        tableRef.value?.operatBatch({
            method: 'post',
            url: '/activity/reduce/book/delete',
            title: `确认批量删除这 ${selection.value.length} 条记录吗？`,
            data: { isbnList: selection.value.map((row) => row.isbn) }
        });
    };

    const handleDelete = (row) => {
        pageRef.value?.messageBoxConfirm({
            message: '确认删除此记录吗？',
            fetch: () =>
                proxy.$http.post('/activity/reduce/book/delete', {
                    isbns: [row.isbn]
                })
        });
    };
</script>
