<template>
  <el-container style="min-height: 100vh">
      <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">
        <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
      </el-aside>

      <el-container>
        <el-header style="border-bottom:1px solid #ccc;">
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
        </el-header>

        <el-main>

          <div style="padding: 10px 0">
            <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
            <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5"></el-input>
            <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input>
            <el-button class="ml-5" type="primary">搜索</el-button>
          </div>

          <div style="margin:10px 0">
            <el-button type="primary">新增<i class="el-icon-circle-plus-outline"></i></el-button>
            <el-button type="danger">批量删除<i class="el-icon-circle-plus-outline"></i></el-button>
            <el-button type="primary">导入<i class="el-icon-circle-plus-outline"></i></el-button>
            <el-button type="primary">导出<i class="el-icon-circle-plus-outline"></i></el-button>
          </div>

          <el-table :data="tableData" border stripe header-row-class-name="headerBg">
            <el-table-column prop="sumclass" label="班级总数" width="140">
            </el-table-column>
            <el-table-column prop="sunnumclass" label="班级人数总数" width="120">
            </el-table-column>
            <el-table-column prop="exampapersum" label="试卷总数">
            </el-table-column>
            <el-table-column prop="sumtimu" label="题目总数">
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button type="success">编辑 <i class="el-icon-edit"></i></el-button>
                <el-button type="danger">删除 <i class="el-icon-circle-plus-outline"></i></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination
                :page-sizes="[5, 10, 15, 20]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>

import Aside from "@/components/Student/Aside.vue";
import Header from "@/components/Student/Header.vue";

export default {
  name: 'HomeView',
  components: {Aside,Header},
  data(){
    return {
      tableData: [],
      total:0,
      collapseBtnClass:'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true
    }
  },
  created() {
    // 使用 Vuex 的 getter 来获取 token
    const token = this.$store.state.token;
    console.log("token:",token);
    if (!token) {
      console.error('No token found, redirecting to login page...');
      this.$router.push({ name: 'login' });  // 跳转到登录页面
      return;
    }
    this.fetchHomePageData(token);
  },

  methods: {
    async fetchHomePageData(token) {
      try {
        const response = await fetch('http://localhost:8080/teacher/homepage/homepagesuju', {
          method: 'GET',
          headers: {
            'Authorization': token,
            'Content-Type': 'application/json',
          }
        });

        const data = await response.json();
        if (response.ok && data.code === 200) {
          const { sumclass, sunnumclass, exampapersum, sumtimu } = data.data;
          console.log("API Response:", data.data);

          this.tableData = [
            { sumclass, sunnumclass, exampapersum, sumtimu }
          ];
        } else {
          console.error('Failed to fetch data:', data.msg || 'Unknown error');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    collapse(){
      //点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if(this.isCollapse){
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      }else{
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    }
  }


}
</script>
