<template>
    <div class="shop-report flex-col gap-14">
        <el-card class="report-card round-8" shadow="never">
            <div class="flex-between flex-wrap gap-12 pb-14">
                <div class="flex-items-center gap-12">
                    <span class="font-bold">授权店铺</span>
                    <el-button type="primary" @click="authorizeShop">授权店铺</el-button>
                </div>
                <el-button link @click="expanded = !expanded">{{ expanded ? '收起' : '展开' }}</el-button>
            </div>

            <div v-show="expanded" class="shop-grid flex flex-wrap gap-16">
                <div v-for="shop in shops" :key="shop.code" class="shop-card p-16 round-8 pointer" :class="{ selected: selectedShop === shop.code }" @click="selectedShop = shop.code">
                    <div class="flex-items-center gap-12">
                        <div class="tiktok-logo flex-center w-40 h-40 round-8 bg-000 color-fff fs-26 font-bold">♪</div>
                        <div class="minw-0">
                            <div class="flex-items-center gap-8 font-bold">
                                {{ shop.name }}
                                <span class="shop-tag px-6 py-2 round-4 fs-12">{{ shop.type }}</span>
                            </div>
                            <div class="shop-code mt-8 fs-12">{{ shop.code }}</div>
                        </div>
                    </div>
                    <div class="flex-between gap-8 mt-16">
                        <el-button type="primary" @click.stop="analyzeShop(shop.code)" size="small">数据分析</el-button>
                        <el-button @click.stop="moreShopActions(shop.code)" size="small">更多操作</el-button>
                    </div>
                </div>
            </div>
        </el-card>

        <el-card class="report-card round-8" shadow="never">
            <div class="flex-between flex-wrap gap-12 pb-14">
                <span class="font-bold">数据概览</span>
                <div class="flex-items-center gap-12 flex-wrap">
                    <el-select v-model="selectedShop" class="w-180">
                        <el-option v-for="shop in shops" :key="shop.code" :label="shop.name" :value="shop.code" />
                    </el-select>
                    <el-segmented v-model="granularity" :options="granularityTabs" />
                    <el-select v-model="timezone" class="w-90">
                        <el-option label="GMT-8" value="GMT-8" />
                        <el-option label="GMT+8" value="GMT+8" />
                    </el-select>
                    <el-date-picker v-model="range" type="daterange" range-separator="至" start-placeholder="2025/04/15" end-placeholder="2025/04/15" />
                </div>
            </div>

            <div class="metric-grid">
                <div v-for="item in metrics" :key="item.label" class="metric-card minh-88 p-14 round-8">
                    <div class="metric-label fs-12">{{ item.label }}</div>
                    <div class="metric-value mt-8 fs-20 fw-800">{{ item.value }}</div>
                    <div class="metric-compare mt-8 fs-12">较上一周期 <span>--</span></div>
                </div>
            </div>
        </el-card>

        <el-card class="report-card round-8" shadow="never">
            <div class="flex-between flex-wrap gap-12 pb-14">
                <div class="flex-items-center gap-12">
                    <button v-for="item in tableTabs" :key="item" class="text-tab border-none bg-none font-bold pointer" :class="{ active: tableTab === item }" @click="tableTab = item">
                        {{ item }}
                    </button>
                </div>
                <el-button type="primary" @click="exportData">导出</el-button>
            </div>

            <SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10">
                <el-table-column label="店铺" align="center">
                    <el-table-column prop="name" label="名称" min-width="260" />
                    <el-table-column prop="code" label="code" min-width="180" />
                </el-table-column>
                <el-table-column label="Statements" align="center">
                    <el-table-column prop="statementProcessing" label="Processing 累计处理中" min-width="160" align="right" />
                    <el-table-column prop="statementPaid" label="Paid 总支付" min-width="150" align="right" />
                    <el-table-column prop="statementFailed" label="Failed 支付失败" min-width="150" align="right" />
                </el-table-column>
                <el-table-column label="Payouts" align="center">
                    <el-table-column prop="payoutPaid" label="Paid 总支付" min-width="150" align="right" />
                    <el-table-column prop="payoutProcessing" label="Processing 待入账" min-width="160" align="right" />
                    <el-table-column prop="payoutFailed" label="Failed 入账失败" min-width="150" align="right" />
                </el-table-column>
            </SeTable>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const expanded = ref(true);
