<template>
  <m-card title="重点工作" class="box" :mode="mode">
    <div v-if="show" ref="cloudRef" class="cloud" :style="`height:${height}`" />
  </m-card>
</template>

<script lang="ts">
import {
  defineComponent,
  watch,
  computed,
  ref,
  onMounted,
  PropType,
  nextTick,
  onBeforeUnmount,
} from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default defineComponent({
  name: 'KeyTask',
  props: {
    mode: {
      type: String as PropType<string>,
      default: '2',
    },
    height: {
      type: String as PropType<string>,
      default: '2rem',
    },
    color: {
      type: Array as PropType<string[]>,
      default: () => {
        return [
          '#3a96f5',
          '#5faaf7',
          '#78bafe',
          '#1563f2',
          '#add2f8',
          '#e24bf4',
          '#1acaff',
          '#ffde00',
          '#89fda5',
        ]
      },
    },
    data: {
      type: Array as PropType<{ name: string; value: number }[]>,
      default: () => {
        return [
          { name: '明厨亮灶', value: 100 },
          { name: '民宿群租', value: 100 },
          { name: '垃圾分类', value: 100 },
          { name: '小型工程纳管', value: 100 },
          { name: '非机动车停放', value: 100 },
          { name: '马桶改造', value: 100 },
          { name: '电梯加装', value: 100 },
          { name: '居改非', value: 100 },
          { name: '无证无照整治', value: 100 },
          { name: '楼道堆物', value: 100 },
        ]
      },
    },
    show: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    bg: {
      type: String as PropType<string>,
      default: '#000',
    },
  },
  setup(props) {
    const cloudRef = ref<HTMLElement | null>(null)
    const sizeRate = computed(() => Math.floor((screen.height * 1.6) / 100))
    onMounted(() => {
      window.addEventListener('resize', init)
      window.addEventListener('orientationchange', init)
    })
    onBeforeUnmount(() => {
      window.removeEventListener('resize', init)
      window.removeEventListener('orientationchange', init)
    })
    const init = () => {
      if (!cloudRef.value) return
      const myChart = echarts.init(cloudRef.value)
      const option = {
        tooltip: {
          show: false,
        },
        backgroundColor: props.bg,
        series: [
          {
            type: 'wordCloud',
            sizeRange: [sizeRate.value, sizeRate.value * 2.2],
            rotationRange: [0, 0],
            rotationStep: 90,
            gridSize: sizeRate.value,
            shape: 'pentagon',
            width: '100%',
            height: '100%',
            textStyle: {
              color: function () {
                const index = Math.floor(Math.random() * props.color.length)
                return props.color[index]
              },
              fontWeight: 550,
            },
            data: props.data,
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      myChart.resize()
    }

    watch(
      () => props.show,
      async (type) => {
        if (!type) return
        await nextTick()
        init()
      },
      { immediate: true }
    )
    return {
      cloudRef,
    }
  },
})
</script>

<style lang="stylus" scoped>
.cloud
  width 100%
  box-sizing border-box
  overflow hidden
</style>
