<template>
  <div>
    <div :id="id" :style="styleObj"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "",
    },
    legendName: {
      type: String,
      default: "",
    },
    styleObj: {
      type: Object,
      default: () => { },
    },
    chartsData: {
      type: Array,
      default: ""
    }
  },
  data() {
    return {};
  },
  watch: {
    title(val) {
      console.log(val);
      this.drawLine();
    },
    chartsData(val) {
      this.drawLine();
    }
  },
  mounted() {
    this.drawLine();
  },

  methods: {
    drawLine() {
      // 基于dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id));
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.title,
          left: this.legendName == "旷工率" ? "center" : "left",
          textStyle: {
            fontSize: this.legendName == "旷工率" ? 24 : 18,
          },
        },
        color: '#6e98ed',
        legend: {
          orient: "horizontal",
          right: "50px",
          top: "0",
          itemWidth: 20,
          itemHeight: 10,
          icon: "roundRect",
          textStyle: {
            fontSize: "14px",
            color: "#000",
          },
        },
        tooltip: {},
        xAxis: {
          data: this.chartsData.map(i => {
            // console.log(i)
            if(this.title == "申诉次数部门排名TOP20") return i.deptName 
            if(this.title == "申诉次数个人排名TOP20") return i.staffName 
            if(this.title == "申诉次数规则排名TOP20") return i.ruleName 
            // return i.ruleName || i.deptName || i.staffName
          })
          // this.title == "申诉次数部门排名TOP20"
          //   ? [
          //     "部门1",
          //     "部门2",
          //     "部门3",
          //     "部门4",
          //     "部门5",
          //     "部门6",
          //     "部门7",
          //     "部门8",
          //     "部门9",
          //     "部门10",
          //     "部门11",
          //     "部门12",
          //     "部门13",
          //     "部门14",
          //     "部门15",
          //     "部门16",
          //     "部门17",
          //     "部门18",
          //     "部门19",
          //     "部门20",
          //   ]
          //   : this.title == "申诉次数个人排名TOP20"
          //     ? [
          //       "个人1",
          //       "个人2",
          //       "个人3",
          //       "个人4",
          //       "个人5",
          //       "个人6",
          //       "个人7",
          //       "个人8",
          //       "个人9",
          //       "个人10",
          //       "个人11",
          //       "个人12",
          //       "个人13",
          //       "个人14",
          //       "个人15",
          //       "个人16",
          //       "个人17",
          //       "个人18",
          //       "个人19",
          //       "个人20",
          //     ]
          //     : [
          //       "规则1",
          //       "规则2",
          //       "规则3",
          //       "规则4",
          //       "规则5",
          //       "规则6",
          //       "规则7",
          //       "规则8",
          //       "规则9",
          //       "规则10",
          //       "规则11",
          //       "规则12",
          //       "规则13",
          //       "规则14",
          //       "规则15",
          //       "规则16",
          //       "规则17",
          //       "规则18",
          //       "规则19",
          //       "规则20",
          //     ],
        },
        grid: {
          left: "5%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        // color:[ "#61a0a8",],
        yAxis: {},
        series: [
          {
            name: this.legendName,
            type: "bar",
            data: this.chartsData.map(i => {
              return i.number
            }),
            itemStyle: {
              // normal: {
              //   //这里是重点
              //   color: function(params) {
              //     //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
              //     var colorList = ["#6e98ed"];
              //     return colorList[params.dataIndex];
              //   },
              // },
              lineStyle: {
                type: "dotted", //'dotted'虚线 'solid'实线
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
