<template>
    <div class="time-line">
        <div class="line">
            <div :class="['dot-item']" v-for="(item, index) in list" :key="index">
                <template v-if="item.type === 0">
                    <div class="dot" :style="{ left: item.progress }"></div>
                    <span class="item-date" v-show="!item.isMiddle" :style="{ left: item.progress }">{{
                        item.createDate.slice(2, 7)
                    }}</span>
                </template>
                <span v-else class="jieqi" :style="{ left: item.progress }">{{ item.name }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onDeactivated, computed, watch, onMounted } from "vue";
import eventBus from "@/api/eventBus";

onMounted(() => {
    getList();
    eventBus.off("changeSelect", changeSelect);
    eventBus.on("changeSelect", changeSelect);
});

const year = ref("2021");
function changeSelect(data) {
    year.value = data;
    getList();
}

function markMiddleDates(data) {
    // 深拷贝原数组
    const result = JSON.parse(JSON.stringify(data));

    // 1. 找出所有节气的索引位置
    const solarTermIndices = [];
    result.forEach((item, index) => {
        if (item.type === 1) {
            solarTermIndices.push(index);
        }
    });

    // 2. 处理每个节气前后的普通日期
    solarTermIndices.forEach((currentIndex, i) => {
        // 前一个节气的索引
        const prevIndex = solarTermIndices[i - 1];
        // 后一个节气的索引
        const nextIndex = solarTermIndices[i + 1];

        // 处理当前节气前面的普通日期
        if (prevIndex !== undefined) {
            const start = prevIndex + 1;
            const end = currentIndex - 1;
            markMiddleInRange(result, start, end);
        }

        // 处理当前节气后面的普通日期
        if (nextIndex !== undefined) {
            const start = currentIndex + 1;
            const end = nextIndex - 1;
            markMiddleInRange(result, start, end);
        }
    });

    return result;
}

// 在指定范围内标记中间的普通日期
function markMiddleInRange(data, start, end) {
    // 筛选出type=0的日期
    const range = data.slice(start, end + 1).filter((item) => item.type === 0);
    if (range.length === 0) return;

    // 计算中间位置
    const middlePos = Math.floor(range.length / 2);
    // 在原数组中找到对应的索引
    const actualIndex = start + range[middlePos].__originalIndex;
    // 添加标记
    if (data[actualIndex]) {
        data[actualIndex].isMiddle = true;
    }
}

