<template>
    <ele-page>
        <ele-card :body-style="{ padding: '20px' }">
            <!-- Filters -->
            <div class="filter-container">
                <div class="date-ranges">
                    <el-button-group>
                        <el-button type="primary">实时</el-button>
                        <el-button>昨日</el-button>
                        <el-button>7日</el-button>
                        <el-button>15日</el-button>
                        <el-button>30日</el-button>
                    </el-button-group>
                </div>
                <div class="date-picker-wrapper">
                    <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        range-separator="到"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        size="default"
                    />
                </div>
                <el-button type="primary" class="search-btn">搜索</el-button>
                <el-button>重置</el-button>
            </div>

            <!-- Stats Cards -->
            <sales-stat-cards
                :status-data="statusData"
                :sales-data="salesData"
            />

            <!-- Order Trend Chart -->
            <order-trend-chart :chart-data="trendChartData" />

            <!-- Distribution Charts -->
            <distribution-charts
                :payment-data="paymentMethodData"
                :status-data="orderStatusData"
            />

            <!-- Refund Stats -->
            <refund-stats :refund-data="refundData" />
        </ele-card>
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import SalesStatCards from './components/SalesStatCards.vue';
    import OrderTrendChart from './components/OrderTrendChart.vue';
    import DistributionCharts from './components/DistributionCharts.vue';
    import RefundStats from './components/RefundStats.vue';

    const dateRange = ref([]);

    // Mock Data
    const statusData = [
        { label: '待付款', value: 11 },
        { label: '待发货', value: 11 },
        { label: '待售后', value: 11 },
        { label: '待处理投诉', value: 11 }
    ];

    const salesData = [
        { label: '支付金额', value: '55366', yesterdayValue: '53669' },
        { label: '访客数', value: '55366', yesterdayValue: '53669' },
        { label: '支付订单数', value: '55366', yesterdayValue: '53669' },
        { label: '支付转化率', value: '55366', yesterdayValue: '53669' },
        { label: '商品浏览量', value: '55366', yesterdayValue: '53669' },
        { label: '客单价', value: '55366', yesterdayValue: '53669' },
        { label: '支付买家数', value: '55366', yesterdayValue: '53669' },
        { label: '加购商品数', value: '55366', yesterdayValue: '53669' },
        { label: '收藏商品数', value: '55366', yesterdayValue: '53669' },
        { label: '在途订单数', value: '55366', yesterdayValue: '53669' },
        { label: '在途金额', value: '55366', yesterdayValue: '53669' },
        { label: '老客复购率', value: '55366', yesterdayValue: '53669' },
        { label: '老客复购金额', value: '55366', yesterdayValue: '53669' },
        { label: '老客复购人数', value: '55366', yesterdayValue: '53669' },
        { label: '净支付金额', value: '55366', yesterdayValue: '53669' }
    ];

    const trendChartData = reactive({
        dates: [
            '15日',
            '16日',
            '17日',
            '18日',
            '19日',
            '20日',
            '21日',
            '22日',
            '23日',
            '24日',
            '25日',
            '26日',
            '27日'
        ],
        orderCount: [
            100, 120, 200, 100, 130, 150, 180, 220, 150, 170, 110, 160, 210
        ],
        paymentAmount: [
            150, 100, 230, 110, 100, 170, 210, 110, 108, 150, 190, 180, 170
        ],
        conversionRate: [
            150, 130, 180, 150, 210, 210, 210, 220, 180, 130, 160, 180, 170
        ],
        refundAmount: [
            160, 220, 230, 160, 210, 150, 160, 150, 170, 200, 170, 220, 100
        ]
    });

    const paymentMethodData = [
        { value: 100, name: '微信支付', itemStyle: { color: '#5b8ff9' } },
        { value: 150, name: '支付宝支付', itemStyle: { color: '#5ebcb9' } },
        { value: 224, name: '余额支付', itemStyle: { color: '#4caf50' } }
    ];

    const orderStatusData = [
        { value: 122, name: '待发货', itemStyle: { color: '#ff9800' } },
        { value: 150, name: '已退款', itemStyle: { color: '#5ebcb9' } },
        { value: 170, name: '待收货', itemStyle: { color: '#4caf50' } },
        { value: 174, name: '已取消', itemStyle: { color: '#f44336' } },
        { value: 175, name: '已完成', itemStyle: { color: '#e91e63' } },
        { value: 100, name: '已发货', itemStyle: { color: '#5b8ff9' } }
    ];

    const refundData = [
        {
            title: '全部',
            refundUsers: 2720,
            subOrders: 3089,
            refundRate: '10.63%',
            refundAmount: 36738.53,
            amountRate: '11.03%'
        },
        {
            title: '退货退款',
            refundUsers: 339,
            subOrders: 354,
            refundRate: '1.22%',
            refundAmount: 36738.53,
            amountRate: '11.03%'
        },
        {
            title: '已收货退款',
            refundUsers: 28,
            subOrders: 3089,
            refundRate: '10.63%',
            refundAmount: 36738.53,
            amountRate: '11.03%'
        },
        {
            title: '未收货退款',
            refundUsers: 2720,
            subOrders: 3089,
            refundRate: '10.63%',
            refundAmount: 36738.53,
            amountRate: '11.03%'
        },
        {
            title: '未发货退款',
            refundUsers: 2720,
            subOrders: 3089,
            refundRate: '10.63%',
            refundAmount: 36738.53,
            amountRate: '11.03%'
        }
    ];
</script>

<style scoped lang="scss">
    .filter-container {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .date-ranges {
            margin-right: 15px;
        }

        .date-picker-wrapper {
            margin-right: 15px;
        }
    }
</style>
