<template>
  <div style="width: 100%; text-align: center; height: 700px">
    <div id="codRate" ref="echarts" class="echarts"></div>
    <div id="anRate" ref="echarts" class="echarts"></div>
    <div id="tpRate" ref="echarts" class="echarts"></div>
    <div id="tnRate" ref="echarts" class="echarts"></div>
    <div id="phRate" ref="echarts" class="echarts"></div>
  </div>
</template>

<script>
import { getWaterRate } from '@/api/monitor';
import * as echarts from 'echarts';
export default {
  props: {
    deviceCode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      background: true,
      listLoading: true,
      lazy: true,
      elementLoadingText: '正在加载...',
      queryForm: {
        deviceCode: '',
      },
      type: 'pie',
    };
  },
  computed: {
    height() {
      return 500;
    },
  },
  watch: {
    deviceCode: function (newVal, oldVal) {
      this.queryForm.deviceCode = newVal;
      this.fetchData();
    },
  },
  created() {},
  methods: {
    setOption(opinion, opinionData, id, name) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        color: ['#1165bf', '#a26d1b'] /*饼状图的颜色*/,
        tooltip: {
          trigger: 'item',
          formatter: '{b}({d}%)' /*饼状图触碰之后显示的注释文字*/,
        },
        legend: {
          left: 'center' /*标签文字排成一行*/,
          y: 'bottom' /*在垂直方向上的底部*/,
          data: opinion,
        },
        series: [
          {
            type: this.type, //饼状图,
            center: ['50%', '40%'], //显示位置,
            name: name,
            radius: ['0%', '50%'] /*空心圆的占比*/,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
              normal: {
                borderWidth: 5 /*隔开的白色边界*/,
                borderColor: '#fff' /*border*/,
                // labelLine :{show:true}
              },
            },

            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'inner',
                textStyle: {
                  fontWeight: 200,
                  fontSize: 15, //文字的字体大小
                },
                formatter: '{d}%' /*饼状图内显示百分比*/,
                // data:['40%','60%'],
              },

              emphasis: {
                show: false /*空心文字出现*/,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: opinionData,
          },
        ],
      });
    },
    showData(row) {
      this.queryForm.deviceCode = row.deviceCode;
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true;
      const { data } = await getWaterRate(this.queryForm);
      this.setOption(
        ['COD达标率', 'COD未达标率'],
        [
          { value: data.codRate, name: 'COD达标率' },
          { value: 100 - data.codRate, name: 'COD未达标率' },
        ],
        'codRate',
        'COD'
      );
      this.setOption(
        ['氨氮达标率', '氨氮未达标率'],
        [
          { value: data.anRate, name: '氨氮达标率' },
          { value: 100 - data.anRate, name: '氨氮未达标率' },
        ],
        'anRate',
        '氨氮'
      );
      this.setOption(
        ['总磷达标率', '总磷未达标率'],
        [
          { value: data.tpRate, name: '总磷达标率' },
          { value: 100 - data.tpRate, name: '总磷未达标率' },
        ],
        'tpRate',
        '总磷'
      );
      this.setOption(
        ['总氮达标率', '总氮未达标率'],
        [
          { value: data.tnRate, name: '总氮达标率' },
          { value: 100 - data.tnRate, name: '总氮未达标率' },
        ],
        'tnRate',
        '总氮'
      );
      this.setOption(
        ['PH达标率', 'PH未达标率'],
        [
          { value: data.phRate, name: 'PH达标率' },
          { value: 100 - data.phRate, name: 'PH未达标率' },
        ],
        'phRate',
        'PH'
      );
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-container {
  width: 100%;
  .vab-query-form {
    margin-bottom: 30px;
    .el-input {
      width: 180px;
      margin-right: 20px;
    }
  }
}
.echarts {
  width: 240px;
  height: 240px;
  float: left;
}
</style>
