<template>
    <div class="task_echarts height_100" ref="taskEcharts"></div>
</template>
  
<script>
  export default {
    components: {},
    props: {
      resize:''
    },
    data() {
      return {
        chart:null
      };
    },
    watch: {
      resize(val){
        if(val){
          this.handleSizeChange()
        }
      }
    },
    computed: {},
    created() {},
    mounted() {
      this.init()
    },
    methods: {
      async init(){
        const [completed,incomplete] = await Promise.allSettled([this.getData('(3)'),this.getData('(1 OR 2 OR 4 OR 5 OR 6)')])
        var completedNum = completed.status =='fulfilled'?completed.value.total:0
        var incompleteNum = incomplete.status =='fulfilled'?incomplete.value.total:0
        var data = [
          {
            value:completedNum,
            status:[3],
            name:'已完成'
          },
          {
            value:incompleteNum,
            status:[1,2,4,5,6],
            name:'未完成'
          }
        ]
        this.initChart(data)
      },
      getData(val){
        let params = {
          searchQuery: `status=${val}`,//检索条件
        }
        return this.$api.queryProjectTask(params).then(response=> response.data)
      },
      handleSizeChange(){
        this.$nextTick(()=>{
          this.chart.resize()
        }) 
      },
      initChart(data) {
        const chartDom = this.$refs.taskEcharts;
        this.chart = this.$echarts.init(chartDom)
        this.chart.on('click',(params)=>{
          localStorage.status =`(${params.data.status.join(' OR ')})`
          this.$router.push({
            name:'myTask',
          })
          setTimeout(function () {
            localStorage.removeItem('status')
          }, 2000);
      })
        this.chart.setOption(
            {
            tooltip: {
                trigger: 'item'
            },
            title: {
                text: '我的任务',
                bottom: 'center',
                left: "20%",
                textStyle: {
                  fontSize: 16,
                  fontWeight: 999,
                  fontFamily: "思源黑体CN",
                },
            },
            legend: {
                top:'center',
                align: 'left',
                right:'center',
                left:'45%',
                orient:'vertical',
                itemGap :20
            },
            series: [
            {
              name: "",
              label: {
                show: false,
                formatter: function (data) {
                  return `${data.name} ${data.value}(${data.percent.toFixed(
                    1
                  )}%)`;
                },
              },
              labelLine: {
                show: true,
              },
              type: "pie",
              avoidLabelOverlap: false,
              radius: ["50%", "80%"],
              center: ["0", "50%"],
              left:'25%',
              data: data,
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
            }
        );
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  </style>