<template>
    <ele-modal
        :width="800"
        title="历史库存周转率"
        v-model="visible"
        :body-style="{ padding: '20px' }"
    >
        <div style="height: 400px">
            <v-chart ref="chartRef" :option="option" autoresize />
        </div>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, defineExpose } from 'vue';
    import { useEcharts } from '@/utils/use-echarts';
    import VChart from 'vue-echarts';
    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { LineChart } from 'echarts/charts';
    import {
        GridComponent,
        TooltipComponent,
        LegendComponent,
        TitleComponent
    } from 'echarts/components';

    use([
        CanvasRenderer,
        LineChart,
        GridComponent,
        TooltipComponent,
        LegendComponent,
        TitleComponent
    ]);

    const visible = defineModel({ type: Boolean });
    const chartRef = ref(null);

    useEcharts([chartRef]);

    const option = reactive({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['历史周转率', '平均库存', '剩余可卖天数', '销量'],
            bottom: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            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, 132, 101, 134, 90, 230, 150]
            },
            {
                name: '平均库存',
                type: 'line',
                smooth: true,
                data: [150, 182, 191, 234, 100, 160, 110]
            },
            {
                name: '剩余可卖天数',
                type: 'line',
                smooth: true,
                data: [100, 100, 120, 140, 140, 190, 180]
            },
            {
                name: '销量',
                type: 'line',
                smooth: true,
                data: [200, 130, 145, 145, 230, 105, 180]
            }
        ]
    });

    const setData = (row) => {
        // Here you would fetch real data based on row.isbn or similar
        console.log('Viewing history for:', row);
    };

    defineExpose({ setData });
</script>
