<template>
    <div class="collection-query">
        <!-- Table -->
        <common-table
            ref="tableRef"
            :columns="columns"
            :datasource="datasource"
            :page-config="{ rowKey: 'id', tool: false }"
            @row-click="handleRowClick"
            :bodyStyle="{ padding: 0 }"
        >
            <template #toolbar>
                <div class="mb-4 flex space-x-2">
                    <el-input
                        v-model="searchForm.nickname"
                        placeholder="用户昵称"
                        style="width: 200px"
                        clearable
                    />
                    <el-select
                        v-model="searchForm.status"
                        placeholder="使用详情"
                        style="width: 150px"
                        clearable
                    >
                        <el-option label="已使用" value="used" />
                        <el-option label="未使用" value="unused" />
                        <el-option label="已过期" value="expired" />
                    </el-select>
                    <el-button type="primary" @click="handleSearch"
                        >搜索</el-button
                    >
                </div>
            </template>

            <template #orderCount="{ row }">
                <div class="flex items-center">
                    <span>{{ row.orderCount }}</span>
                    <el-button
                        v-if="row.orderCount > 0"
                        type="warning"
                        circle
                        size="small"
                        class="ml-2 !p-1 !h-4 !w-4 min-h-0"
                        @click.stop="handleShowDetail(row)"
                    >
                        <el-icon :size="10">
                            <ArrowRight />
                        </el-icon>
                    </el-button>
                </div>
            </template>
        </common-table>

        <SalesDetailDialog v-model="detailVisible" :row="currentRow" />
    </div>
</template>

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

    const searchForm = reactive({
        nickname: '',
        status: ''
    });

    const columns = ref([
        { label: '用户昵称', prop: 'nickname' },
        { label: '使用详情', prop: 'usageDetail' },
        { label: '用户订单数量', prop: 'orderCount', slot: 'orderCount' },
        { label: '红包金额', prop: 'amount' }
    ]);

    const datasource = async ({ page, limit }) => {
        // Mock data
        await new Promise((resolve) => setTimeout(resolve, 300));
        return [
            {
                id: 1,
                nickname: '书嗨5465465465',
                usageDetail: '已使用',
                orderCount: 1,
                amount: '0.25'
            },
            {
                id: 2,
                nickname: '书嗨5465465465',
                usageDetail: '未使用',
                orderCount: 1,
                amount: '0.25'
            },
            {
                id: 3,
                nickname: '书嗨5465465465',
                usageDetail: '已过期',
                orderCount: 1,
                amount: '0.25'
            }
        ];
    };

    const tableRef = ref(null);
    const handleSearch = () => {
        tableRef.value?.reload();
    };

    // Detail Dialog Logic
    const detailVisible = ref(false);
    const currentRow = ref({});

    const handleShowDetail = (row) => {
        currentRow.value = row;
        detailVisible.value = true;
    };

    const handleRowClick = (row) => {
        if (row.orderCount > 0) {
            handleShowDetail(row);
        }
    };
</script>
