<template>
    <ele-page flex-table :bodyStyle="{ padding: 0 }">
        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :bodyStyle="{ padding: 0 }"
        >
            <template #toolbar>
                <div class="flex items-center">
                    <el-button
                        type="primary"
                        plain
                        :icon="PlusOutlined"
                        v-permission="'ipMrakup:booklist:add'"
                        @click="handleUpdate()"
                    >
                        新建
                    </el-button>
                    <el-button
                        type="danger"
                        plain
                        :icon="DeleteOutlined"
                        v-permission="'ipMrakup:booklist:batchDelete'"
                        @click="handleBatchDelete()"
                    >
                        批量删除
                    </el-button>
                    <el-button
                        type="primary"
                        plain
                        v-permission="'ipMrakup:booklist:import'"
                        @click="handleImportExcel"
                        :icon="UploadOutlined"
                    >
                        导入
                    </el-button>
                    <el-button
                        type="success"
                        plain
                        v-permission="'ipMrakup:booklist:export'"
                        @click="handleExportExcel"
                        :icon="DownloadOutlined"
                    >
                        导出
                    </el-button>

                    <page-search
                        style="margin-left: 30px"
                        ref="searchRef"
                        @search="reload"
                    />
                </div>
            </template>
            <template #cover="{ row }">
                <el-image
                    style="width: 80px; height: 100px"
                    fit="cover"
                    :src="row.cover"
                    :preview-src-list="[row.cover]"
                    :initial-index="0"
                    preview-teleported
                />
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="danger"
                        link
                        v-permission="'ipMrakup:booklist:delete'"
                        @click="handleBatchDelete(row)"
                    >
                        [删除]
                    </el-button>
                </div>
            </template>
        </common-table>
        <booklist-import
            ref="importRef"
            v-model="showImport"
            @done="reload()"
        />
        <booklist-add ref="editRef" @done="reload()" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import {
        PlusOutlined,
        DeleteOutlined,
        DownloadOutlined,
        UploadOutlined
    } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import booklistImport from './components/booklist-import.vue';
    import booklistAdd from './components/booklist-add.vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import pageSearch from './components/page-search.vue';

    defineOptions({ name: 'IpMarkupBooklist' });

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '图片',
            prop: 'cover',
            slot: 'cover',
            align: 'center',
            width: 110
        },
        {
            label: 'ISBN',
            prop: 'isbn',
            align: 'center',
            width: 150
        },
        {
            label: '书名',
            prop: 'bookName',
            align: 'center',
            minWidth: 150
        },
        {
            label: '作者',
            prop: 'author',
            align: 'center'
        },
        {
            label: '出版社',
            prop: 'publish',
            align: 'center'
        },
        {
            label: '出版时间',
            prop: 'pubDate',
            align: 'center'
        },
        {
            label: '定价',
            prop: 'price',
            align: 'center'
        },
        {
            label: '回收折扣',
            prop: 'recycleDiscount',
            align: 'center'
        },
        {
            label: '加价金额',
            prop: 'upsellPrice',
            align: 'center'
        },
        {
            label: '添加时间',
            prop: 'createTime',
            align: 'center',
            width: 120
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 90,
            align: 'center',
            slot: 'action'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/activity/activityUpsellBook/activity/upsell/book/pagelist',
        exportUrl: '/activity/activityUpsellBook/activity/upsell/book/export',
        fileName: 'IP营销书单',
        cacheKey: 'ip-markup-booklist'
    });

    // 导出excel
    function handleExportExcel() {
        pageRef.value?.exportData('IP营销书单');
    }

    // 导入
    const showImport = ref(false);
    function handleImportExcel() {
        showImport.value = true;
    }

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

    // 批量删除
    function handleBatchDelete(row) {
        let selections = row ? [row] : pageRef.value?.getSelections();
        if (!selections || selections.length === 0) {
            ElMessage.warning('请选择要删除的记录');
            return;
        }
        let isbnList = selections.map((item) => item.isbn);
        let url = `/activity/activityUpsellBook/activity/upsell/book/delete`;
        pageRef.value?.operatBatch({
            title: '确认删除？',
            method: 'post',
            url,
            row,
            data: { isbnList }
        });
    }

    // 新增编辑
    const editRef = ref(null);
    function handleUpdate(row) {
        editRef.value?.handleOpen(row);
    }
</script>
