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

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #toolbar>
                <el-radio-group
                    @change="handleStatusChange"
                    v-model="searchType"
                >
                    <el-radio-button label="全部" value="0" />
                    <el-radio-button
                        label="已加入回收书单（正在回收）"
                        value="1"
                    />
                    <el-radio-button
                        label="已加入回收书单（暂停回收）"
                        value="2"
                    />
                    <el-radio-button label="未加入回收书单" value="3" />
                    <el-radio-button
                        label="未加入回收书单(手动暂停)"
                        value="5"
                    />
                    <el-radio-button label="黑名单" value="4" />
                </el-radio-group>

                <span class="ml-8"></span>
                <el-button
                    type="warning"
                    plain
                    v-permission="'recycle:bookStat:batchRemoveBooklist'"
                    @click="handleOptBooklist('remove')"
                    v-if="['1', '2'].includes(searchType)"
                >
                    移除回收书单
                </el-button>
                <el-button
                    type="success"
                    plain
                    v-permission="'recycle:bookStat:batchAddBooklist'"
                    @click="handleOptBooklist('add')"
                    v-if="['3', '4', '5'].includes(searchType)"
                >
                    加入回收书单
                </el-button>
                <el-button
                    type="warning"
                    plain
                    v-permission="'recycle:bookStat:batchRemoveBlacklist'"
                    @click="handleOptBlacklist('remove')"
                    v-if="searchType === '4'"
                >
                    移除黑名单
                </el-button>
                <el-button
                    type="danger"
                    plain
                    v-permission="'recycle:bookStat:batchAddBlacklist'"
                    @click="handleOptBlacklist('add')"
                    v-if="searchType !== '4'"
                >
                    加黑名单
                </el-button>

                <el-button
                    type="warning"
                    plain
                    v-permission="'recycle:bookStat:batchPauseRecycle'"
                    @click="handleOptRecycle('pause')"
                    v-if="searchType === '1'"
                >
                    暂停回收
                </el-button>
                <el-button
                    type="warning"
                    plain
                    v-permission="'recycle:bookStat:batchStartRecycle'"
                    @click="handleOptRecycle('start')"
                    v-if="searchType === '2'"
                >
                    开启回收
                </el-button>

                <el-button
                    type="success"
                    plain
                    v-permission="'recycle:bookStat:batchAddSocial'"
                    @click="handleOptType(1)"
                >
                    加社科库
                </el-button>
                <el-button
                    type="primary"
                    plain
                    v-permission="'recycle:bookStat:batchAddTeach'"
                    @click="handleOptType(2)"
                >
                    加教材库
                </el-button>
            </template>

            <template #cover="{ row }">
                <el-image
                    style="width: 90px; height: 120px; border-radius: 4px"
                    fit="cover"
                    :src="row.cover"
                    :preview-src-list="[row.cover]"
                    :initial-index="0"
                    preview-teleported
                />
            </template>
            <template #baseInfo="{ row }">
                <book-stat-info :row="row" @refresh="reload" />
            </template>
            <template #stock="{ row }">
                <book-stock :row="row" />
            </template>

            <template #action="{ row }">
                <div class="flex flex-wrap gap-1 button-group">
                    <el-button
                        color="#f37607"
                        v-permission="'recycle:bookStat:viewUrl'"
                        @click="handleViewUrl(row, 'tb')"
                    >
                        查看淘宝
                    </el-button>
                    <el-button
                        color="#951d1d"
                        v-permission="'recycle:bookStat:viewUrl'"
                        @click="handleViewUrl(row, 'kw')"
                    >
                        查看孔网
                    </el-button>
                    <el-button
                        color="#7728f5"
                        v-permission="'recycle:bookStat:setParams'"
                        @click="handleSetParams(row)"
                    >
                        设置独立参数
                    </el-button>
                    <el-button
                        color="#333333"
                        v-permission="'recycle:bookStat:removeBlacklist'"
                        @click="handleOptBlacklist('remove', row)"
                        v-if="row.bookStatus == 3"
                    >
                        移除黑名单
                    </el-button>
                    <el-button
                        color="#333333"
                        v-permission="'recycle:bookStat:addBlacklist'"
                        @click="handleOptBlacklist('add', row)"
                        v-if="row.bookStatus == 1 || row.bookStatus == 2"
                    >
                        加入黑名单
                    </el-button>
                    <el-button
                        color="#bd3124"
                        v-permission="'recycle:bookStat:pauseRecycle'"
                        @click="handleOptRecycle('pause', row)"
                        v-if="row.recycleStatus == 1"
                    >
                        暂停回收
                    </el-button>
                    <el-button
                        color="#bd3124"
                        v-permission="'recycle:bookStat:startRecycle'"
                        @click="handleOptRecycle('start', row)"
                        v-else
                    >
                        开启回收
                    </el-button>
                    <el-button
                        color="#4095e5"
                        v-permission="'recycle:bookStat:removeBooklist'"
                        @click="handleOptBooklist('remove', row)"
                        v-if="row.bookStatus == 2"
                    >
                        移除回收书单
                    </el-button>
                    <el-button
                        color="#bd3124"
                        v-permission="'recycle:bookStat:addBooklist'"
                        @click="handleOptBooklist('add', row)"
                        v-if="row.bookStatus == 1"
                    >
                        加入回收书单
                    </el-button>
                    <!-- 回收日志和售价日志 -->
                    <el-button
                        color="#e99d42"
                        v-permission="'recycle:bookStat:recycleLog'"
                        @click="handleViewRecycleLog(row)"
                    >
                        回收日志
                    </el-button>
                    <el-button
                        color="#0f7dc7"
                        v-permission="'recycle:bookStat:salesLog'"
                        @click="handleViewSalesLog(row)"
                    >
                        售价日志
                    </el-button>
                </div>
            </template>
        </common-table>

        <set-params ref="paramsRef" />
        <add-discount ref="discountRef" @refresh="reload" />
        <order-blacklist ref="blacklistRef" @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 bookSearch from '@/views/recycle/bookStat/book-search.vue';
    import bookStatInfo from '@/views/recycle/components/book-stat-info.vue';
    import bookStock from '@/views/recycle/components/book-stock.vue';
    import setParams from '@/views/recycle/components/set-params.vue';
    import addDiscount from '@/views/recycle/components/add-discount.vue';
    import orderBlacklist from '@/views/recycleOrder/detail/order-blacklist.vue';
    import orderRecycleLog from '@/views/recycleOrder/detail/order-recycle-log.vue';
    import orderSalesLog from '@/views/recycleOrder/detail/order-sales-log.vue';
    import { useBookOperation } from '@/utils/use-book-operation';
    import dayjs from 'dayjs';

    defineOptions({ name: 'ScanLoglist' });

    const searchType = ref('0');
    function handleStatusChange(value) {
        pageRef.value.reload({ searchType: value });
    }

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '图片',
            prop: 'cover',
            width: 120,
            slot: 'cover'
        },
        {
            label: '信息',
            prop: 'baseInfo',
            width: 540,
            slot: 'baseInfo'
        },
        {
            label: '总回收数量',
            minWidth: 120,
            prop: 'recycleTotalNum',
            sortable: true,
            columnKey: '2'
        },
        {
            label: '回收量',
            prop: 'recycleTotalNumTime',
            minWidth: 100,
            formatter: (row) => row?.recycleTotalNumTime || 0,
            sortable: true,
            columnKey: '7'
        },
        {
            label: '最大回收量',
            minWidth: 120,
            prop: 'recycleMax',
            sortable: true,
            columnKey: '6'
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 250,
            slot: 'action',
            fixed: 'right'
        }
    ]);

    /** 页面组件实例 */
    const pageRef = ref(null);
    let rcNumStartTime = dayjs().subtract(3, 'day').format('YYYY-MM-DD');
    let rcNumEndTime = dayjs().format('YYYY-MM-DD');

    const pageConfig = reactive({
        pageUrl: '/user/userScanLog/recycleBookStat',
        fileName: '扫码工作台',
        cacheKey: 'bookStatTable',
        params: {
            searchType: '1',
            rcNumStartTime,
            rcNumEndTime
        },
        rowKey: 'isbn'
    });

    //查看回收日志
    const recycleLogRef = ref(null);
    function handleViewRecycleLog(row) {
        recycleLogRef.value?.handleOpen(row);
    }

    //查看售价日志
    const salesLogRef = ref(null);
    function handleViewSalesLog(row) {
        salesLogRef.value?.handleOpen(row);
    }

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }
    // 使用图书操作混入
    const {
        blacklistRef,
        discountRef,
        paramsRef,
        handleOptBooklist,
        handleOptBlacklist,
        handleSetParams,
        handleOptType,
        handleOptRecycle
    } = useBookOperation(pageRef);

    //查看淘宝和孔网
    function handleViewUrl(row, type) {
        let url = '';
        if (type == 'tb') {
            url = `https://s.taobao.com/search?q=${row.isbn}`;
        } else if (type == 'kw') {
            url = `https://search.kongfz.com/product_result/?key=${row.isbn}&status=0&_stpmt=eyJzZWFyY2hfdHlwZSI6ImFjdGl2ZSJ9`;
        }
        window.open(url, '_blank');
    }
</script>

<style lang="scss">
    .button-group .el-button {
        width: calc(50% - 8px);
    }
</style>
