<template>
  <div class="app-container">
    <time-select
      style="margin-top: 20px"
      ref="timeSelect"
      @selectYear="getList()"
      @selectSemester="getList()"
    ></time-select>
    <el-row>
      <el-button
        @click="exportCollege()"
        type="primary"
        style="margin-bottom: 10px; margin-right: 10px; float: right"
        circle
        icon="el-icon-download"
      ></el-button>
    </el-row>
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div ref="college" style="height: 420px" />
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div id="labuserate" ref="labuserate" :style="{ height: '650px' }" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import timeSelect from "@/views/components/timeSelect";
import { collegeapply } from "@/api/labbooking/record";
import { labUse } from "@/api/labbooking/lab";

export default {
  components: { timeSelect },
  props: {},
  data() {
    return {
      pie: [{ value: 999, name: "暂无预约" }],
      autoHeigth: null,
      labCounts: null,
      labNames: ["1", "2", "3", "4", "5", "6", "7", "8"],
      rate: [0.1, 0.3, 0.4, 0.5, 0.9, 1.0, 0.5, 0.6],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(function () {
      this.getList();
    });
  },
  //方法集合
  methods: {
    getList() {
      this.getCollege();
      this.getLabUse();
    },
    getLabUse() {
      let labuserate = echarts.init(this.$refs.labuserate);
      labUse({
        year: this.$refs.timeSelect.year,
        term: this.$refs.timeSelect.semester,
      }).then((response) => {
        this.labNames = [];
        this.rate = [];
        for (let i = 0; i < response.data.length; i++) {
          this.labNames.push(response.data[i].labName);
          this.rate.push(response.data[i].rate);
        }

        labuserate.clear();
        labuserate.setOption({
          title: {
            text: "实验室使用率",
          },
          grid: {
            left: "0%",
            bottom: "10%",
            containLabel: true,
          },
          yAxis: {
            type: "category",
            inverse: true,
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 15,
                color: "black",
              },
            },
            data: this.labNames,
          },
          xAxis: {
            type: "value",
            max: 1,
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 13,
                color: "black",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          series: [
            {
              data: this.rate,
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "right",
                    textStyle: {
                      color: "gray",
                      fontSize: 14,
                    },
                  },
                },
              },
            },
          ],
        });
        // 自适应高度
        this.labCounts = response.data.length;
        this.autoHeigth = this.labCounts * 90 + 70; // this.counts为柱状图的条数，即数据长度
        labuserate.getDom().style.height = this.autoHeigth + "px";
        labuserate.resize();
      });
    },
    getCollege() {
      // 基于准备好的dom，初始化echarts实例
      let college = echarts.init(this.$refs.college);

      collegeapply({
        year: this.$refs.timeSelect.year,
        term: this.$refs.timeSelect.semester,
      }).then((response) => {
        college.clear();
        college.setOption({
          title: {
            text: "学院实验室申请率",
          },
          tooltip: { trigger: "item" },
          legend: {
            bottom: 10,
            left: "center",
          },
          series: [
            {
              type: "pie",
              radius: "50%",
              data: response.data.length > 0 ? response.data : this.pie,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      });
    },
    /** 导出按钮操作 */
    exportCollege() {
      this.$confirm("是否确认导出学院实验室申请率，实验室使用情况?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // TODO
        this.$message({
          type: "success",
          message: "导出成功",
        });
      });
    },
  },
};
</script>
<style scoped>
</style>