<template>
    <div :style="height">
        <MyEchart v-if="list.length != 0" :options="options1" style="height: 100%; width: 100%" class="pt10" />
        <el-empty description="暂无数据" style="width: 100%; height: 100%" v-else></el-empty>
    </div>
</template>

<script setup lang="ts">
import MyEchart from '@/components/echarts/MyEchart.vue'
import { ref, reactive } from 'vue'
import { mainHeight } from '@/utils/layout'
import { max } from 'lodash'
const height = ref(mainHeight(290))
const list = ref([])
const options1 = ref({})
const setData = (data: any) => {
    // list.value = [...fillDataFromFirstTime(data),...data]
    list.value = data
    init()
}
/**
 * 补全离散数据（严格从数组第一个time开始，最后一个time结束）
 * @param {Array} data 原始离散数据数组
 * @param {number} interval 补全时间间隔（秒，默认10秒）
 * @returns {Array} 补全后的连续数据
 */
function fillDataFromFirstTime(data, interval = 10) {
    // 1. 基础校验
    if (!Array.isArray(data) || data.length === 0) {
        console.error('原始数据必须是非空数组')
        return []
    }

    // 2. 锁定起始时间：直接取数组第一个元素的time（不做任何偏移）
    const firstItem = data[0]
    const startTime = new Date(firstItem.time)
    const startTimestamp = startTime.getTime()

    // 3. 锁定结束时间：取数组最后一个元素的time
    const lastItem = data[data.length - 1]
    const endTime = new Date(lastItem.time)
    const endTimestamp = endTime.getTime()

    // 4. 预处理：按时间排序（防止原始数据乱序）
    const sortedData = [...data].sort((a, b) => new Date(a.time) - new Date(b.time))

    // 5. 初始化状态（继承第一个数据的type）
    let currentType = firstItem.type
    let currentDesc = firstItem.description
    let nextStatusIndex = 1 // 指向待切换的下一个状态点

    const filledData = []

    // 6. 核心循环：从第一个time开始，按间隔补全到最后一个time
    for (let ts = startTimestamp; ts <= endTimestamp; ts += interval * 1000) {
        const currentDate = new Date(ts)
        // 格式化时间为和原始数据一致的 "YYYY-MM-DD HH:mm:ss" 格式
        const formattedTime = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(
            2,
            '0'
        )}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(
            2,
            '0'
        )}:${String(currentDate.getMinutes()).padStart(2, '0')}:${String(currentDate.getSeconds()).padStart(2, '0')}`

        // 7. 检查是否到达下一个状态切换点
        if (nextStatusIndex < sortedData.length) {
            const nextStatusTime = new Date(sortedData[nextStatusIndex].time).getTime()
            if (ts >= nextStatusTime) {
                currentType = sortedData[nextStatusIndex].type
                currentDesc = sortedData[nextStatusIndex].description
                nextStatusIndex++
            }
        }

        // 8. 生成补全数据项（结构与原始数据完全一致）
        filledData.push({
            time: formattedTime,
            devId: firstItem.devId,
            description: currentDesc,
            type: currentType
        })
    }

    return filledData
}

const COLOR_NORMAL = '#2ab914'
const COLOR_INTERRUPT = '#e26257'

/** 分段着色：水平段用当前状态色，切换垂直段用目标状态色 */
const buildColoredStepSeries = (data: any[]) => {
    const points = data.map((item: any) => [item.time, item.type == 0 ? 1 : 10])
    if (points.length === 0) return []

    const series: any[] = []
    let i = 0

    while (i < points.length) {
        const value = points[i][1]
        const color = value === 1 ? COLOR_INTERRUPT : COLOR_NORMAL
        const segment: any[] = []

        // 垂直切换段由目标状态 series 绘制（正常→中断红线，中断→正常绿线）
        if (i > 0 && points[i][1] !== points[i - 1][1]) {
            segment.push([points[i][0], points[i - 1][1]])
        }

        segment.push(points[i])
        let j = i + 1

        while (j < points.length && points[j][1] === value) {
            segment.push(points[j])
            j++
        }

        // 仅水平延伸到切换时刻，垂直段由下一段绘制
        if (j < points.length) {
            segment.push([points[j][0], value])
        }

        series.push({
            name: '运行数据',
            type: 'line',
            step: 'end',
            showSymbol: false,
            data: segment,
            lineStyle: { color, width: 2 }
        })

        i = j
    }

    return series
}

const getStatusText = (val: number | string) => {
    if (val === 1 || val === '1') return '中断'
    if (val === 10 || val === '10') return '正常'
    return ''
}

const init = () => {
    options1.value = {
        title: {
            text: '运行数据'
        },
        legend: {
            show: false
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params: any) {
                const items = (Array.isArray(params) ? params : [params]).filter(p => p?.data?.[1] != null)
                if (!items.length) return ''
                // 切换节点取目标状态（后一段 series 的值）
                const item = items[items.length - 1]
                const val = item.data[1]
                return `${item.data[0]}<br/>运行数据：${getStatusText(val)}`
            }
        },
        xAxis: {
            // type: 'category',
            // data: data.updateTime
            type: 'time',
            name: '时间',
            //
            axisLabel: {
                formatter: {
                    day: '{MM}-{dd}',
                    month: '{MM}',
                    year: '{yyyy}'
                }
            }
        },
        yAxis: {
            name: '',
            type: 'value',
            max: 11,
            interval: 1,
            splitLine: {
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['#ccc'],
                    type: 'dashed',
                    opacity: 0
                }
            },
            axisLabel: {
                // 这里重新定义就可以
                formatter: function (value: number) {
                    var texts = []
                    if (value === 1) {
                        texts.push('中断')
                    } else if (value === 10) {
                        texts.push('正常')
                    }
                    return texts
                }
            }
        },
        dataZoom:  [
            {
                type: 'inside',
                height: 13,
                start: 70,

                bottom: '20px',
                end: 100,
                filterMode: 'none'
            },
            {
                start: 0,
                height: 13,
                bottom: '20px',
                end: 100,
                filterMode: 'none'
            }],
        series: buildColoredStepSeries(list.value)
    }
}
defineExpose({
    setData
})
</script>
<style lang="scss" scoped></style>
