<template>
  <div :id="yylx_asy" class="dashboard"></div>
</template>

<script>
import uuidv1 from "uuid/v1";
var echarts = require("echarts");
export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    text: {
      type: String,
      default: "",
    },
    show_center_data: {
      type: Boolean,
      default: true,
    },
    bar_width: {
      type: Number,
      default: 5,
    },
    isFwsp: {
      type: Boolean,
      default: false,
    },
    isPercent: {
      type: Boolean,
      default: true,
    },
    color: {
      type: Array,
      default: null,
    },
  },
  components: {},
  data() {
    return {
      yylx_asy: uuidv1(),
    };
  },
  watch: {
    data: {
      handler() {
        this.init_yylx_asy(this.data, this.text);
      },
      deep: true,
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.init_yylx_asy(this.data, this.text);
  },
  methods: {
    init_yylx_asy(data, text) {
      var options = this.init_circle(data, text);
      window[this.yylx_asy] = echarts.init(
        document.getElementById(this.yylx_asy)
      );
      window[this.yylx_asy].setOption(options, true);
    },
    init_circle(data_val, text) {
      // var data_val = data_val;
      var rich = {
        white: {
          color: "#ddd",
          align: "center",
          padding: [3, 0],
        },
      };
      var placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      };
      var data = [];
      var total = 0;
      var color = this.color
        ? this.color
        : ["#274fee", "#f5ab4c", "#e15260", "#a9aec0", "#e56600"];
      var color2 = ["#ef9433", "#515fe7"];
      var legendarr = [];
      var temp2_data = 0;
      data_val.forEach((e) => {
        temp2_data = temp2_data + e.value;
      });
      for (var i = 0; i < data_val.length; i++) {
        data.push(
          {
            value: data_val[i].value,
            name: data_val[i].name,
            itemStyle: {
              normal: {
                borderWidth: this.bar_width,
                // shadowBlur: 20,
                borderColor: this.isFwsp ? color2[i] : color[i],
                // shadowColor: color[i],
              },
            },
          },
          {
            value: temp2_data / 30,
            name: "",
            itemStyle: placeHolderStyle,
          }
        );
        legendarr.push(data_val[i].name);
      }
      for (var i = 0; i < data_val.length; i++) {
        total += data_val[i].value;
      }
      var seriesObj = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [50, 53],
          center: ["50%", "46%"],
          hoverAnimation: false,
          avoidLabelOverlap: true,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#58617a",
                formatter: (params) => {
                  if (this.isPercent) {
                    var percent = 0;
                    percent =
                      total != 0
                        ? ((params.value / total) * 100).toFixed(2)
                        : 0;
                    if (params.name !== "") {
                      return percent + "%";
                    } else {
                      return "";
                    }
                  } else {
                    if (params.name !== "") {
                      return params.value + "个";
                    } else {
                      return "";
                    }
                  }
                },
                rich: rich,
              },
            },
          },
          data: data,
        },
      ];
      var options = {
        title: {
          text: this.show_center_data ? total : "",
          textStyle: {
            color: "#000",
            fontSize: 40,
            fontWeight: 200,
          },
          subtext: text,
          subtextStyle: {
            color: "#c9cedd",
          },
          itemGap: 0, // 主副标题距离
          left: "center",
          top: "32%",
        },
        color: this.isFwsp ? color2 : color,
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        legend: {
          bottom: -5,
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          orient: "horizontal",
          data: legendarr,
          backgroundColor: "#f4f7fc",
        },
        toolbox: {
          show: false,
        },

        series: seriesObj,
      };
      return options;
    },
  },
};
</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100%;
}
</style>
