<template>
  <div id="compeva" ref="dfsr" style="width: 100%;">
    <!-- 监测点规模--负荷类型内容 -->
  </div>
</template>
<script>
import echarts from "echarts";
import api from "@/api/harmonic/onlineData";
import yan from "@/assets/commjs/color";
export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
    item2: {
      type: Object,
      default: null,
    },
    height:{
      type:Number,
      default: null,
    },
    height2:{
      type:Number,
      default: null,
    }
  },
  watch: {
    height2(a, b) {
      if (a == 24) {
        this.$refs.dfsr.style.height =  document.getElementById('conmentId').offsetHeight -50 + 'px';

      } else {
        return;
      }
    },
    height(a, b) {
      if (a == 6 || a==8 || a==9 || a==16) {
        setTimeout(()=>{
        let str = document.getElementById('compevaluation').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.dfsr.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      obj: this.item,
      ydata1: null,
      time: this.timefamt(),
    };
  },
  created() {
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('compevaluation').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.dfsr.style.height =  height
    },200)
    
  },
  methods: {
    queryData() {
      var formData = {
        id: "333ff66a28acd0c68834f5a0d4ca68bd",
        searchBeginTime: this.time[0],
        searchEndTime: this.time[0],
        periodBeginTime: "",
        periodEndTime: "",
      };
      api.getQualityAssessData(formData).then((res) => {
        if (res.code == "A0000") {
          var data = res.data.syn[0];
          if (data == 3.14159) {
            this.ydata1 = 0.25;
          } else if (data == 3.1415) {
            this.ydata1 = 0.15;
          } else {
            this.ydata1 = data;
          }
          this.$nextTick(() => {
            this.MonitTypeEcharts();
          });
        }
      });
    },
    timefamt() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      var arr = [];
      var time1 = year + "-" + month + "-01";
      arr.push(time1);
      var time2 = year + "-" + month + "-" + day ;
      arr.push(time2);
      return arr;
    },
    MonitTypeEcharts() {
      let echarts = require("echarts");
      var myChart = echarts.init(
        document.getElementById("compeva"),
        null,
        { renderer: "svg" }
      );
      var option = {
        title: {
        //  text: "综合评估",
          x: "center",
          y: "0%",
          //subtext: '综合评估',
          textStyle: {
            color: "#fff",
            fontSize: "16",
          },
          subtextStyle: {
            color: "#fff",
            fontSize: "12",
          },
        },
        tooltip: {
          trigger: "item",
          
          axisPointer: {
                            type: "shadow",
                            label: {
                            color: "#fff",
                            fontSize: 16,
                            },
                        },
                        textStyle: {
                            color: "#fff",
                            fontStyle: "normal",
                            opacity: 0.35,
                            fontSize: 14,
                        },
                        backgroundColor: "rgba(0,0,0,0.35)",
          formatter: function (params) {
            // debugger
            if (params.value >= 5) {
              return params.name + " : " + "优质";
            } else if (params.value > 4 && params.value <= 5) {
              return params.name + " : " + "良好";
            } else if (params.value > 3 && params.value <= 4) {
              return params.name + " : " + "合格";
            } else if (params.value > 2 && params.value <= 3) {
              return params.name + " : " + "较差";
            } else if (params.value <= 2 && params.value >= 1) {
              return params.name + " : " + "极差";
            } else if (params.value >= 0.25 && params.value < 1) {
              return params.name + " : " + "暂无数据";
            } else if (params.value <= 0.15 && params.value >= 0) {
              return params.name + " : " + "/";
            }
          },
        },
        grid: {
          left: "10px",
          right: "50px",
          bottom: "20px",
          top: "10px",
          containLabel: true,
        },
        legend: {
          show: false,
          data: ["综合评估"],
          left: "50%",
          textStyle: {
            color: "#fff",
          },
        },

        xAxis: [
          {
            name: "指标",
            type: "category",
            data: ['稳态综合评估'],
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              //margin: 10,
              color: "#fff",
              textStyle: {
                fontSize: 12,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              symbol: ["none", "arrow"],
              lineStyle: {
                                color:  '#fff',
                                width: 1
                            },
            },
          },
        ],
    
        yAxis: {
          // name: '单位:',
          type: "value",
          min: 0,
          max: 6,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
            // 这里重新定义就可以
            formatter: function (value, index) {
              var texts = [];
              if (value === 1) {
                texts.push("1级[1,2]");
              } else if (value === 2) {
                texts.push("2级(2,3]");
              } else if (value === 3) {
                texts.push("3级(3,4]");
              } else if (value === 4) {
                texts.push("4级(4,5]");
              } else if (value === 5) {
                texts.push("5级(4,5.5]");
              }
              return texts;
            },
          },
          axisLine: {
            show: true,
            symbol: ["none", "arrow"],
            lineStyle: {
                                color:  '#fff',
                                width: 1
                            },
          },
          splitLine: { //分割线配置
            show:false,
                            lineStyle: {
                                color: "#fff",
                            }
                        },
        },
        series: [
          {
            name: "综合评估",
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value > 5) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 1,
                          color: "#00CC00",
                        },
                      ],
                      false
                    );
                  } else if (params.value > 4 && params.value <= 5) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 1,
                          color: "#99CC99",
                        },
                      ],
                      false
                    );
                  } else if (params.value > 3 && params.value <= 4) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 1,
                          color: "#FF9900",
                        },
                      ],
                      false
                    );
                  } else if (params.value > 2 && params.value <= 3) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 1,
                          color: "#996600",
                        },
                      ],
                      false
                    );
                  } else if (params.value <= 2 && params.value >= 1) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 1,
                          color: "#990000",
                        },
                      ],
                      false
                    );
                  } else if (params.value <= 0.25) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 1,
                          color: "#ccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            //silent: true,
            barMaxWidth: "30",
            //barGap: '-100%', // Make series be overlap
            data: [
              {
                value: this.ydata1,
              },
            ],
            markLine: {
              silent: false,
              symbol: "circle",
              data: [
                {
                  name: "优质",
                  yAxis: 5,

                  lineStyle: {
                    // cap: 'round' ,
                    color: "#00CC00",
                  },
                  label: {
                    color: "#00CC00", // 文字颜色
                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "优质";
                      ////console.log(params)
                      return tips;
                    },
                  },
                },
                {
                  name: "良好",
                  yAxis: 4,
                  lineStyle: {
                    color: "#99CC99",
                  },
                  label: {
                    color: "#99CC99", // 文字颜色
                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "良好";
                      ////console.log(params)
                      return tips;
                    },
                  },
                },
                {
                  name: "合格",
                  yAxis: 3,
                  lineStyle: {
                    color: "#FF9900",
                  },
                  label: {
                    color: "#FF9900", // 文字颜色
                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "合格";
                      ////console.log(params)
                      return tips;
                    },
                  },
                },
                {
                  name: "较差",
                  yAxis: 2,
                  lineStyle: {
                    color: "#996600",
                  },
                  label: {
                    color: "#996600", // 文字颜色
                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "较差";
                      ////console.log(params)
                      return tips;
                    },
                  },
                },
                {
                  name: "极差",
                  yAxis: 1,
                  lineStyle: {
                    color: "#990000",
                  },
                  label: {
                    color: "#990000", // 文字颜色
                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                    show: true,
                    formatter: function (params) {
                      // alert(params)
                      var tips = "";
                      tips += "极差";
                      ////console.log(params)
                      return tips;
                    },
                  },
                },
              ],
            },
          },
        ],
      };
      myChart.setOption(option)
window.echartsArr.push(myChart);
      let _this = this;
      _this.$erd.listenTo(_this.$refs.dfsr, (element) => {
        _this.$nextTick(() => {
          myChart.resize();
        });
      });
      window.onresize = function () {
        myChart.resize();
      };
      //  setInterval(function (){
      //   window.onresize = function () {
      //   	myChart.resize();
      //   }
      //  },200)
    },
  },
  beforeMount() {},
  beforeDestroy() {},
};
</script>
<style></style>
