<template>
  <div class="reportCenter flex">
    <div class="left whiteBlock">
      <vue-scroll style="width: 100%">
        <div
          v-for="item in listData"
          :key="item.id"
          class="list_title"
          :class="checkedId == item.id ? 'checked_color' : 'nocheck'"
          @click="checkedId = item.id"
        >
          <span class="list_name">{{ item.name }}</span>
        </div>
      </vue-scroll>
    </div>
    <div class="right whiteBlock">
      <div class="chart" ref="ageChart"></div>
    </div>
  </div>
</template>
<script>
import {
  getDepartmentListApi
} from '@/assets/js/api/quality.js'
import echarts from 'echarts4';;
export default {
  data() {
    return {
      projectSn: "",
      userEnterpriseId: '',
      listData: [
        { id: 1, name: '整改排名' },
      ],
      checkedId: "",
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.checkedId = this.listData[0].id;
    this.getListData();
  },
  methods: {
    getListData() {
      let data = {
        projectSn: this.projectSn,
      };
      getDepartmentListApi(data).then((res) => {
        console.log('res---------', res);
        if (res.code == 200) {
          var Data = res.result;
          var yData2 = []
          var yData3 = []
          Data.forEach((element) => {

            yData2.push(element.rectifiedNumber);
            yData3.push(element.departmentName);
          });
          this.createdBarCharts(
            yData2,
            yData3,
            // yData2 = [10],
            // yData3 = ['研发部'],
            this.$refs.ageChart,
          );
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //企业出勤---图表
    createdBarCharts(yData2, yData3, el) {
      console.log('yData2', yData2);
      let that = this;
      let ageChart = echarts.init(el);
      ageChart.clear();
      let option = {
        grid: {
          top: 40,
          left: 0,
          bottom: 5,
          right: 20,
          containLabel: true,
        },
        color: ["#5CE2F6", "#5181F6", '#8EBDD2'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          align: "left",
          top: 5,
          left: 0,
          itemWidth: 13,
          itemHeight: 5,
          textStyle: {
            color: "#9fa2ad",
          },
        },

        xAxis: [
          {
            type: "category",
            data: yData3,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],

        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 1)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: '部门',
            type: "bar",
            data: yData2,
            barWidth: 35,
            barGap: 0.1,
          },
          // {
          //   name: legendData[0],
          //   type: "bar",
          //   data: yData1,
          //   barWidth: 35,
          // },
          // {
          //   name: legendData[2],
          //   type: "bar",
          //   data: yData3,
          //   barWidth: 35,
          //   barGap: 0.1,
          // },
        ],
      };

      ageChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.flex2 {
  display: flex;
  align-content: center;
}
.flex3 {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.reportCenter {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .left {
    width: 300px;
    box-sizing: border-box;
    margin-right: 15px;
    padding: 5px 0;
    .list_title {
      width: 100%;
      line-height: 43px;
      cursor: pointer;
      box-sizing: border-box;
    }
    .checked_color {
      border-left: 3px solid #5181f6;
      background: #edf2fe;
    }
    .nocheck {
      padding-left: 3px;
    }
    .list_name {
      padding: 0 15px;
    }
  }
  .right {
    width: calc(100% - 300px);
    box-sizing: border-box;
    padding: 15px 20px;
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>