<template>
    <div ref="chartRef" :style="{ height: height, width: width }" />
</template>

<script setup>
import { getCurrentInstance, watch, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import theme from '../theme/theme.json'
echarts.registerTheme('theme', theme)
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([CanvasRenderer])
const { proxy } = getCurrentInstance()
const chartRef = ref(null)
const props = defineProps({
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '350px'
    }
})
let options = {
    title: {
        text: '',
        left: 'left'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        boundaryGap: true,
        axisTick: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show: false
        }
    },
    // 图例
    legend: {
        type: 'scroll',
        top: 'top',
        width: '70%',
        left: '20%'
    },
    series: [
        {
            name: '',
            type: 'line',
            smooth: false,
            data: [1, 2, 3, 4, 5, 6, 7],
            label: {
                show: true,
                position: 'top',
                textBorderColor: '#fff',
                textBorderWidth: 0,
                color: '#fff'
            }
        }
    ]
}

const chart = ref(null)
function initChart() {
    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
    chart.value.setOption(options)
}
onMounted(() => {
    initChart()
    window.addEventListener('resize', () => {
        chart.value?.resize()
    })
})
/// ============ 修改数据 ===========
import { getFaultTypeLine } from '@/api/smartScreen/DeviceScreen/index.js'
function updateData() {
    const param = {
        devicetTypeId: 1,
        searchTime: [proxy.dayjs().startOf('month'), proxy.dayjs().endOf('month')]
    }
    getFaultTypeLine(param).then((res) => {
        if (res.code === 200) {
            options.xAxis.data = res.data.xData
            options.series = res.data.seriesData
            chart.value?.setOption(options)
            chart.value?.resize()
        }
    })
}
function handleQuery() {
    updateData()
}
handleQuery()
let timer1 = null
const clearSearchTimer = () => {
    clearInterval(timer1)
    timer1 = null
}
const createSearchTimer = () => {
    clearSearchTimer()
    timer1 = setInterval(() => {
        handleQuery()
    }, 1000 * 60 * 5)
}
onMounted(() => {
    createSearchTimer()
})
onUnmounted(() => {
    clearSearchTimer()
})
/// ==========================================
</script>
