<template>
  <div>
    <div :id="domId" :style="{'width':'100%','height': height + 'px','padding-top':'15px','margin':'auto'}"></div>
  </div>
</template>

<script setup>
defineOptions({ name: 'low-code'})
import { ref, watch, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'
import { generateUUID } from "@/utils/index" 

const emit = defineEmits(['click'])
const props = defineProps({
  height: {
    type: [Number, String],
    default: 485
  },
  option: {
    type: [Object, Array],
    default: () => {}
  }
})

const domId = ref(generateUUID())
const chart = ref({})

const initMap = () => {
  chart.value = echarts.init(document.getElementById(domId.value), null, { renderer: 'svg' })
  chart.value.setOption(props.option)
  chart.value.on('click', (param) => {
    emit('click', param)
  })
  // window.addEventListener('resize',()=>{
  //   chart.value.resize()
  // })
}

onMounted(() => {
  nextTick(()=>{
    initMap()
  })
})

watch(
  () => props.option,
  () => {
    if(Object.keys(chart.value).length) {
      chart.value.dispose()
    }
    nextTick(()=>{
      initMap()
    })
  },
  { deep: true }
)
</script>

<style scoped lang="scss">

</style>
