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

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
            :datasource="datasource"
        >
            <template #toolbar>
                <el-button type="warning" @click="importVisible = true">
                    <el-icon class="mr-1"><Upload /></el-icon>
                    批量导入
                </el-button>
                <el-button type="danger" plain @click="ruleVisible = true">
                    <el-icon class="mr-1"><DocumentAdd /></el-icon>
                    生成规则
                </el-button>
            </template>

            <template #cover="{ row }">
                <el-image
                    style="width: 80px; height: 110px; 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="mr-4"
                            >销售价格: {{ row.salesPrice }}
                            <el-icon class="cursor-pointer text-blue-500"
                                ><Edit /></el-icon
                        ></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 #turnoverRate="{ row }">
                <div class="flex items-center">
                    <el-tag
                        :type="row.turnoverType === '年' ? 'primary' : 'danger'"
                        effect="plain"
                        class="mr-1"
                    >
                        {{ row.turnoverType }}
                    </el-tag>
                    <span>{{ row.turnoverRate }}</span>
                    <el-icon
                        class="ml-2 cursor-pointer text-blue-500 text-lg"
                        @click="handleHistory(row)"
                    >
                        <DataLine />
                    </el-icon>
                </div>
            </template>

            <template #action="{ row }">
                <div class="flex flex-col items-start gap-1">
                    <el-button link type="primary" @click="handleHistory(row)"
                        >[历史周转率]</el-button
                    >
                    <el-button link type="primary" @click="handleLog(row)"
                        >[操作记录]</el-button
                    >
                </div>
            </template>
        </common-table>

        <import-dialog v-model="importVisible" @done="reload" />
        <rule-dialog v-model="ruleVisible" />
        <history-dialog v-model="historyVisible" ref="historyRef" />
        <log-dialog v-model="logVisible" ref="logRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import {
        Upload,
        DocumentAdd,
        Edit,
        DataLine
    } from '@element-plus/icons-vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/page-search.vue';
    import ImportDialog from './components/import-dialog.vue';
    import RuleDialog from './components/rule-dialog.vue';
    import HistoryDialog from './components/history-dialog.vue';
    import LogDialog from './components/log-dialog.vue';

    defineOptions({ name: 'StockTurnoverRate' });

    // Component Refs
    const pageRef = ref(null);
    const historyRef = ref(null);
    const logRef = ref(null);

    // Dialog Visibilities
    const importVisible = ref(false);
    const ruleVisible = ref(false);
    const historyVisible = ref(false);
    const logVisible = ref(false);

    const columns = ref([
        { type: 'selection', width: 50, align: 'center', fixed: 'left' },
        { label: '图片', prop: 'cover', width: 100, slot: 'cover' },
        { label: '信息', prop: 'info', minWidth: 400, slot: 'info' },
        {
            label: '库存周转率',
            prop: 'turnoverRate',
            width: 150,
            slot: 'turnoverRate',
            sortable: true
        },
        {
            label: '剩余可卖天数',
            prop: 'remainingDays',
            width: 120,
            sortable: true
        },
        { label: '销量', prop: 'sales', width: 100, sortable: true },
        { label: '期初库存', prop: 'initialStock', width: 100, sortable: true },
        { label: '期末库存', prop: 'endingStock', width: 100, sortable: true },
        { label: '平均库存', prop: 'averageStock', width: 100, sortable: true },
        {
            label: '操作',
            prop: 'action',
            width: 120,
            slot: 'action',
            fixed: 'right'
        }
    ]);

    const pageConfig = reactive({
        fileName: '库存周转率',
        cacheKey: 'stockTurnoverTable',
        params: {},
        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,
                turnoverRate: 200,
                turnoverType: i % 2 === 0 ? '年' : '半',
                remainingDays: 55,
                sales: 200,
                initialStock: 200,
                endingStock: 200,
                averageStock: 50
            }))
        });
    };

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

    function handleHistory(row) {
        historyVisible.value = true;
        historyRef.value?.setData(row);
    }

    function handleLog(row) {
        logVisible.value = true;
        logRef.value?.handleOpen(row);
    }
</script>