const getList = () => {
    // VE_API.spaceTime.sddSolarTrms({year:year.value}).then(res =>{
    // 首先给每个元素添加原始索引
    const res = {
        code: 0,
        msg: "success",
        data: [
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2020-12-30",
                progress: 0.0,
                type: 0,
            },
            {
                high: null,
                id: "3732",
                name: "小寒",
                createDate: "2021-01-06",
                progress: 1.93,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-01-13",
                progress: 3.86,
                type: 0,
            },
            {
                high: null,
                id: "3733",
                name: "大寒",
                createDate: "2021-01-20",
                progress: 5.79,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-01-28",
                progress: 7.99,
                type: 0,
            },
            {
                high: null,
                id: "3734",
                name: "立春",
                createDate: "2021-02-04",
                progress: 9.92,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-02-12",
                progress: 12.12,
                type: 0,
            },
            {
                high: null,
                id: "3735",
                name: "雨水",
                createDate: "2021-02-19",
                progress: 14.05,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-02-26",
                progress: 15.98,
                type: 0,
            },
            {
                high: null,
                id: "3736",
                name: "惊蛰",
                createDate: "2021-03-05",
                progress: 17.91,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-03-13",
                progress: 20.11,
                type: 0,
            },
            {
                high: null,
                id: "3737",
                name: "春分",
                createDate: "2021-03-20",
                progress: 22.04,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-03-28",
                progress: 24.24,
                type: 0,
            },
            {
                high: null,
                id: "3738",
                name: "清明",
                createDate: "2021-04-04",
                progress: 26.17,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-04-12",
                progress: 28.37,
                type: 0,
            },
            {
                high: null,
                id: "3739",
                name: "谷雨",
                createDate: "2021-04-19",
                progress: 30.3,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-04-28",
                progress: 32.78,
                type: 0,
            },
            {
                high: null,
                id: "3740",
                name: "立夏",
                createDate: "2021-05-05",
                progress: 34.71,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-05-14",
                progress: 37.19,
                type: 0,
            },
            {
                high: null,
                id: "3741",
                name: "小满",
                createDate: "2021-05-21",
                progress: 39.12,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-05-29",
                progress: 41.32,
                type: 0,
            },
            {
                high: null,
                id: "3742",
                name: "芒种",
                createDate: "2021-06-05",
                progress: 43.25,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-06-14",
                progress: 45.73,
                type: 0,
            },
            {
                high: null,
                id: "3743",
                name: "夏至",
                createDate: "2021-06-21",
                progress: 47.66,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-06-29",
                progress: 49.86,
                type: 0,
            },
            {
                high: null,
                id: "3744",
                name: "小暑",
                createDate: "2021-07-06",
                progress: 51.79,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-07-15",
                progress: 54.27,
                type: 0,
            },
            {
                high: null,
                id: "3745",
                name: "大暑",
                createDate: "2021-07-22",
                progress: 56.2,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-07-31",
                progress: 58.68,
                type: 0,
            },
            {
                high: null,
                id: "3746",
                name: "立秋",
                createDate: "2021-08-07",
                progress: 60.61,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-08-15",
                progress: 62.81,
                type: 0,
            },
            {
                high: null,
                id: "3747",
                name: "处暑",
                createDate: "2021-08-22",
                progress: 64.74,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-08-31",
                progress: 67.22,
                type: 0,
            },
            {
                high: null,
                id: "3748",
                name: "白露",
                createDate: "2021-09-07",
                progress: 69.15,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-09-15",
                progress: 71.35,
                type: 0,
            },
            {
                high: null,
                id: "3749",
                name: "秋分",
                createDate: "2021-09-22",
                progress: 73.28,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-10-01",
                progress: 75.76,
                type: 0,
            },
            {
                high: null,
                id: "3750",
                name: "寒露",
                createDate: "2021-10-08",
                progress: 77.69,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-10-16",
                progress: 79.89,
                type: 0,
            },
            {
                high: null,
                id: "3751",
                name: "霜降",
                createDate: "2021-10-23",
                progress: 81.82,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-10-31",
                progress: 84.02,
                type: 0,
            },
            {
                high: null,
                id: "3752",
                name: "立冬",
                createDate: "2021-11-07",
                progress: 85.95,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-11-15",
                progress: 88.15,
                type: 0,
            },
            {
                high: null,
                id: "3753",
                name: "小雪",
                createDate: "2021-11-22",
                progress: 90.08,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-11-29",
                progress: 92.01,
                type: 0,
            },
            {
                high: null,
                id: "3754",
                name: "大雪",
                createDate: "2021-12-06",
                progress: 93.94,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-12-14",
                progress: 96.14,
                type: 0,
            },
            {
                high: 1,
                id: "3755",
                name: "冬至",
                createDate: "2021-12-21",
                progress: 98.07,
                type: 1,
            },
            {
                high: 0,
                id: null,
                name: "",
                createDate: "2021-12-28",
                progress: 100.0,
                type: 0,
            },
        ],
        extData: null,
        success: true,
    };
    const dataWithIndex = JSON.parse(JSON.stringify(res.data));
    dataWithIndex.forEach((item, index) => {
        item.__originalIndex = index;
    });

    // 执行标记
    const markedData = markMiddleDates(dataWithIndex);
    list.value = markedData || [];
    // })
};

const active = ref(0);
const list = ref([]);
</script>

<style lang="scss" scoped>
.time-line {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 15px;
    .line {
        background: rgba(255, 255, 255, 0.5);
        border-radius: 2px;
        width: 100%;
        height: 3px;
        display: flex;
        justify-content: space-between;
        position: relative;
        left: 10px;
        z-index: 2;
        .dot-item {
            color: #fff;
            font-size: 14px;
            .dot {
                width: 8px;
                height: 8px;
                background: #e6e6e6;
                border-radius: 50%;
                margin: -2.2px 0 6px 0;
                position: relative;
                &::after {
                    content: "";
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    border: 2px solid rgba(255, 255, 255, 0.2);
                }
            }
            .item-date {
                position: absolute;
                margin-left: -16px;
            }
            .jieqi {
                position: absolute;
                top: -30px;
            }
        }
    }
}
</style>
