<template>
  <div style="width: 100%; height: 100%"></div>
</template>
<script>
import { type } from "../../assets/utils";

// import { deepClone } from "@/utils/js/common.js";
// import lodash from "lodash";
// import { getStatisticAges } from "@/api/dataAdmin.js";
export default {
  props: {
    info: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => {},
    },
    day: {
      type: String,
      default: () => "0",
    },
    type: {
      type: String,
      default: "",
    },
  },
  watch: {
    info() {
      this.getData();
    },
  },
  async mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let label = [];
      let value = [];
      if (this.type == "staff") {
        label = this.info.map((item) => item.name);
        value = this.info.map((item) => item.sendBusinessCardTimes);
      } else {
        label = this.info.map((item) => item.companyName);
        value = this.info.map((item) => item.businessCardNums);
      }
      this._initEcharts(label, value);
    },
    _initEcharts(label, value) {
      const myChart = this.$echarts.init(this.$el);
      const echarts = this.$echarts;
      let option = {
        legend: {
          // data: ["预约次数"],
          bottom: "5%",
          right: "center",
          itemWidth: 13,
          textStyle: {
            color: "#556677",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          top: "5%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: label,
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            interval: 0, //使x轴文字显示全
            rotate: "60", // 刻度标签旋转的角度
            formatter: function (value) {
              var texts = value;
              if (label.length > 3 && label.length <= 6) {
                if (texts.length > 10) {
                  // 限制长度自设
                  texts = texts.substr(0, 10) + "...";
                }
              }
              if (label.length > 6 && label.length <= 10) {
                if (texts.length > 6) {
                  // 限制长度自设
                  texts = texts.substr(0, 6) + "...";
                }
              }
              if (label.length > 10) {
                if (texts.length > 3) {
                  // 限制长度自设
                  texts = texts.substr(0, 3) + "...";
                }
              }
              return texts;
            },
            //  formatter: function(params) {
            //   var newParamsName = "";
            //   var paramsNameNumber = params.length;
            //   var provideNumber = 10; //一行显示几个字
            //   var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            //   if (paramsNameNumber > provideNumber) {
            //     for (var p = 0; p < rowNumber; p++) {
            //       var tempStr = "";
            //       var start = p * provideNumber;
            //       var end = start + provideNumber;
            //       if (p == rowNumber - 1) {
            //         tempStr = params.substring(start, paramsNameNumber);
            //       } else {
            //         tempStr = params.substring(start, end) + "\n";
            //       }
            //       newParamsName += tempStr;
            //     }
            //   } else {
            //     newParamsName = params;
            //   }
            //   return newParamsName;
            //  }
          },
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        dataZoom: [
          {
            type: "slider", // 设置为滑动条型式
            show: true, // 显示dataZoom组件
            start: 0, // 默认显示的起始位置为0
            end: 80, // 默认显示的结束位置为100
            height: 6,
            handleSize: 0, // 滑动条的手柄大小
            handleStyle: {
              color: "#DCE2E8", // 滑动条的手柄颜色
            },
            xAxisIndex: [0], // 表示控制第一个x轴
            filterMode: "filter", // 设置为filter模式，即数据超过范围时会被过滤掉
            bottom: 5,
          },
        ],

        series: [
          {
            data: value,
            // name: "预约次数",
            barWidth: "50%",
            type: "bar",
            itemStyle: {
              color: "#6194F8",
            },
          },
        ],
      };

      // if (this.option) {
      //   option = lodash.defaultsDeep(deepClone(this.option), option);
      // }
      myChart.setOption(option, true);
    },
  },
};
</script>
