<template>
  <div class="wrapper">
    <div class="title">
      <div class="icon"></div>
      <p>成效统计</p>
    </div>
    <div class="RR_main">
      <div class="item">
        <canvas id="canvas1" width="100" height="100"></canvas>
        <p class="font">自治率</p>
      </div>
      <div class="item">
        <canvas id="canvas2" width="100" height="100"></canvas>
        <p class="font">共治率</p>
      </div>
      <div class="item">
        <canvas id="canvas3" width="100" height="100"></canvas>
        <p class="font">执法率</p>
      </div>
    </div>
  </div>
</template>

<script>
import Progress from "@/utils/progress.js";
import { getResultRate } from "@/api/api";

export default {
  name: "ResultRate",
  props: {
    typeId: {
      type: Number
    }
  },
  watch: {
    typeId: function () {
      this.initResultRate();
    },
  },
  data() {
    return {
      resultRate: {},
      timer: null
    };
  },
  created() {
    this.initResultRate();
    this.timer = window.setInterval(() => {
      this.initResultRate()
    }, 60 * 1000 * 5);
  },
  methods: {
    init(el, value, color, bgcolor, text) {
      const options = {
        el, // canvas元素id
        deg: value * 100, // 绘制角度
        timer: 1, // 绘制时间
        lineWidth: 10, // 线宽
        lineBgColor: bgcolor, // 底圆颜色
        lineColor: color, // 动态圆颜色
        textColor: "#F2B700", // 文本颜色
        fontSize: 27, // 字体大小
        circleRadius: 60, // 圆半径
        text // 是否显示文字
      };
      new Progress(options);
    },
    initResultRate() {
      getResultRate({typeId: this.typeId}).then(res => {
        if (res.code === 200) {
          let val = res.data;
          this.init(
            "canvas1",
            val.autonomyRate,
            "rgb(120,255,0)",
            "rgba(120,255,0,0.5)"
          );
          this.init(
            "canvas2",
            val.coTreatmentRate,
            "rgb(0,255,222)",
            "rgba(0,255,222,0.5)"
          );
          this.init(
            "canvas3",
            val.lawEnforcementRate,
            "rgb(255,189,2)",
            "rgba(255,189,2,0.5)"
          );
        }
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="stylus" scoped>
.wrapper {
  width: 530px;
  height: 248px;
  background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
  border-radius: 4px;
  border: 2px solid #00356D;

  .title {
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    background: linear-gradient(270deg, #072B4D 0%, #134778 100%);

    .icon {
      width: 2px;
      height: 20px;
      background: #5CE3FB;
      border-radius: 2px;
    }

    p {
      margin-left: 10px;
      font-size: 20px;
      font-weight: 400;
      color: #5CE3FB;

      span {
        font-weight: 500;
        color: #FC672C;
      }
    }
  }

  .RR_main {
    width: 100%;
    height: 208px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .font {
        margin-top: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
      }
    }
  }
}

.service {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 5px;
}
</style>
