<template>
  <div v-loading="loading">
    <div ref="chart" style="width: 100%; height: 200px;"/>
  </div>
</template>

<script>
import { getDashboardProjectRate } from '@/api/dashboard/project';
import * as echarts from 'echarts';

export default {
  name: 'ProjectRateChart',
  data() {
    return {
      data: {},
      loading: false,
      chart: null
    }
  },
  created() {
    this.getProjectRate();
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    getProjectRate() {
      this.loading = true;
      getDashboardProjectRate().then(res => {
        this.data = res.data;
        this.updateChart();
      }).finally(() => {
        this.loading = false;
      });
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.updateChart();
    },
    updateChart() {
      if (!this.chart) {
        return;
      }

      let completionRate = 0;
      let overdueRate = 0;
      if (this.data != null && this.data.total != null && this.data.total != 0) {
        completionRate = (this.data.completed / this.data.total * 100).toFixed(1);
        overdueRate = (this.data.devOverdue / this.data.total * 100).toFixed(1);
      }

      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '项目完成率',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['25%', '55%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'center',
              formatter: [
                '{rate|' + completionRate + '%}',
                '{name|完成率}'
              ].join('\n'),
              rich: {
                rate: {
                  fontSize: 20,
                  fontWeight: 'bold',
                  lineHeight: 30
                },
                name: {
                  fontSize: 14,
                  color: '#666'
                }
              }
            },
            emphasis: {
              disabled: true
            },
            data: [
              { 
                value: completionRate, 
                name: '已完成',
                itemStyle: { color: '#9da6ff' }
              },
              { 
                value: 100 - completionRate, 
                name: '未完成',
                itemStyle: { color: '#E4E7ED' }
              }
            ]
          },
          {
            name: '项目超期率',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['75%', '55%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'center',
              formatter: [
                '{rate|' + overdueRate + '%}',
                '{name|超期率}'
              ].join('\n'),
              rich: {
                rate: {
                  fontSize: 20,
                  fontWeight: 'bold',
                  lineHeight: 30
                },
                name: {
                  fontSize: 14,
                  color: '#666'
                }
              }
            },
            emphasis: {
              disabled: true
            },
            data: [
              { 
                value: overdueRate, 
                name: '已超期',
                itemStyle: { color: '#fe906d' }
              },
              { 
                value: 100 - overdueRate, 
                name: '未超期',
                itemStyle: { color: '#E4E7ED' }
              }
            ]
          }
        ]
      };

      this.chart.setOption(option);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>