<template>
  <chart :options="dashboard()" class="dashboard" />
</template>

<script>
import { graphic } from "echarts/lib/export";
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          data: 0,
          text: ""
        };
      }
    },
    dangerousValue: {
      type: String,
      default: ""
    },
    is_word: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({}),
  mounted() {},
  methods: {
    dashboard() {
      let self = this;
      return {
        title: [
          {
            text: self.data.data + "{a|%}",
            show: !self.is_word,
            x: "center",
            y: "30%",
            textStyle: {
              fontSize: 36,
              fontWeight: "lighter",
              color:
                self.dangerousValue == "workplace" ? ["#0d1847"] : ["#67828c"],
              rich: {
                a: {
                  fontSize: 14,
                  padding: [0, 0, 4, 0]
                }
              }
            }
          },
          {
            text: self.data.text,
            show: !self.is_word,
            x: "center",
            y: "58%",
            textStyle: {
              fontSize: 12,
              fontWeight: "normal",
              color: "#707693"
            }
          },
          {
            text: self.data.text,
            show: self.is_word,
            x: "center",
            y: "75%",
            textStyle: {
              fontSize: 16,
              fontWeight: "normal",
              color: "#333"
            }
          },
          {
            text: self.data.data + "%",
            show: self.is_word,
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 22,
              fontWeight: "normal",
              color:
                self.data.data > 75
                  ? "#00beb2" //green
                  : self.data.data >= 50
                  ? "#38aef9" //blue
                  : self.data.data > 25
                  ? "#ff7200" //yellow
                  : "#da4251" //red
            }
          }
        ],
        angleAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          min: 0,
          max: 138,
          boundaryGap: ["0", "100"],
          startAngle: 220,
          endAngle: -40
        },
        radiusAxis: {
          type: "category",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        polar: {
          radius: "110%"
        },
        series: [
          {
            type: "bar",
            data: [, self.data.data],
            coordinateSystem: "polar",
            barMaxWidth: 10,
            z: 1,
            name: "B",
            roundCap: true,
            itemStyle: {
              normal: {
                color: new graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color:
                      self.dangerousValue == "high"
                        ? self.data.data >= 80
                          ? "#f7f1d5"
                          : "#d5f7e8"
                        : self.dangerousValue == "workplace"
                        ? self.data.data >= 80
                          ? "#f7f1d5"
                          : "#e6ebfe"
                        : self.data.data > 75
                        ? "#d5f7e8"
                        : self.data.data >= 50
                        ? "#e5f4fe"
                        : self.data.data > 25
                        ? "#ffd98f"
                        : "#da4251"
                  },
                  {
                    offset: 1,
                    color:
                      self.dangerousValue == "high"
                        ? self.data.data >= 80
                          ? "#da4251" // red
                          : "#00beb2" //green
                        : self.dangerousValue == "workplace"
                        ? self.data.data >= 80
                          ? "#da4251"
                          : "#515fe7"
                        : self.data.data > 75
                        ? "#00beb2" //green
                        : self.data.data >= 50
                        ? "#38aef9" //blue
                        : self.data.data > 25
                        ? "#ff7200" //yellow
                        : "#f7f1d5" //red
                  }
                ])
              }
            },
            barGap: "-100%"
          },
          {
            type: "bar",
            data: [, 100],
            z: 0,
            silent: true,
            coordinateSystem: "polar",
            barMaxWidth: 10,
            name: "C",
            roundCap: true,
            color: "#f4f4f5",
            barGap: "-100%"
          },
          {
            type: "gauge",
            radius: "70%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 220,
            endAngle: -40,
            axisLabel: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]]
              }
            }, //仪表盘轴线
            axisLabel: {
              show: false
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5,
              lineStyle: {
                color: "#c9cee0",
                width: 1
              },
              length: 4
            }, //刻度样式
            splitLine: {
              show: true,
              length: 6,
              lineStyle: {
                color: "#c9cee0"
              }
            }, //分隔线样式
            detail: {
              show: false
            },
            pointer: {
              show: false
            }
          },
          {
            name: "point",
            type: "scatter",
            coordinateSystem: "polar",
            barGap: "-100%",
            zlevel: 0,
            symbol: "circle",
            symbolSize: 6,
            itemStyle: {
              normal: {
                show: true,
                color: "#fff"
              }
            },

            data: [, self.data.data]
          }
        ]
      };
    }
  }
};
</script>
<style scoped>
.dashboard {
  width: 100%;
  height: 100%;
}
</style>