<template>
    <div class="hc-echarts-box">
        <div :id="`${isKeyName}_echart`" ref="echart" class="hc-echarts" :style="`width : ${chart?.clientWidth}px`" />
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { getObjValue } from 'js-fast-way'
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({
    option: {
        type: [Object, String],
        default: () => ({}),
    },
    keyname: {
        type: [Number, String],
        default: '',
    },
})

//初始变量
let chart = null
const echart = ref(null)
const isKeyName = ref(props.keyname)
const options = ref(getObjValue(props.option))

//监听
watch(() => [
    props.keyname,
], ([keyname]) => {
    isKeyName.value = keyname
})

//深度监听
watch(() => [
    props.option,
], ([option]) => {
    options.value = getObjValue(option)
    setOptions(options.value)
}, { deep: true })

//初始化图表
const initChart = () => {
    chart = echarts.init(echart.value)
    setOptions(options.value)
}

//监听浏览器窗口变化
const windowResize = () => {
    window.addEventListener('resize', resizeEvent)
}

const resizeEvent = () => {
    window.requestAnimationFrame(() => {
        chart.resize()
    })
}

//设置图表
const setOptions = (option) => {
    chart.clear()
    nextTick(() => {
        chart.setOption(option)
    })
}

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

//被卸载
onUnmounted(() => {
    window.removeEventListener('resize', resizeEvent)
    chart.dispose()
    chart = null
})

const onResize = () => {
    nextTick(() => {
        chart.resize()
    })
}

const getImage = () => {
    return chart.getDataURL({
        type: 'png',
        pixelRatio: 2,
    })
}

// 暴露出去
defineExpose({
    onResize,
    getImage,
    setOptions,
})
</script>

<style lang="scss" scoped>
.hc-echarts-box {
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
    .hc-echarts {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
    }
}
</style>
