<template>
    <ele-page flex-table :bodyStyle="{ padding: '0 20px' }">
        <goods-search ref="searchRef" @search="handleSearch" />

        <div class="px-4 py-2 bg-white">
            <el-tabs
                v-model="activeTab"
                type="card"
                @tab-change="handleTabChange"
                :head-style="{ marginBottom: '0' }"
            >
                <el-tab-pane label="全部" name="" />
                <el-tab-pane label="出售中" name="1" />
                <el-tab-pane label="手动下架" name="2" />
				<el-tab-pane label="自动下架(售罄)" name="3" />
                <el-tab-pane label="销售黑名单" name="4" />
                <el-tab-pane label="待上架列表" name="0" />
            </el-tabs>
        </div>

        <common-table
            ref="tableRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
            :bodyStyle="{ paddingTop: 0 }"
        >
            <template #toolbar>
                <div class="flex gap-2">
                    <el-button type="primary" plain @click="openNewBookModal"
                        >新建图书商品</el-button
                    >
                    <el-button type="primary" plain @click="openNewOtherModal"
                        >新建其他商品</el-button
                    >
                    <el-button type="danger" plain @click="openUpdatePriceModal"
                        >更新价格</el-button
                    >
                    <el-button type="warning" plain @click="openListDelistModal"
                        >上架/下架</el-button
                    >
                    <el-button color="#bd3124" plain @click="handleExport"
                        >导出</el-button
                    >
                    <el-button type="warning" plain @click="handleOperationLog"
                        >操作日志</el-button
                    >
                </div>
            </template>

            <!-- 列插槽 -->
            <template #cover="{ row }">
                <el-image
                    style="width: 60px; height: 80px; border-radius: 4px"
                    fit="cover"
                    :src="row.cover"
                    :preview-src-list="[row.cover]"
                    preview-teleported
                >
                    <template #error>
                        <div
                            class="flex items-center justify-center w-full h-full bg-gray-100 text-gray-400"
                        >
                            <el-icon>
                                <Picture />
                            </el-icon>
                        </div>
                    </template>
                </el-image>
            </template>

            <template #info="{ row }">
                <goods-info :row="row" />
            </template>

            <template #stock="{ row }">
                <div class="text-left">
                    <div>中等: {{ row.mediumNum || 0 }}</div>
                    <div>良好: {{ row.goodNum || 0 }}</div>
                    <div>次品: {{ row.badNum || 0 }}</div>
                    <div
                        >合计:
                        {{
                            (row.mediumNum || 0) +
                            (row.goodNum || 0) +
                            (row.badNum || 0)
                        }}</div
                    >
                </div>
            </template>

            <template #price="{ row }">
                <div class="flex items-center justify-center">
                    <span>¥{{ row.productPrice }}</span>
                    <el-icon
                        class="ml-1 cursor-pointer"
                        style="color: #409eef"
                        @click="handleEditPrice(row)"
                    >
                        <EditPen />
                    </el-icon>
                </div>
            </template>

            <template #status="{ row }">
                <el-tag v-if="row.sellStatus == '1'" type="success"
                    >出售中</el-tag
                >
                <el-tag v-else-if="row.sellStatus == '0'" type="warning"
                    >待上架</el-tag
                >
                <el-tag v-else-if="row.sellStatus == '2'" type="info"
                    >手动下架</el-tag
                >
				<el-tag v-else-if="row.sellStatus == '3'" type="info"
				    >手动下架</el-tag
				>
                <el-tag v-else-if="row.sellStatus == '4'" type="danger"
                    >黑名单</el-tag
                >
                <el-tag v-else type="warning">-</el-tag>
            </template>

            <template #action="{ row }">
                <div class="flex flex-wrap gap-2 button-group">
                    <!-- 其他状态保持原有逻辑 -->
                    <el-button type="warning" @click="handleSalesDetail(row)"
                        >销售明细</el-button
                    >
                    <el-button
                        type="primary"
                        plain
                        @click="handleRecycleDetail(row)"
                        >回收明细</el-button
                    >

                    <template v-if="row.sellStatus == '1'">
                        <el-button type="warning" @click="handleDelist(row)"
                            >下架</el-button
                        >
                    </template>

                    <template v-else-if="row.sellStatus == '2'">
                        <el-button type="success" @click="handleListing(row)"
                            >上架</el-button
                        >
                    </template>

                    <el-button
                        v-if="row.sellStatus == '3'"
                        type="danger"
                        @click="handleToggleBlacklist(row, false)"
                        >移出黑名单</el-button
                    >
                    <el-button
                        v-else
                        color="#606066"
                        @click="handleToggleBlacklist(row, true)"
                        >加入黑名单</el-button
                    >
                </div>
            </template>

            <template #others="{ row }">
                <div class="flex flex-wrap gap-2">
                    <!-- 待上架状态显示特定按钮组 -->
                    <el-button
                        color="#e99d42"
                        @click="handleRecycleLog(row)"
                        v-permission="'recycle:bookStat:recycleLog'"
                        >回收日志</el-button
                    >
                    <el-button
                        color="#0f7dc7"
                        @click="handleSalesLog(row)"
                        v-permission="'recycle:bookStat:salesLog'"
                        >售价日志</el-button
                    >
                    <el-button color="#f27606" @click="handleViewUrl(row, 'tb')"
                        >查看淘宝</el-button
                    >
                    <el-button color="#951d1d" @click="handleViewUrl(row, 'kw')"
                        >查看孔网</el-button
                    >

                    <!-- 移除/加入回收书单 -->
                    <el-button
                        color="#4095e5"
                        @click="handleOptBooklist('remove', row)"
                        v-permission="'recycle:bookStat:removeBooklist'"
                        v-if="row.recycleStatus && row.recycleStatus > 0"
                    >
                        移除回收书单
                    </el-button>
                    <el-button
                        color="#bd3124"
                        @click="handleOptBooklist('add', row)"
                        v-permission="'recycle:bookStat:addBooklist'"
                        v-else
                    >
                        加入回收书单
                    </el-button>

                    <!-- 暂停/开启回收 -->
                    <template v-if="row.recycleStatus && row.recycleStatus > 0">
                        <el-button
                            v-if="row.recycleStatus == 1"
                            color="#bd3124"
                            @click="handleOptRecycle('pause', row)"
                            v-permission="'recycle:bookStat:pauseRecycle'"
                        >
                            暂停回收
                        </el-button>
                        <el-button
                            v-else
                            color="#bd3124"
                            @click="handleOptRecycle('start', row)"
                            v-permission="'recycle:bookStat:startRecycle'"
                        >
                            开启回收
                        </el-button>
                    </template>

                    <el-button color="#7728f5" @click="handleSetParams(row)"
                        >设置独立参数</el-button
                    >
                </div>
            </template>
        </common-table>

        <!-- 弹窗 -->
        <new-book-modal ref="newBookModalRef" @done="reload" />
        <edit-price-modal ref="editPriceModalRef" @done="reload" />
        <sales-detail-modal ref="salesDetailModalRef" />
        <recycle-detail-modal ref="recycleDetailModalRef" />
        <operation-log-modal ref="operationLogModalRef" />

        <common-import-modal
            ref="updatePriceModalRef"
            title="更新价格"
            template-name="更新价格模板"
            template-url="https://shuhi.oss-cn-qingdao.aliyuncs.com/default/shop_book_price_import.xlsx"
            upload-url="/shop/shopbook/importPrice"
            instruction-title="更新规则"
            :instructions="[
                '文件ISBN不存在或者错误，会自动过滤掉',
                '导入文件第一行需与模版完全一致'
            ]"
            @done="reload"
        />

        <common-import-modal
            ref="listDelistModalRef"
            title="批量上/下架"
            template-name="上架/下架模板"
            template-url="https://shuhi.oss-cn-qingdao.aliyuncs.com/default/shop_book_release_import.xlsx"
            upload-url="/shop/shopbook/batchShelf"
            instruction-title="上架/下架规则"
            :instructions="[
                '文件ISBN不存在或者错误，会自动过滤掉',
                '导入文件第一行需与模版完全一致'
            ]"
            @done="reload"
        />

        <books-edit ref="booksEditRef" @success="reload" />
        <set-params ref="paramsRef" @refresh="reload" />
        <order-recycle-log ref="recycleLogRef" />
        <order-sales-log ref="salesLogRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import CommonImportModal from './components/common-import-modal.vue';
    import GoodsSearch from './components/goods-search.vue';
    import GoodsInfo from './components/goods-info.vue';
    import NewBookModal from './components/new-book-modal.vue';
    import EditPriceModal from './components/edit-price-modal.vue';
    import SalesDetailModal from '@/views/recycle/inventory/components/sale-detail.vue';
    import RecycleDetailModal from '@/views/recycle/inventory/components/recycle-detail.vue';
    import OperationLogModal from './components/operation-log-modal.vue';
    import BooksEdit from '@/views/data/books/components/books-edit.vue';
    import SetParams from '@/views/recycle/components/set-params.vue';
    import OrderRecycleLog from '@/views/recycleOrder/detail/order-recycle-log.vue';
    import OrderSalesLog from '@/views/recycleOrder/detail/order-sales-log.vue';
    import { EditPen, Picture } from '@element-plus/icons-vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import request from '@/utils/request';
    import { useBookOperation } from '@/utils/use-book-operation';

    defineOptions({ name: 'GoodsList' });

    // 状态
    const activeTab = ref('');
    const tableRef = ref(null);
    const searchRef = ref(null);
    const searchParams = ref({});

    // 弹窗状态
    const newBookModalRef = ref(null);
    const editPriceModalRef = ref(null);
    const salesDetailModalRef = ref(null);
    const recycleDetailModalRef = ref(null);
    const operationLogModalRef = ref(null);
    const updatePriceModalRef = ref(null);
    const listDelistModalRef = ref(null);
    const booksEditRef = ref(null);
    // const setParamsRef = ref(null);
    const recycleLogRef = ref(null);
    const salesLogRef = ref(null);

    // Page Config
    const pageConfig = reactive({
        pageUrl: '/shop/shopbook/shopPageList',
        exportUrl: '/shop/shopbook/export',
        fileName: '商品列表',
        cacheKey: 'goods-list-data',
        params: {
            sellStatus: ''
        }
    });

    const columns = ref([
        {
            label: '封面',
            prop: 'cover',
            slot: 'cover',
            width: 100,
            align: 'center'
        },
        { label: '商品信息', prop: 'info', slot: 'info', minWidth: 200 },
        {
            label: '库存',
            prop: 'stock',
            slot: 'stock',
            width: 150,
            align: 'center'
        },
        {
            label: '售价',
            prop: 'productPrice',
            slot: 'price',
            width: 120,
            align: 'center'
        },
        { label: '销量', prop: 'salesNum', width: 100, align: 'center' },
        {
            label: '状态',
            prop: 'sellStatus',
            slot: 'status',
            width: 100,
            align: 'center'
        },
        { label: '上架时间', prop: 'onSaleTime', width: 160, align: 'center' },
        {
            columnKey: 'action',
            label: '操作',
            width: 220,
            align: 'center',
            slot: 'action',
            fixed: 'right'
        },
        {
            columnKey: 'others',
            label: '其他操作',
            width: 220,
            align: 'center',
            slot: 'others',
            fixed: 'right'
        }
    ]);

    // 方法
    const reload = (where) => {
        tableRef.value?.reload(where);
    };

    // 图书操作 Hook
    const {
        paramsRef,
        handleOptBooklist,
        handleOptRecycle,
        handleSetParams,
        handleViewUrl
    } = useBookOperation(tableRef);

    const handleRecycleLog = (row) => {
        recycleLogRef.value?.handleOpen(row);
    };

    const handleSalesLog = (row) => {
        salesLogRef.value?.handleOpen(row);
    };

    const handleSearch = (where) => {
        searchParams.value = where;
        reload(where);
    };

    const handleTabChange = (name) => {
        let status = name;
        // 直接更新参数
        pageConfig.params.sellStatus = status;
        reload();
    };

    // 操作
    const openNewBookModal = () => {
        newBookModalRef.value?.open();
    };

    const openUpdatePriceModal = () => {
        updatePriceModalRef.value?.open();
    };

    const openListDelistModal = () => {
        listDelistModalRef.value?.open();
    };

    const openNewOtherModal = () => {
        EleMessage.info('开发中');
    };

    const handleEditPrice = (row) => {
        editPriceModalRef.value?.open(row);
    };

    const setShelfStatus = async (row, status, successMsg) => {
        try {
            await request.post('/shop/shopbook/setShelfStatus', {
                isbn: row.isbn,
                sellStatus: status
            });
            EleMessage.success(successMsg);
            reload();
        } catch (e) {
            EleMessage.error(e.message || '操作失败');
        }
    };

    const handleDelist = (row) => {
        tableRef.value?.messageBoxConfirm({
            message: '确认下架该商品吗？',
            fetch: () =>
                request.post('/shop/shopbook/setShelfStatus', {
                    isbn: row.isbn,
                    sellStatus: '2'
                }),
            successMessage: '下架成功'
        });
    };

    const handleListing = (row) => {
        setShelfStatus(row, '1', '上架成功');
    };

    const handleToggleBlacklist = (row, isAdd) => {
        const status = isAdd ? '3' : '2'; // Remove from blacklist -> In Warehouse
        const msg = isAdd ? '确认加入黑名单？' : '确认移出黑名单？';

        tableRef.value?.messageBoxConfirm({
            message: msg,
            fetch: () =>
                request.post('/shop/shopbook/setShelfStatus', {
                    isbn: row.isbn,
                    sellStatus: status
                }),
            successMessage: '操作成功'
        });
    };

    const handleExport = () => {
        tableRef.value?.exportData('商品列表');
    };

    const handleOperationLog = () => {
        operationLogModalRef.value?.open();
    };

    const handleSalesDetail = (row) => {
        salesDetailModalRef.value?.handleOpen(row);
    };

    const handleRecycleDetail = (row) => {
        recycleDetailModalRef.value?.handleOpen(row);
    };
</script>
