<template>
  <div :id="'chart-worker' + id" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: "ChartWorker"
}
</script>
<script setup>
import { watch, onMounted, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance()

const props = defineProps({
  id: {
    type: Number,
    default: 0
  },
  data: {
    type: Object,
    default: () => {
      return {
        unit: '',
        list: []
      }
    }
  }
})
const emit = defineEmits();
let myChart = null
watch(() => props.data.list, () => {
  myChart.clear()
  init()
}, { deep: true })

const init = () => {
  let data = []
  if(props.data.list.length > 0) {
    props.data.list.forEach(item => {
      item.value = item.total
    })
    data = props.data.list
  }
  let options = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      left: 'center'
    },
    color: ['#EE752F', '#5894FF', '#F2BD42', '#72CDD7', '#60B565'],
    series: [
      {
        name: '',
        type: 'pie',
        radius: '60%',
        data: data
      }
    ]
  }
  myChart.setOption(options)
  myChart.off('click')
  myChart.on('click', function(params) {
    emit('onClick', params.data)
  })
}

onMounted(() => {
  myChart = proxy.$echarts.init(document.getElementById('chart-worker' + props.id))
  init()
})
</script>

<style scoped>

</style>
