<template>
  <div class="container">
    <!-- 成绩统计区域 -->
    <div class="container_box">
      <div class="box_title">
        <img src="@/assets/images/box-icon.png" />
        成绩统计
      </div>

      <!-- 筛选框区域 -->
      <div class="box_select">
        <span>考试名称</span>
        <el-select
          v-model="value"
          placeholder="请选择学期"
          style="width: 206px"
        >
          <el-option
            v-for="item in optionsTime"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <!-- 图表展示区域 -->
      <div class="box_chart" ref="barChart"></div>
    </div>

    <!-- 考评记录区域 -->
    <div class="container_box">
      <div class="box_title">
        <img src="@/assets/images/box-icon.png" />
        考评记录
      </div>

      <div class="box_form form">
        <el-table :data="tableData">
          <el-table-column
            prop="time"
            label="考评时间"
            align="center"
            width="150"
          />
          <el-table-column prop="leave" label="考评等级" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Echarts from "echarts";

let myBarChart: any;
const barChart = ref();

const value = ref("");

const optionsTime = [
  {
    value: "0",
    label: "2022-2023",
  },
  {
    value: "1",
    label: "2021-2022",
  },
  {
    value: "2",
    label: "2020-2021",
  },
];

const tableData = [
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
];

onMounted(() => {
  myBarChart = Echarts.init(barChart.value);
  initBarChart();
});

const initBarChart = () => {
  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "13%",
      left: "8%",
      right: "4%",
      bottom: "18%",
    },
    xAxis: {
      type: "category",
      data: ["语文", "历史", "数学", "英语", "物理", "化学", "地理", "生物"],
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 12,
        interval: 0,
        fontSize: 14,
        color: "#fff",
      },
    },
    yAxis: {
      name: "分数",
      nameTextStyle: {
        fontSize: 14,
        color: "#fff",
      },
      type: "value",
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(108, 128, 151, 0.5)",
        },
      },
    },
    series: [
      {
        data: [80, 45, 99, 78, 52, 96, 82, 86],
        type: "bar",
        barWidth: "60%",
        label: {
          show: true,
          position: "top",
          distance: 5,
          color: "#14B6F3",
          fontSize: 14,
        },
        itemStyle: {
          color: new Echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: "#0336FF" },
            { offset: 1, color: "#01B4FF" },
          ]),
        },
      },
    ],
  };

  myBarChart.setOption(options);
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 500px;
  height: 834px;
  color: #fff;

  .container_box {
    padding: 17px 0 0 22px;
    width: 500px;
    height: 412px;
    background-image: url(@/assets/images/box-bg5.png);
    background-size: 100% 100%;

    .box_title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      img {
        margin-right: 12px;
        width: 24px;
        height: 24px;
      }
    }

    .box_select {
      display: flex;
      align-items: center;
      margin: 31px 0 31px 170px;
      font-size: 14px;

      span {
        margin-right: 13px;
      }
    }

    .box_chart {
      height: 270px;
    }

    .box_form {
      padding-right: 44px;
      margin-top: 48px;
      height: 287px;
      overflow: hidden;
    }
  }
}

// 修改select背景颜色
::v-deep(.el-input__wrapper) {
  background: transparent;
  background-color: rgba(48, 75, 95, 0.5);
}

// 修改select筛选框文字颜色
::v-deep(.el-input__inner) {
  color: #fff;
}

/*最外层透明*/
.form ::v-deep(.el-table),
.form ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.form ::v-deep(.el-table th),
.form ::v-deep(.el-table tr),
.form ::v-deep(.el-table td),
::v-deep(.el-table th.el-table__cell.is-leaf) {
  background-color: transparent !important;
  color: white;
  font-size: 12px;
  border-color: rgba(255, 255, 255, 0.1);
  height: 40px;
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(58, 126, 199, 0.5);
}
// 清除表格默认padding
::v-deep(.el-table .cell) {
  padding: 0;
}

// 动画滚动
// ::v-deep(.el-scrollbar__view) {
//   animation: run 12s linear infinite;
// }
</style>
