<template>
  <el-card class="header" :style="{height:height}">
    <el-col :lg="12">
      <el-col :lg='6'>
        <img src="/static/img/taskLogo.png" alt srcset />
      </el-col>
      <el-col :lg='18'>
        <span class="taskNum">
        <div class="mouthTask">当月任务总量</div>
        <div>
          <div>{{tasktotal}}</div>
        </div>
        <div>已完成：{{taskcurrent}}</div>
      </span>
      </el-col>
    </el-col>
    <el-col :lg="12">
      <!-- 环形图 -->
      <div  ref="pieChart" class="chart"  :style="{height:height}"/>
    </el-col>
  </el-card>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
import { getTaskList } from '@/api/dashboard/orderDatas'
export default {
  props: {
    height: {
      type: String,
      default: "150px"
    },
    nowDate: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      taskcurrent:'',//当前任务量
      tasktotal:'',//任务总量
      loading: false,
      chart: null,
      search_date: "1",
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '0',
          data: [] // 图例数据
        },
         textStyle: {　　　　　　　　　
            fontSize: 14,
            fontFamily: "Microsoft YaHei",

        },
        graphic:{       //图形中间文字
            type:"text",
            left:"center",
            top:"center",
            style:{
                text:"",
                textAlign:"center",
                fill:"#000",
                fontSize:14,
                lineHeight:14,
                fontFamily: "Microsoft YaHei"
            }
        },
        calculable: true,
        series: [{
          name: '',
          type: 'pie',
          radius: [30, 50],
          center: ['50%', '50%'],
          labelLine: {
                show: false
          },
          label: {
                show: false,
                position: 'center'
          },
          data: [
            {
              value: 0,
              name: '已完成'
            },
            {
              value: 0,
              name: '剩余'
            },
          ], // 数据
          animationEasing: 'cubicInOut',
          animationDuration: 2600
        }]
      }
    };
  },
  created() {
      this.getTaskData()
  },
  mounted() {
    this.initChart();
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);
  },
  methods: {
      getTaskData(){
          this.loading = true
          return new Promise(resolve=>{
              const params={
                  time:this.nowDate
              }
               getTaskList(params).then(response=>{
                if(response.state=='success'){
                  this.taskcurrent=response.taskcurrent;
                  this.tasktotal=response.tasktotal;
                    const sData = []
                    sData.push({
                        value:response.taskcurrent,
                        name:'已完成'
                    },{
                        value:response.tasktotal-response.taskcurrent,
                        name:'剩余'
                    })
                    this.option.series[0].data = sData;
                    this.option.graphic.style.text = response.progress + '%'
                    this.initChart()
                }
            })
          })
      },
      // 初始化数据
    initChart() {
      this.chart = echarts.init(this.$refs.pieChart, 'macarons')
      this.chart.clear()
      this.chart.setOption(this.option)
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  margin-left: 10px;
  img {
    // float: left;
    padding-right: 12px;
    padding-top: 3px;
  }
  .taskNum {
    float: left;
    div {
      margin: 8px 0;
      div {
        height: 52px;
        width: 114px;
        background-color: #468cde;
        line-height: 52px;
        text-align: center;
        border-radius: 10px;
        color: #fff;
        font-size: 30px;
      }
    }
  }
  .mouthTask {
    font-size: 17px;
    color: #666666;
  }
  .taskNum :nth-child(2) {
    font-size: 20px;
    color: #fff;
  }
  .taskNum :nth-child(3) {
    font-size: 15px;
    color: #939393;
  }
}
.chart{
  top: -20px;
  left: 0px;
}
</style>