<template>
  <m-card title="重点工作" class="box" :mode="mode" :no-bg="false">
    <div v-if="show" ref="cloudRef" class="cloud" />
  </m-card>
</template>

<script lang="ts">
import {
  defineComponent,
  watch,
  computed,
  shallowRef,
  onMounted,
  PropType,
  nextTick,
  onBeforeUnmount,
} from 'vue'
import { init as initChart, ECharts } from 'echarts/core'
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 * Math.random() },
          { name: '民宿群租', value: 100 * Math.random() },
          { name: '垃圾分类', value: 120 },
          { name: '小型工程纳管', value: 100 * Math.random() },
          { name: '非机动车停放', value: 100 * Math.random() },
          { name: '马桶改造', value: 100 * Math.random() },
          { name: '电梯加装', value: 100 * Math.random() },
          { name: '居改非', value: 100 * Math.random() },
          { name: '无证无照整治', value: 100 * Math.random() },
          { name: '楼道堆物', value: 100 * Math.random() },
          { name: '党建联建', value: 100 * Math.random() },
          { name: '动迁改造', value: 100 * Math.random() },
          { name: '文明城区创建', value: 120 },
          // { name: '重塑老城厢', value: 100 * Math.random() },
          { name: '推动商旅文联动', value: 100 * Math.random() },
          { name: '水环境治理', value: 100 * Math.random() },
          { name: '供水防涝', value: 100 * Math.random() },
          { name: '美丽街区', value: 100 * Math.random() },
          { name: '美丽家园', value: 100 * Math.random() },
          { name: '非机动车安全管理', value: 100 * Math.random() },
          { name: '房屋隐患排查', value: 100 * Math.random() },
        ]
      },
    },
    show: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    bg: {
      type: String as PropType<string>,
      default: '#000',
    },
  },
  setup(props) {
    const sizeRate = computed(() => Math.floor((screen.height * 1.6) / 100))
    const cloudRef = shallowRef<HTMLElement | null>(null)
    const myChart = shallowRef<ECharts | null>(null)
    const init = () => {
      if (!cloudRef.value) return
      myChart.value = initChart(cloudRef.value)
      const option = {
        tooltip: {
          show: false,
        },
        backgroundColor: props.bg,
        series: [
          {
            type: 'wordCloud',
            sizeRange: [sizeRate.value, sizeRate.value * 2.2],
            rotationRange: [0, 90],
            rotationStep: 45,
            gridSize: sizeRate.value,
            shape: 'pentagon',
            width: '100%',
            height: '100%',
            textStyle: {
              color: function ({ data }: { data: any }) {
                // const index = Math.floor(Math.random() * props.color.length)
                // return props.color[index]
                return `rgba(255,255,255,${data.value / 120})`
              },
              fontWeight: 550,
            },
            data: props.data,
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.value.setOption(option)
      myChart.value.resize()
    }

    onMounted(() => {
      window.addEventListener('resize', init)
      window.addEventListener('orientationchange', init)
    })
    onBeforeUnmount(() => {
      window.removeEventListener('resize', init)
      window.removeEventListener('orientationchange', init)
      if (!myChart.value) return
      myChart.value.dispose()
      myChart.value = null
    })

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

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