<template>
    <el-dialog
        v-model="visible"
        :title="title"
        width="800px"
        @close="handleClose"
    >
        <div class="modal-content">
            <!-- Trend Section -->
            <div class="section">
                <div class="chart-wrapper">
                    <base-chart :option="trendOption" />
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
    import { ref, computed, watch } from 'vue';
    import { DataLine } from '@element-plus/icons-vue';
    import BaseChart from '@/components/Chart/BaseChart.vue';

    const props = defineProps({
        modelValue: Boolean,
        rowData: Object
    });

    const emit = defineEmits(['update:modelValue']);

    const visible = ref(false);

    watch(
        () => props.modelValue,
        (val) => {
            visible.value = val;
        }
    );

    const handleClose = () => {
        emit('update:modelValue', false);
    };

    const title = computed(() => {
        return props.rowData
            ? `搜索词详情: ${props.rowData.term} - 趋势`
            : '趋势详情';
    });

    // Mock Trend Data
    const trendOption = computed(() => ({
        tooltip: { trigger: 'axis' },
        legend: { top: 0 },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                '09-07',
                '09-08',
                '09-10',
                '09-11',
                '09-12',
                '09-13',
                '09-14'
            ]
        },
        yAxis: { type: 'value' },
        series: [
            {
                name: '搜索次数',
                type: 'line',
                smooth: true,
                data: [100, 120, 300, 100, 130, 210, 150],
                itemStyle: { color: '#5b8ff9' }
            },
            {
                name: '加购人数',
                type: 'line',
                smooth: true,
                data: [150, 100, 200, 140, 100, 160, 110],
                itemStyle: { color: '#5ebcb9' }
            },
            {
                name: '商品收藏人数',
                type: 'line',
                smooth: true,
                data: [150, 180, 110, 150, 200, 160, 220],
                itemStyle: { color: '#4caf50' }
            },
            {
                name: '支付买家数',
                type: 'line',
                smooth: true,
                data: [100, 110, 220, 140, 150, 160, 130],
                itemStyle: { color: '#ffc107' }
            },
            {
                name: '支付转化率',
                type: 'line',
                smooth: true,
                data: [100, 100, 120, 140, 140, 190, 180],
                itemStyle: { color: '#ff5722' }
            }
        ]
    }));
</script>

<style scoped lang="scss">
    .section {
        .chart-wrapper {
            height: 300px;
            background: #fafafa;
            padding: 10px;
            border-radius: 4px;
        }
    }
</style>