const selectedShop = ref('USLCHNEAYD');
const granularity = ref('按日');
const timezone = ref('GMT-8');
const range = ref<[Date, Date] | ''>('');
const tableTab = ref('店铺数据');

const granularityTabs = ['按日', '按周', '按月'];
const tableTabs = ['店铺数据', '订单数据'];
const shops = [
    { name: 'SANDBOX7397710...', code: 'USLCHNEAYD', type: '本地' },
    { name: 'GLOBAL_STORE_UK_01', code: 'UK88291045', type: '跨境' },
];
const metrics = [
    { label: 'Statements-Processing', value: '$0' },
    { label: 'Statements-Paid', value: '$0' },
    { label: 'Statements-Failed', value: '$0' },
    { label: 'Payouts-Paid', value: '$0' },
    { label: 'Payouts-Processing', value: '$0' },
    { label: 'Payouts-Failed', value: '$0' },
    { label: '总订单数', value: '0' },
    { label: '总订单金额', value: '$0' },
    { label: '未支付订单数', value: '0' },
    { label: '未支付订单金额', value: '$0' },
    { label: '取消订单数', value: '0' },
    { label: '取消订单金额', value: '$0' },
    { label: '退货退款订单数', value: '0' },
    { label: '退货退款订单金额', value: '$0' },
];
const tableRows = [
    { name: 'SANDBOX7397710...', code: 'USLCHNEAYD', statementProcessing: '$0.00', statementPaid: '$0.00', statementFailed: '$0.00', payoutPaid: '$0.00', payoutProcessing: '$0.00', payoutFailed: '$0.00' },
    { name: 'GLOBAL_STORE_UK_01', code: 'UK88291045', statementProcessing: '$0.00', statementPaid: '$0.00', statementFailed: '$0.00', payoutPaid: '$0.00', payoutProcessing: '$0.00', payoutFailed: '$0.00' },
];

const authorizeShop = () => ElMessage.success('已打开店铺授权流程');
const analyzeShop = (code: string) => ElMessage.success(`正在分析店铺 ${code}`);
const moreShopActions = (code: string) => ElMessage.info(`已打开 ${code} 的更多操作`);
const exportData = () => ElMessage.success('已生成导出任务');
</script>

<style scoped lang="scss">
.report-card {
    border: 1px solid #dfe7f2;
}

.shop-card {
    flex: 0 0 calc((100% - 64px) / 5);
    border: 1px solid #eadffd;
    background: #faf7ff;

    &.selected {
        box-shadow: 0 0 0 1px rgba(var(--main-color), .45) inset;
    }
}


.tiktok-logo {
    flex-shrink: 0;
}

.minw-0 {
    min-width: 0;
}

.shop-tag {
    background: #d9fbe8;
    color: #00875a;
}

.shop-code {
    color: #607086;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    gap: 12px;
}

.metric-card {
    border: 1px solid #dfe7f2;
    background: #fbfdff;
}

.metric-label {
    color: #48607f;
}

.metric-value {
    color: #001a3d;
}

.metric-compare {
    color: #8aa0bf;
}

.text-tab {
    height: 34px;
    padding: 0;
    border-bottom: 2px solid transparent;
    color: #3f5574;

    &.active {
        color: rgba(var(--main-color), 1);
        border-bottom-color: rgba(var(--main-color), 1);
    }
}

.analysis-table {
    :deep(.el-table__header th) {
        background: #f5f5f5;
        color: #888;
        padding: 12px 0;
    }
}

@media (max-width: 1600px) {
    .shop-card {
        flex-basis: calc((100% - 48px) / 4);
    }
}

@media (max-width: 1000px) {
    .shop-card {
        flex-basis: calc((100% - 32px) / 3);
    }
}

@media (max-width: 1200px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}
</style>
