<template>
  <div shadow="never" class="siteWorkChart" v-loading="loading">
    <div ref="siteWorkChart" class="" style="height:100%"/>
  </div>
</template>
<script>
import { computed, defineComponent, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'SiteWorkChart',
  setup() {
    const store = useStore()
    const siteWorkChart = ref(null)

    // 总数
    const total = computed(() => store.state.Home.worksChartData.total)
    // num
    const num = computed(() => store.state.Home.worksChartData.num)

    // 读取数据 func
    const loading = ref(true)
    const getData = async () => {
      // loading.value = true
      // await store.dispatch('Home/queryWorksChartData')
      loading.value = false
    }

    onMounted(() => {
      getData()
      let myChart = echarts.init(siteWorkChart.value)
      // 绘制图表
      myChart.setOption({
         tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          bottom: '2%',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true,
        },
        yAxis: {
          type: 'value',

          splitLine: {
            show: true,
            lineStyle: {
              color: '#D2E6F9',
              type: 'dashed',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#D2E6F9',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#000',
          },
        },
        xAxis: {
          type: 'category',
          data: [' '],
          axisLine: {
            lineStyle: {
              color: '#D2E6F9',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#000',
          },
        },
        series: [
          {
            name: '待接单',
            type: 'bar',
            barWidth: 24,
            barGap: '40%',
            data: [18],
            itemStyle: {
              color: '#FF3366',
            },
          },
          {
            name: '处理中',
            type: 'bar',
            barWidth: 24,
            barGap: '40%',
            data: [23],
            itemStyle: {
              color: '#F4A869',
            },
          },
          {
            name: '已完成',
            type: 'bar',
            barWidth: 24,
            barGap: '40%',
            data: [0],
            itemStyle: {
              color: '#61C5A9',
            },
          },
        ],
      })
      window.onresize = function () {
        // 自适应大小
        myChart.resize()
      }
    })

    return {
      siteWorkChart,
      loading,
      total,
      num,
    }
  },
})
</script>
<style lang="scss" scoped>


</style>