<template>
  <div class="workorder-panel">
    <div class="panel-title">工单执行情况</div>

    <!-- 中部：环形图 -->
    <div ref="chart" class="chart"></div>

    <!-- 底部：状态横向统计 -->
    <div class="stat-row">
      <div class="stat-item todo-num">
        <span class="dot"></span>
        待开始：
        <!--        <b>{{ todoNum }}</b>-->
        <FlipNumber :value="todoNum" />
      </div>
      <div class="stat-item processing">
        <span class="dot"></span>
        进行中：
        <FlipNumber :value="processing" />
      </div>
      <div class="stat-item finished">
        <span class="dot"></span>
        已完成：
        <!--        <b>{{ finished }}</b>-->
        <FlipNumber :value="finished" />
      </div>
    </div>
  </div>
</template>


<script>
import * as echarts from 'echarts'
import FlipNumber from '@views/screen/components/FlipNumber.vue'

export default {
  components: { FlipNumber },
  props: {
    data: {
      type: Object,
      default: () => ({
        todoNum: 0,
        processing: 0,
        finished: 0
      })
    }
  },
  computed: {
    todoNum() {
      return this.data!=null ? this.data.todoNum : 0
    },
    processing() {
      return this.data!=null ? this.data.processing : 0
    },
    finished() {
      return this.data!=null ? this.data.finished : 0
    },
    total() {
      return this.todoNum + this.processing + this.finished
    },
    rate() {
      return this.total ? Math.round(this.finished / this.total * 100) : 0
    }
  },
  watch: {
    data: {
      immediate: true,
      handler() {
        this.$nextTick(this.render)
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.render()
  },
  methods: {
    render() {
      if (!this.chart) return

      this.chart.clear()
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}：{c} ({d}%)'
        },
        animationDuration: 800,
        series: [{
          type: 'pie',
          radius: ['65%', '85%'],
          center: ['50%', '55%'],
          avoidLabelOverlap: false,
          label: { show: false },
          emphasis: { scale: false },
          data: [
            { value: this.todoNum, name: '待开始', itemStyle: { color: '#8c8c8c' } },
            { value: this.processing, name: '进行中', itemStyle: { color: '#faad14' } },
            { value: this.finished, name: '已完成', itemStyle: { color: '#52c41a' } }
          ]
        }],
        graphic: {
          type: 'text',
          left: 'center',
          top: '50%',
          style: {
            text: `${this.rate}%\n完成率`,
            fill: '#fff',
            fontSize: 18,
            fontWeight: 600,
            align: 'center'
          }
        }
      },true)
    }
  }
}
</script>

<style scoped>
.workorder-panel {
  height: 100%;
  background: #102a44;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  //align-items: center;
}

.panel-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #00eaff;
  letter-spacing: 1px;
}

.panel-title::before {
  content: '';
  width: 6px;
  height: 16px;
  background: linear-gradient(180deg, #00eaff, #4fd2ff);
  margin-right: 10px;
  border-radius: 3px;
}

.chart {
  width: 100%;
  flex: 1;
}

/* 横向状态条 */
.stat-row {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding-top: 6px;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
}

.stat-item b {
  margin-left: 6px;
  font-size: 18px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.todo-num .dot { background: #8c8c8c; }
.processing .dot { background: #faad14; }
.finished .dot { background: #52c41a; }
</style>