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

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-button
                    type="primary"
                    plain
                    :icon="PlusOutlined"
                    v-permission="'recycle:inventory:add'"
                    @click="handleUpdate()"
                >
                    新增图书商品
                </el-button>
                <el-button
                    type="primary"
                    plain
                    v-permission="'recycle:inventory:import'"
                    @click="handleImportExcel"
                    :icon="UploadOutlined"
                >
                    批量导入
                </el-button>
                <el-button
                    type="success"
                    plain
                    v-permission="'recycle:inventory:checkNew'"
                    @click="handleCheckNew"
                    :icon="CloudUploadOutlined"
                >
                    检测上新
                </el-button>
            </template>
            <template #cover="{ row }">
                <el-image
                    style="width: 80px; height: 100px"
                    fit="cover"
                    :src="row?.bookInfo?.cover"
                    :preview-src-list="[row?.bookInfo?.cover]"
                    :initial-index="0"
                    preview-teleported
                />
            </template>

            <template #baseInfo="{ row }">
                <book-base-info :row="row?.bookInfo" @click="handleUpdate" />
            </template>

            <template #stock="{ row }">
                <book-stock :row="row" />
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="success"
                        link
                        v-permission="'recycle:inventory:update'"
                        @click="handleUpdate(row)"
                    >
                        [编辑]
                    </el-button>
                    <el-button
                        type="danger"
                        link
                        v-permission="'recycle:inventory:recycleDetail'"
                        @click="handleRecycleDetail(row)"
                    >
                        [回收明细]
                    </el-button>
                    <el-button
                        type="warning"
                        link
                        v-permission="'recycle:inventory:saleDetail'"
                        @click="handleSaleDetail(row)"
                    >
                        [销售明细]
                    </el-button>
                </div>
            </template>
        </common-table>
        <books-edit ref="editRef" @success="reload()" />
        <books-import ref="importRef" v-model="showImport" @done="reload()" />
        <book-check-new ref="checkNewRef" />
        <recycle-detail ref="recycleDetailRef" />
        <sale-detail ref="saleDetailRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import {
        PlusOutlined,
        UploadOutlined,
        CloudUploadOutlined
    } from '@/components/icons';
    import { ElMessage } from 'element-plus';
    import pageSearch from './components/page-search.vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import booksEdit from '@/views/data/books/components/books-edit.vue';
    import booksImport from '@/views/data/books/components/books-import.vue';
    import bookBaseInfo from './components/book-base-info.vue';
    import bookCheckNew from './components/book-check-new.vue';
    import bookStock from './components/book-stock.vue';
    import recycleDetail from './components/recycle-detail.vue';
    import saleDetail from './components/sale-detail.vue';
    import { useDictData } from '@/utils/use-dict-data';

    defineOptions({ name: 'RecycleOrderCancelled' });

    const [perCheckDicts] = useDictData(['is_common_yes']);

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '图片',
            prop: 'cover',
            slot: 'cover',
            align: 'center'
        },
        {
            label: '基础信息',
            prop: 'baseInfo',
            slot: 'baseInfo',
            align: 'center',
            minWidth: 320
        },
        {
            label: '商品类型',
            prop: 'goodsType',
            formatter: (row) => '图书商品',
            align: 'center'
        },
        {
            label: '售价',
            prop: 'productPrice',
            align: 'center',
            minWidth: 100,
            formatter: (row) => '￥' + (row?.salePrice ? row.salePrice : 0)
        },
        {
            label: '库存',
            prop: 'stock',
            align: 'center',
            minWidth: 100,
            slot: 'stock'
        },
        {
            label: '销量',
            prop: 'salesNum',
            align: 'center',
            minWidth: 100,
            formatter: (row) => row.salesNum || 0
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            slot: 'action',
            fixed: 'right'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/book/stock/pagelist',
        fileName: '库存数据',
        cacheKey: 'books-stock-data'
    });

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

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

    //新增编辑图书
    const editRef = ref(null);
    function handleUpdate(row) {
        if (!row.bookInfo) {
            ElMessage.warning('缺少图书信息');
            return;
        }
        row.id = row.bookInfo.id;
        editRef.value?.handleOpen(row);
    }

    //检测上新
    const checkNewRef = ref(null);
    function handleCheckNew() {
        checkNewRef.value?.handleOpen();
    }

    //回收明细
    const recycleDetailRef = ref(null);
    function handleRecycleDetail(row) {
        recycleDetailRef.value?.handleOpen(row);
    }

    //销售明细
    const saleDetailRef = ref(null);
    function handleSaleDetail(row) {
        return ElMessage.warning('功能暂未开放');
        saleDetailRef.value?.handleOpen(row);
    }
</script>
