<template>
    <div class="card-chart" ref="chartRef"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { galleryLine } from "./chartSeting";
import { deepClone } from "@/common/commonFun";

const props = defineProps({
    indexName: {
        type: String,
        default: "",
    },
    type: {
        type: String,
        default: "",
    },
    chartData: {
        type: Array,
        default: () => [],
    },
});

let myChart = null;
const chartRef = ref();

let chartDataArr = ref([
    { date: "9/1", value: 40 },
    { date: "9/7", value: 60 },
    { date: "9/13", value: 63 },
    { date: "9/19", value: 68 },
    { date: "9/25", value: 80, feature: true },
    { date: "10/1", value: 85, feature: true },
    { date: "10/7", value: 88, feature: true },
]);

onMounted(() => {
    myChart = echarts.init(chartRef.value);
    const options = deepClone(galleryLine);
    options.yAxis.name = props.indexName;

    if (props.type === "feature") {
        processData();

        // 数据处理
        let currentData = [];
        let forecastData = [];

        props.chartData.forEach((item) => {
            if (item.feature) {
                forecastData.push([item.date, Number(item.value)]);
            } else {
                currentData.push([item.date, Number(item.value)]);
            }
        });
        // 追加实际数据的最后一组数据
        forecastData.unshift(currentData[currentData.length - 1]);

        options.series = [
            {
                name: "",
                type: "line",
                data: currentData, // 取前四天（包括当天）的数据
                lineStyle: {
                    type: "solid", // 这里可以省略，因为我们在下面通过itemStyle为每个点设置样式时会更具体
                },
                itemStyle: {
                    color: "#FFD489", // 设置数据点颜色为红色
                },
                
                // markPoint: {
                //     symbolSize: [0, 0],
                //     data: [
                //         {
                //             name: "mark",
                //             xAxis: "1/1",
                //             yAxis: 3,
                //             value: "",
                //             label: {
                //                 offset: [0, -22],
                //                 backgroundColor: {
                //                     image: "data:image/png;base64, ",
                //                 },
                //                 width: 36,
                //                 height: 38,
                //             },
                //             },
                //     ]
                // }
            },
            {
                name: "",
                type: "line",
                data: forecastData, // 取后三天的数据
                itemStyle: {
                    color: "#CECECE", // 设置数据点颜色
                },
                lineStyle: {
                    type: "dashed", // 设置线条为虚线
                    width: 2, // 设置线条宽度
                    color: "#CECECE", // 设置线条颜色
                },
            },
        ];
    } else {
        // 完成农事
        let seriesData = props.chartData.map((m) => {
            return Number(m.value);
        });

        options.series = [
            {
                data: seriesData,
                type: "line",
                symbolSize: 6,
                itemStyle: {
                    color: "#FFD489", // 设置数据点颜色为红色
                },
            },
        ];
    }

    let labels = props.chartData.map((m) => {
        return m.date;
    });

    options.xAxis.data = labels;
    // if (props.type === "normal") {
    //     options.series = [
    //         {
    //             data: [40, 58, 62, 64, 68, 74, 80],
    //             type: "line",
    //             symbolSize: 6,
    //             itemStyle: {
    //                 color: "#2199F8", // 设置数据点颜色为红色
    //             },
    //         },
    //     ];
    // } else {
    //     // options.series = [
    //     //     {
    //     //         data: [40, 58, 62, 64, 68, 74, 80],
    //     //         type: "line",
    //     //         symbolSize: 6,

    //     //         itemStyle: {
    //     //             color: "#CECECE", // 设置数据点颜色
    //     //         },
    //     //         lineStyle: {
    //     //             type: "dashed", // 设置线条为虚线
    //     //             width: 2, // 设置线条宽度
    //     //             color: "#CECECE", // 设置线条颜色
    //     //         },
    //     //     },
    //     // ];
    //     options.series = [
    //         {
    //             name: "实线数据",
    //             type: "line",
    //             data: currentData, // 取前四天（包括当天）的数据
    //             lineStyle: {
    //                 type: "solid", // 这里可以省略，因为我们在下面通过itemStyle为每个点设置样式时会更具体
    //             },
    //             itemStyle: {
    //                 color: "#2199F8", // 设置数据点颜色为红色
    //             },
    //         },
    //         {
    //             name: "虚线数据",
    //             type: "line",
    //             data: forecastData, // 取后三天的数据
    //             itemStyle: {
    //                 color: "#CECECE", // 设置数据点颜色
    //             },
    //             lineStyle: {
    //                 type: "dashed", // 设置线条为虚线
    //                 width: 2, // 设置线条宽度
    //                 color: "#CECECE", // 设置线条颜色
    //             },
    //         },
    //     ];
    // }
    myChart.setOption(options);
});

const processData = () => {
    const today = new Date();
    const todayString = today.toISOString().split("T")[0]; // 获取今天的日期，格式为YYYY-MM-DD
    const datePattern = /(\d+)\/(\d+)/; // 日期格式匹配，假设为MM/DD

    props.chartData.forEach((item) => {
        const match = item.date.match(datePattern);
        if (match) {
            const month = parseInt(match[1], 10);
            const day = parseInt(match[2], 10);
            const itemDate = new Date(today.getFullYear(), month - 1, day); // 月份从0开始，所以需要减1
            if (itemDate > today) {
                item.feature = true;
            }
        }
    });
};
</script>

<style lang="scss" scoped>
.card-chart {
    padding: 8px 4px 0 4px;
    width: 100%;
    height: 130px;
    box-sizing: border-box;
}
</style>
