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

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
            :datasource="datasource"
        >
            <template #toolbar>
                <el-radio-group
                    @change="handleStatusChange"
                    v-model="searchType"
                    class="audit-tabs"
                >
                    <el-radio-button label="全部" value="0" />
                    <el-radio-button label="待审核" value="1" />
                    <el-radio-button label="已完成" value="2" />
                </el-radio-group>
            </template>

            <template #cover="{ row }">
                <el-image
                    style="width: 100px; height: 100px; border-radius: 4px"
                    fit="cover"
                    :src="row.cover"
                    :preview-src-list="[row.cover]"
                    :initial-index="0"
                    preview-teleported
                />
            </template>

            <template #info="{ row }">
                <div class="flex flex-col text-sm">
                    <div class="mb-1">
                        <span class="font-bold">书名: </span>{{ row.bookName }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">作者: </span>{{ row.author }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">ISBN: </span>{{ row.isbn }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">出版社: </span
                        >{{ row.publisher }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">出版时间: </span
                        >{{ row.pubDate }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">所属类型: </span>{{ row.type }}
                    </div>
                    <div class="mb-1">
                        <span class="font-bold">回收状态: </span
                        >{{ row.recycleStatus }}
                    </div>
                    <div class="mt-2 border-t pt-2">
                        <span class="mr-4">定价: {{ row.price }}</span>
                        <span class="mr-4"
                            >回收折扣: {{ row.recycleDiscount }}折
                            <span class="text-red-500 text-xs"
                                >建议0.5-0.6折</span
                            ></span
                        >
                        <span>回收价格: {{ row.recyclePrice }}</span>
                    </div>
                    <div class="mb-1">
                        <span class="text-green-500 text-xs"
                            >谢程娟: 2025-06-15</span
                        >
                    </div>
                    <div class="mb-1">
                        <span class="mr-4">销售价格: {{ row.salesPrice }}</span>
                        <span class="text-green-500 text-xs"
                            >谢程娟: 2025-06-15</span
                        >
                    </div>
                    <div class="mb-1">
                        <span
                            >(已回收数量: {{ row.recycledCount }} 当前库存:
                            {{ row.currentStock }})</span
                        >
                    </div>
                </div>
            </template>

            <template #newPrice="{ row }">
                <div class="flex flex-col items-center">
                    <div class="flex items-center text-xl font-bold">
                        {{ row.newPrice }}
                        <el-icon class="ml-2 cursor-pointer text-red-500">
                            <Edit />
                        </el-icon>
                    </div>
                    <el-button size="small" type="info" plain class="mt-1"
                        >填入原售价</el-button
                    >
                </div>
            </template>

            <template #action="{ row }">
                <div class="flex flex-col items-center gap-2">
                    <el-button
                        color="#951d1d"
                        size="small"
                        @click="handleViewUrl(row, 'kw')"
                        >查看孔网</el-button
                    >
                    <el-button
                        color="#f37607"
                        size="small"
                        @click="handleViewUrl(row, 'tb')"
                        >查看淘宝</el-button
                    >
                    <el-button color="#4095e5" size="small"
                        >设置独立参数</el-button
                    >
                    <el-button type="success" size="small">同意</el-button>
                </div>
            </template>
        </common-table>
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { Edit } from '@element-plus/icons-vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/page-search.vue';

    defineOptions({ name: 'PriceAudit' });

    // Component Refs
    const pageRef = ref(null);
    const searchType = ref('0');

    const columns = ref([
        { type: 'selection', width: 50, align: 'center', fixed: 'left' },
        { label: '图片', prop: 'cover', width: 120, slot: 'cover' },
        { label: '信息', prop: 'info', minWidth: 400, slot: 'info' },
        {
            label: '总回收量',
            prop: 'totalRecycled',
            width: 110,
            sortable: true,
            align: 'center'
        },
        { label: '状态', prop: 'status', width: 100, align: 'center' },
        { label: '分配时间', prop: 'assignTime', width: 160, align: 'center' },
        {
            label: '当前库存',
            prop: 'currentStock',
            width: 110,
            sortable: true,
            align: 'center'
        },
        { label: '当前售价', prop: 'salesPrice', width: 100, align: 'center' },
        { label: '处理人', prop: 'handler', width: 100, align: 'center' },
        {
            label: '新售价',
            prop: 'newPrice',
            width: 150,
            slot: 'newPrice',
            align: 'center'
        },
        {
            label: '操作',
            prop: 'action',
            width: 120,
            slot: 'action',
            fixed: 'right',
            align: 'center'
        }
    ]);

    const pageConfig = reactive({
        fileName: '价格审核',
        cacheKey: 'priceAuditTable',
        params: {
            searchType: '0'
        },
        rowKey: 'id'
    });

    // Mock datasource
    const datasource = ({ page, limit, where, orders }) => {
        return Promise.resolve({
            code: 0,
            msg: 'success',
            count: 10,
            data: Array.from({ length: 10 }).map((_, i) => ({
                id: i + 1,
                cover: 'https://img1.baidu.com/it/u=2356551695,3062334057&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707',
                bookName: '马克思主义基本原理',
                author: '编写组',
                isbn: '9787056025415',
                publisher: '高等教育出版社',
                pubDate: '2018-06',
                type: '教材库',
                recycleStatus: '正在回收',
                price: 25,
                recycleDiscount: 0.2,
                recyclePrice: 0.5,
                salesPrice: 6.5,
                recycledCount: 200,
                currentStock: 75 + i,
                totalRecycled: 200,
                status: i % 2 === 0 ? '待审核' : '已审核',
                assignTime: '2024-06-15 15:06:11',
                handler: 'zzz',
                newPrice: 10.55
            }))
        });
    };

    function reload(where) {
        pageRef.value?.reload(where);
    }

    function handleStatusChange(value) {
        pageRef.value?.reload({ searchType: value });
    }

    //查看淘宝和孔网
    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 scoped>
    /* 仿照截图中的Tabs样式 */
    :deep(.audit-tabs) .el-radio-button__inner {
        width: 200px;
        /* 增加宽度 */
        border-radius: 0;
        border: none;
        border-bottom: 2px solid transparent;
        background: transparent;
        box-shadow: none;
        color: #666;
    }

    :deep(.audit-tabs)
        .el-radio-button__original-radio:checked
        + .el-radio-button__inner {
        background-color: #409eff;
        /* 蓝色背景 */
        color: white;
        border-radius: 0;
        /* 保持方形或自定义圆角 */
        box-shadow: none;
    }

    /* 整体背景可能需要调整，这里仅做基本样式覆盖 */
    .audit-tabs {
        display: flex;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        width: 100%;
    }
</style>
