<template>
  <div class="items">
    <div class="item" ref="chart" style="width: 100%; height: 180px"></div>
    <!-- <div class="item" v-for="(item, index) in data" :key="index" ref="sell">
      <div class="title">{{ item.type_name }}</div>
      <div
        class="progress"
        :style="{
          width:
            Math.round(
              Number(item.job_num) / (Number(maxNum) / progressWidth)
            ) + 'px',
        }"
      />
      <div>{{ item.job_num }}</div>
    </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    processData: {
      type: Array,
      require: true,
    },
    maxNum: {
      type: Number,
      require: true,
    },
  },
  watch: {
    processData: {
      handler(val) {
        console.log("newval", val);
        this.$nextTick(() => {
          // 获取dom容器
          const chartDom = this.$refs.chart;
          // 初始化图表实例
          this.chart = echarts.init(chartDom);
          this.initChart(val);
        });
        // console.log("data", this.data, this.maxNum);
      },
      deep: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    initChart(data) {
      const option = {
        // title: {
        //   text: "第一个 ECharts 实例",
        // },
        // 鼠标移入进行操作
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            // console.log(params);

            return `${params[0].axisValueLabel}: <br/>${params[0].data}`;
          },
        },
        // legend: {
        //   data: ["销量"],
        // },
        xAxis: {
          // x轴分割线
          //   splitLine: {
          //     show: false,
          //   },
          //x轴下面一小段分割线去除
          axisTick: {
            show: false,
          },
        },
        grid: {
          top: "1%",
          left: "1%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          // 隐藏y轴数据
          //   show: false,
          splitLine: {
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          //y轴字体颜色，大小
          axisLabel: {
            color: "#303133",
            fontSize: 12,
            margin: 8,
            formatter: function (params) {
              var val = "";
              if (params.length > 4) {
                val = params.substr(0, 4) + "...";
                return val;
              } else {
                return params;
              }
            },
          },
          axisTick: {
            show: false,
          },
          inverse: true,
          type: "category",
          data: data.map((item) => {
            return item.type_name;
          }),
        },
        series: [
          {
            // name: "销量",
            type: "bar",
            //柱子宽度
            barWidth: 8,
            data: data.map((item) => {
              return item.job_num;
            }),
            itemStyle: {
              barBorderRadius: [5, 5, 5, 5], // 圆角（左上、右上、右下、左下）

              color: "#419fff",
            },
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
  mounted() {
    // 获取dom容器
    const chartDom = this.$refs.chart;
    // 初始化图表实例
    this.chart = echarts.init(chartDom);
    this.initChart(this.processData);
    // console.log("da======ta", this.processData, this.maxNum);
  },
};
</script>

<style lang="scss" scoped>
.items {
  width: 100%;
  //   width: 350px;
  height: 180px;
  overflow: auto;
  overflow-x: auto;
  //   background: url("../../../../assets/statisitcs/line.png") no-repeat;
  //   background-size: 100%;
  //   background-position-x: 97px;
}
.item {
  margin-bottom: 25px;

  display: flex;
  align-items: center;
  font-size: 13px;
}

.anim {
  transition: all 0.8s;
}

.progress {
  margin: 0 10px;
  height: 12px;
  background: #4086ff;
  border-radius: 5px;
}
.title {
  width: 23%;
  color: #4e5969;
  text-align: right;
}
</style>
