<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div ref="monitor" style="width: 100%; height: 100%"></div>
    <div class="colour flex5" v-show = this.$props.show>

      <div class="colour_content">
        <div
          class="bg"
          style="
            background: #1fccc6;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
          "
        ></div>
        <div class="size">{{ $t("message.projectSummary.actor") }}</div>
      </div>
      <div class="colour_content">
        <div class="bg" style="background: #FFBB38"></div>
        <div class="size">{{ $t("message.projectSummary.fine") }}</div>
      </div>
      <div class="colour_content">
        <div class="bg" style="background: #fe7a18"></div>
        <div class="size">
          {{ $t("message.projectSummary.mildContamination") }}
        </div>
      </div>
      <div class="colour_content">
        <div class="bg" style="background: #7718fe"></div>
        <div class="size">
          {{ $t("message.projectSummary.middleLevelPollution") }}
        </div>
      </div>
      <div class="colour_content">
        <div class="bg" style="background: #890ea1"></div>
        <div class="size">
          {{ $t("message.projectSummary.actheavyPollutionor") }}
        </div>
      </div>
      <div class="colour_content">
        <div
          class="bg"
          style="
            background: #970c0c;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
          "
        ></div>
        <div class="size">
          {{ $t("message.projectSummary.severeContamination") }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts4';
import {
  getCurrentDayAirQualityApi
} from "@/assets/js/api/environmentManage";
export default {
  props:["show"], // 控制空气质量条是否显示
  data() {
    return {
      option: null,
      chart: Object,
      lineColor: "#1FCCC6",
      todayAir:{
                analysisData:'0',
                analysisType:'优'
            }
    };
  },
  mounted() {
    this.getAirQualityToday()
  },
  methods: {
    //空气质量分析--当天
    getAirQualityToday() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      getCurrentDayAirQualityApi(data).then((res) => {
        console.log(res)
        if (res.code == 200) {
          if(res.result){
            this.todayAir = res.result;
            this.getColor();
            this.createdEcharts3();
          }
        }
      });
    },
    getColor() {
      switch (this.todayAir.analysisType) {
        case "优":
          this.lineColor = "#6ce9f0";
          break;
        case "良":
          this.lineColor = "#468EFD";
          break;
        case "轻度污染":
          this.lineColor = "#FE7A18";
          break;
        case "中度污染":
          this.lineColor = "#7718FE";
          break;
        case "重度污染":
          this.lineColor = "#890EA1";
          break;
        case "严重污染":
          this.lineColor = "#970C0C";
          break;
      }
    },
    createdEcharts3() {
      let that = this;
      //项目进度
      let monitor = echarts.init(this.$refs.monitor);
      this.chart = monitor;
      monitor.clear();

      var text;
      if(this.$props.show) {
        this.option = {
          title: {
            show: true,
            text: this.todayAir.analysisType,
            x: "49%",
            y: "55%",
            z: 8,
            textAlign: "center",
            textStyle: {
              color: " rgb(147,169,205) ",
              fontSize: 12,
            },
          },
          series: [
            {
              type: "gauge",
              radius: "62%",
              splitNumber: 10,
              axisLine: {
                lineStyle: {
                  color: [
                    [this.todayAir.analysisData /100, this.lineColor],
                    [1, "#111F42"],
                  ],
                  width: 6,
                },
              },
              axisLabel: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },

              pointer: {
                show: false,
              },
            },
            {
              type: "gauge",
              //  center: ['20%', '50%'],
              radius: "80%",
              min: 0, //最小刻度
              max: 100, //最大刻度
              splitNumber: 10, //刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  color: [[1, "rgba(0,0,0,0)"]],
                },
              },
              //仪表盘轴线
              axisLabel: {
                show: true,
                color: "#4d5bd1",
              }, //刻度标签。
              axisTick: {
                show: true,
                splitNumber: 7,
                lineStyle: {
                  color: "#468EFD",
                  width: 2,
                },
                length: -4,
              }, //刻度样式
              splitLine: {
                show: true,
                length: -10,
                lineStyle: {
                  color: "#468EFD",
                },
              }, //分隔线样式
              detail: {
                show: false,
              },
              pointer: {
                show: false,
              },
            },
            /*内部*/
            {
              type: "pie",
              radius: ["0", "35%"],
              center: ["50%", "50%"],
              z: 8,
              hoverAnimation: false,
              data: [
                {
                  value: this.todayAir.analysisData,
                  itemStyle: {
                    normal: {
                      color: "#091F4B",
                    },
                  },
                  label: {
                    normal: {
                      rich: {
                        a: {
                          color: this.lineColor,
                          align: "center",
                          fontSize: 31,
                          fontWeight: "bold",
                        },
                      },
                      formatter: function (params) {
                        return "{a|" + params.value + "}";
                      },
                      position: "center",
                      show: true,
                    },
                  },
                  labelLine: {
                    show: false,
                  },
                },
              ],
            },
            /*外一层*/
            {
              type: "pie",
              radius: "40%",
              startAngle: 220,
              endAngle: -40,
              hoverAnimation: false,
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 1,
                },
              ],
              itemStyle: {
                normal: {
                  color: "rgba(69, 161, 255,0.8)",
                },
              },
            },
            //外二层圈
            {
              type: "pie",
              radius: "45%",
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              z: 0,
              hoverAnimation: false,
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 1,
                },
              ],
              itemStyle: {
                normal: {
                  color: "rgba(69, 161, 255,0.5)",
                },
              },
            },
            //最外层圈
            {
              type: "pie",
              radius: "50%",
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              z: 0,
              hoverAnimation: false,
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 1,
                },
              ],
              itemStyle: {
                normal: {
                  color: "rgba(69, 161, 255,0.3)",
                },
              },
            },
          ],
        };
      }else { // 项目级看板配置
        this.option = {
          title: {
            show: true,
            text: this.todayAir.analysisType,
            x: "49%",
            y: "54%",
            z: 8,
            textAlign: "center",
            textStyle: {
              color: this.lineColor,
              fontSize: 12,
            },
          },
          series: [
            {
              type: "gauge",
              radius: "43%",
              splitNumber: 10,
              data: [
                {
                  value: 1,
                },
              ],
              axisLine: {
                lineStyle: {
                  color: [
                    [this.todayAir.analysisData /100, this.lineColor],
                    [1, "#111F42"],
                  ],
                  width: 6,
                },
              },
              axisLabel: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },

              pointer: {
                show: false,
              },
            },
            {
              type: "gauge",
              //  center: ['20%', '50%'],
              radius: "55%",
              min: 0, //最小刻度
              max: 100, //最大刻度
              splitNumber: 10, //刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  color: [[1, "rgba(0,0,0,0)"]],
                },
              },
              //仪表盘轴线
              axisLabel: {
                show: true,
                color: "rgba(77, 91, 209,0.5)",
                textStyle: {
                  fontSize:12,
                }
                // rgba(77, 91, 209, 0.5)
                // distance: 14,
                // formatter: function (v) {
                //   switch (v + "") {
                //     case "0":
                //       return "0";
                //     case "50":
                //       return "50";
                //     case "100":
                //       return "100";
                //     case "150":
                //       return "150";
                //     case "200":
                //       return "200";
                //     case "250":
                //       return "250";
                //     case "300":
                //       return "300";
                //     case "350":
                //       return "350";
                //     case "400":
                //       return "400";
                //     case "450":
                //       return "450";
                //     case "500":
                //       return "500";
                //   }
                // },
              }, //刻度标签。
              axisTick: {
                show: true,
                splitNumber: 7,
                lineStyle: {
                  color: "#468EFD",
                  width: 2,
                },
                length: -4,
              }, //刻度样式
              splitLine: {
                show: true,
                length: -10,
                lineStyle: {
                  color: "#468EFD",
                },
                
              }, //分隔线样式
              detail: {
                show: false,
              },
              pointer: {
                show: false,
              },
            },
            /*内部*/
            {
              type: "pie",
              radius: ["0", "20%"],
              center: ["50%", "50%"],
              z: 8,
              hoverAnimation: false,
              data: [
                {
                  value: this.todayAir.analysisData,
                  itemStyle: {
                    normal: {
                      color: "#091F4B",
                    },
                  },
                  label: {
                    normal: {
                      rich: {
                        a: {
                          color: this.lineColor,
                          align: "center",
                          fontSize: 28,
                          fontWeight: "bold",
                        },
                      },
                      formatter: function (params) {
                        return "{a|" + params.value + "}";
                      },
                      position: "center",
                      show: true,
                    },
                  },
                  labelLine: {
                    show: false,
                  },
                },
              ],
            },
            /*外一层*/
            {
              type: "pie",
              radius: "25%",
              startAngle: 220,
              endAngle: -40,
              hoverAnimation: false,
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 1,
                },
              ],
              itemStyle: {
                normal: {
                  color: "rgba(69, 161, 255,0.8)",
                },
              },
            },
            //外二层圈
            {
              type: "pie",
              radius: "30%",
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              z: 0,
              hoverAnimation: false,
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 1,
                },
              ],
              itemStyle: {
                normal: {
                  color: "rgba(69, 161, 255,0.5)",
                },
              },
            },
            //最外层圈
            {
              type: "pie",
              radius: "35%",
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              z: 0,
              hoverAnimation: false,
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 1,
                },
              ],
              itemStyle: {
                normal: {
                  color: "rgba(69, 161, 255,0.3)",
                },
              },
            },
          ],
        };
      }
      
      monitor.setOption(this.option);
    },
  },
};
</script>
<style lang="less" scoped>
.colour {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 10px;
  left: 2%;
  .colour_content {
    width: 16%;
    text-align: center;
    float: left;
    .bg {
      width: 100%;
      height: 5px;
    }
    .size {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>