<template>
  <div class="container">
    <div class="datachart" v-if="pieChartData.length">
      <v-chart
        :forceFit="true"
        height="180"
        :data="pieChartData"
        :padding="0"
      >
        <v-tooltip
          :showTitle="false"></v-tooltip>
        <v-facet
          type="rect"
          :fields="['type']"
          :padding="0"
          :showTitle="false"
          :eachView="eachView"
        />
      </v-chart>
    </div>
    <a-divider type="vertical" class="divider"/>
    <div class="datastatistics">
      <data-statistics-item
        label="待完成"
        :value="countTaskAllData.upComing"
        color="#000"></data-statistics-item>
<!--      <data-statistics-item-->
<!--        label="逾期"-->
<!--        :value="countTaskAllData.overdue"-->
<!--        color="#f5222d"></data-statistics-item>-->
      <data-statistics-item
        label="延期"
        :value="countTaskAllData.delay"
        color="#fa8c16"></data-statistics-item>
      <data-statistics-item
        label="已完成"
        :value="countTaskAllData.complete"
        color="#1890ff"></data-statistics-item>
      <data-statistics-item
        label="任务总数"
        :value="countTaskAllData.total"
        color="#000"></data-statistics-item>

<!--      <data-statistics-item-->
<!--        label="终止"-->
<!--        :value="countTaskAllData.stop"-->
<!--        color="#bfbfbf"></data-statistics-item>-->
    </div>
  </div>
</template>

<script>
  import DataStatisticsItem from './data-statistics-item';
  import { countTaskAll } from '@/api/taskStatistics';

  const eachView = function(view, facet) {
    var data = facet.data;
    var color = '#0a9afe';

    data.push({
      type: '延期率',
      value: data[0].value
    });
    view.source(data);
    view.coord('theta', {
      radius: 0.8,
      innerRadius: 0.75
    });
    view.intervalStack().position('value').color('type', [color, '#eceef1']).opacity(1);
    view.guide().html({
      position: ['50%', '50%'],
      offsetX: -1,
      html: '<div class="g2-guide-html"><p class="title">' + data[0].type + '</p><p class="value">' + (data[0].value + '%') + '</p></div>'
    });
  }
  export default {
    name: 'data-statistics-top',
    components: {
      DataStatisticsItem
    },
    data() {
      return {
        eachView,
        countTaskAllData: {}
      }
    },
    computed: {
      pieChartData() {
        const data = [
          {
            type: '完成率',
            value: parseFloat(this.countTaskAllData.completionRate)
          },
          {
            type: '延期率',
            value: parseFloat(this.countTaskAllData.delayRate)
          }
        ]

        return data;
      }
    },
    mounted() {
      this.setStyle();
      this.getData();
    },
    methods: {
      setStyle() {
        const id = 'legend-html';
        if (document.getElementById(id)) {
          return;
        }
        const styleTxt = `
        .g2-guide-html {
            width: 50px;
            height: 50px;
            vertical-align: middle;
            text-align: center;
            line-height: 1.5
        }

        .g2-guide-html .title {
            font-size: 12px;
            color: #8c8c8c;
            font-weight: 300;
        }

        .g2-guide-html .value {
            font-size: 18px;
            color: #000;
            font-weight: bold;
        }
      `;
        const style = document.createElement('style');
        style.setAttribute('id', id);
        style.innerHTML = styleTxt;
        document.getElementsByTagName('head')[0].appendChild(style);
      },
      getData() {
        countTaskAll().then(res => {
          const data = res.data;
          const completionRate = data.complete / data.total * 100 || 0;
          const delayRate = data.delay / data.total * 100 || 0;

          this.countTaskAllData = Object.assign(res.data, {
            completionRate: completionRate.toFixed(2),
            delayRate: delayRate.toFixed(2)
          });
          // console.log(this.countTaskAllData)
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    & > div {
      flex: 1 1 auto;
    }

    .divider {
      flex: none;
      height: 100px;
    }

    .datachart {
      flex: 1 1 40%;

      display: block;
    }

    .datastatistics {
      flex: 1 1 60%;

      display: flex;
      justify-content: space-around;
      padding: 0 20px;
    }
  }
</style>
