<template>
  <div style="width: 100%">
    <el-main>
      <div class="tou">
        <span>创新</span>
      </div>
      <div class="pb_content_body">
        <div class="student_head">
          <div class="student_search">
            <div style="color: #ababab; font-size: 15px; min-width: 70px">
              条件筛选
            </div>
            <el-select
              v-model="schoolX"
              placeholder="筛选的学校"
              style="min-width: 150px; margin-right: 5px"
              @change="search('school')"
              disabled
            >
              <el-option label="所有学校" value=""></el-option>
              <el-option
                v-for="item in schoolList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="classX"
              placeholder="筛选的班级"
              no-data-text="此学校暂无班级"
              style="min-width: 150px"
              @change="search"
            >
              <el-option label="所有班级" value=""></el-option>
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
            <span>
              <el-input
                placeholder="请输入用户名"
                v-model="studentnameA"
                clearable
                style="margin-left: 5px; width: 190px"
              >
              </el-input>
            </span>
            <el-button type="primary" @click="search">查询</el-button>
          </div>
          <div class="student_button">共{{ total }}名学生</div>
        </div>
        <div class="student_table">
          <el-table
            ref="table"
            :data="tableData"
            border
            :height="tableHeight"
            :fit="true"
            style="width: 100%"
            :header-cell-style="{ background: '#f1f1f1' }"
            :row-class-name="tableRowClassName"
            v-loading="loading"
          >
            <el-table-column prop="name" label="姓名" min-width="10">
            </el-table-column>
            <el-table-column prop="school" label="学校" min-width="10">
            </el-table-column>
            <el-table-column prop="class" label="班级" min-width="10">
            </el-table-column>
            <el-table-column label="操作" min-width="10">
              <template slot-scope="scope">
                <!-- slot-scope="scope" -->
                <el-button
                  @click="goTo('/new/newDetail?id='+scope.row.userid)"
                  type="text"
                  size="small"
                  >点击查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="student_page">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="10"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      schoolX:"",
      classX: "",
      studentnameA: "",
      classList: [],
      schoolList:[],
      tableHeight: 50,
      formLabelWidth: "100px",
      loading: false,
      tableData: [
        // { name: "张子林", school: "苏州大学", class: "一年级一班", id: 1 },
        // { name: "张三", school: "苏州大学", class: "一年级一班", id: 2 },
        // { name: "里斯", school: "苏州大学", class: "一年级一班", id: 3 },
        // { name: "梁思成", school: "苏州大学", class: "一年级一班", id: 4 },
      ],
      page: 1,
      total: 0,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
    });
  },
  methods: {
    search(who) {
      who=='school'?this.classX='':'';
      this.getStudent();
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getNews();
      console.log(`当前页: ${val}`);
    },
    goTo(path) {
      this.$router.push(path);
    },
    getStudent() {
      this.loading = true;
      let params = {
        // uid:this.$store.state.userInfo.userid,
        scid:this.schoolX,
        cx:this.classX,
        st:this.studentnameA,
        page: this.page,
        };
      this.ajax
        .get(this.$store.state.api + "getNewStudentAdmin", params)
        .then((res) => {
          console.log(res.data)
          this.tableData=[];
          this.classList=[];
          this.schoolList=[];
          res.data[0].forEach(item=>{
            this.tableData.push({name:item.name,school:item.stname,class:item.classname?item.classname:'暂无班级',userid:item.userid,num:item.num})
          });
          res.data[1].forEach(item=>{
            this.schoolX?item.name?this.classList.push({id:item.id,name:item.name}):'':'';
            // this.classList.push({id:item.id,name:item.name});
          })
          res.data[2].forEach(item=>{
            this.schoolList.push({id:item.id,name:item.name});
          })
          this.total = this.tableData.length;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          console.error(err);
        });
    },
  },
  created(){
    this.schoolX = this.$store.state.userInfo.organizeid;
    this.getStudent();
    console.log(this.$store.state.userInfo);
  }
};
</script>

<style scoped>
.student_table {
  margin: 20px 0;
}

.el-table >>> .even_row {
  background-color: #f1f1f1;
}
.el-table >>> .cell {
  white-space: nowrap;
}
.student_head >>> .el-button--primary {
  background-color: #2268bc;
  border: none;
}
.student_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.student_search {
  display: flex;
  min-width: 315px;
  width: 30%;
  align-items: center;
}
.student_search span {
  margin: 0 10px 0 0;
}
.student_button {
  display: flex;
  overflow: hidden;
  height: 40px;
  align-items: center;
}
.student_button .el-button--primary {
  margin-right: 10px;
}
</style>
