<template>
    <div class="order-trend-chart">
        <div class="chart-header">
            <div class="title">订单数量</div>
            <div class="legend">
                <!-- Custom Legend if needed, or rely on ECharts legend -->
            </div>
        </div>
        <div class="chart-container">
            <base-chart :option="chartOption" />
        </div>
    </div>
</template>

<script setup>
    import { computed } from 'vue';
    import BaseChart from '@/components/Chart/BaseChart.vue';

    const props = defineProps({
        chartData: {
            type: Object,
            default: () => ({
                dates: [],
                orderCount: [],
                paymentAmount: [],
                conversionRate: [],
                refundAmount: []
            })
        }
    });

    const chartOption = computed(() => ({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['订单数', '支付金额', '转化率', '退款金额'],
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.chartData.dates
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '订单数',
                type: 'line',
                smooth: true,
                data: props.chartData.orderCount,
                itemStyle: { color: '#5b8ff9' }
            },
            {
                name: '支付金额',
                type: 'line',
                smooth: true,
                data: props.chartData.paymentAmount,
                itemStyle: { color: '#5ebcb9' }
            },
            {
                name: '转化率',
                type: 'line',
                smooth: true,
                data: props.chartData.conversionRate,
                itemStyle: { color: '#4caf50' }
            },
            {
                name: '退款金额',
                type: 'line',
                smooth: true,
                data: props.chartData.refundAmount,
                itemStyle: { color: '#ff9800' }
            }
        ]
    }));
</script>

<style scoped lang="scss">
    .order-trend-chart {
        background: #fff;
        padding: 20px 0;
        margin-bottom: 20px;

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;

            .title {
                font-size: 16px;
                font-weight: bold;
                color: #333;
            }
        }

        .chart-container {
            height: 350px;
        }
    }
</style>
