<template>
    <echartsBase ref="echart" :option="setOption" />
</template>

<script setup>
import * as echarts from 'echarts'
import echartsBase from '~com/echarts/index.vue'
import { nextTick, onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { getObjValue } from 'js-fast-way'
const props = defineProps({
    unit: {
        type: String,
        default: '°C',
    },
    datas: {
        type: Object,
        default: () => ({ name: '', date: [], data: [] }),
    },
})

const appStore = useAppStore()

const echartDatas = ref(props.datas)
const echartUnit = ref(props.unit)

//渲染完成
onMounted(() => {
    nextTick(() => {
        setOptions()
    })
})

//深度监听
watch(() => [
    props.unit,
    props.datas,
], ([unit, datas]) => {
    echartUnit.value = unit
    echartDatas.value = getObjValue(datas)
    setOptions()
}, { deep: true })

//监听
watch(() => [
    appStore.isEchartSize,
], ([isSize]) => {
    if (isSize) {
        echart.value?.onResize()
    }
})

//图表配置
const colors = '#09c', colora = '#214568'
const echart = ref(null)
const setOption = ref({})
const setOptions = () => {
    const { name, date, data } = echartDatas.value
    setOption.value = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#356280',
                },
                lineStyle: {
                    type: 'solid',
                    color: '#09c',
                },
            },
            backgroundColor: 'rgba(0,0,0,.5)',
            borderWidth: 0,
            textStyle: {
                color: '#fff',
            },
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none',
                },
                saveAsImage: {},
            },
        },
        legend: {
            data: [name],
            textStyle: {
                color: colors,
            },
        },
        grid: {
            show: true,
            borderWidth: 1,
            bottom: 90,
            borderColor: colora,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date,
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: colora,
                },
            },
            axisLabel: {
                color: colors,
            },
        },
        yAxis: {
            name: echartUnit.value,
            type: 'value',
            boundaryGap: [0, '30%'],
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: colora,
                },
            },
            nameTextStyle: {
                color: colors,
            },
            axisLabel: {
                color: colors,
            },
        },
        dataZoom: [
            {
                start: 0,
                end: 100,
                borderColor: 'transparent',
                backgroundColor: '#223654',
                fillerColor: 'rgba(3, 197, 194, .2)',
                brushSelect: false,
                textStyle: {
                    color: colors,
                },
            },
        ],
        series: [
            {
                name: name,
                type: 'line',
                stack: 'Total',
                emphasis: {
                    focus: 'series',
                },
                itemStyle: {
                    color: '#03C5C2',
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(3, 197, 194, 0.5)',
                        },
                        {
                            offset: 1,
                            color: 'transparent',
                        },
                    ]),
                },
                data: data,
                tooltip: {
                    valueFormatter(value) {
                        return value + echartUnit.value
                    },
                },
            },
        ],
    }
}
</script>
