<template>
  <div>
    <back-box>
      <template slot="title">
        <span>发卡记录</span>
      </template>
    </back-box>
    <div class="page-content">
      <div class="answer-header">
        <div class="sel-box">
          <el-cascader
            class="sel"
            collapse-tags
            clearable
            placeholder="选择班级"
            v-model="query.classId"
            :options="gradeList"
            :props="props"
            :show-all-levels="false"
          ></el-cascader>
          <el-input
            placeholder="请输入学生姓名"
            v-model="query.studentName"
            class="input-with-select"
            @keyup.enter.native="_QueryData(2)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="_QueryData(1)"
            ></el-button>
          </el-input>
          <el-input
            placeholder="请输入学生学号"
            v-model="query.studentCode"
            class="input-with-select"
            @keyup.enter.native="_QueryData(3)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="_QueryData(2)"
            ></el-button>
          </el-input>
          <el-button type="primary" round @click="_QueryData(1)"
            >筛选</el-button
          >
        </div>
      </div>
      <div class="table-box">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            align="center"
            label="答题器编码"
            prop="sn"
          ></el-table-column>
          <el-table-column
            align="center"
            label="班级"
            prop="className"
          ></el-table-column>
          <el-table-column
            align="center"
            label="学生姓名"
            prop="studentName"
          ></el-table-column>
          <el-table-column
            align="center"
            label="学号"
            prop="studentId"
          ></el-table-column>
          <el-table-column
            align="center"
            label="类型"
            prop="type"
          ></el-table-column>
          <el-table-column
            align="center"
            label="描述"
            prop="desc"
          ></el-table-column>
          <el-table-column
            align="center"
            label="操作时间"
            prop="time"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: { multiple: true, checkStrictly: false },
      query: {
        classId: [],
        studentName: "",
        studentCode: "",
      },
      gradeList: [],
      tableData: [
        {
          sn: 2543641,
          className: "xxx",
          studentName: "xxxx",
          studentId: 563456,
          type: "换卡",
          desc: "xxxxx",
          time: "20:00:00",
        },
      ],
    };
  },
  created() {
    this._QueryGradeList();
  },
  methods: {
    // 查找班级
    async _QueryGradeList() {
      this.loading = true;
      const { data, status, info } = await this.$request.gradeList();
      console.log(status);
      if (status === 0) {
        if (!!data.list) {
          this.gradeList =
            data.list?.map((item) => {
              let gradeList = {
                value: item.grade,
                label: item.gradeName,
              };
              gradeList.children =
                item.classList?.map((items) => {
                  return {
                    value: items.classCode,
                    label: items.className,
                  };
                }) || [];
              return gradeList;
            }) || [];
        }
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData(type) {
      let query = {};
      query.gradeName = this.query.gradeName;
      query.classId = this.query.classId;
      if (type == 1) {
        query.classId = this.query.classId;
        this.query.studentCode = "";
        this.query.studentName = "";
      } else if (type == 2) {
        query.studentName = this.query.studentName;
        this.query.classId = "";
        this.query.studentCode = "";
      } else if (type == 3) {
        query.studentCode = this.query.studentCode;
        this.query.classId = "";
        this.query.studentName = "";
      }
      this.loading = true;
      const { data, status, info } = await this.$request.cardList({
        ...query,
      });
      this.loading = false;
      console.log(status);
      if (status === 0) {
        this.tableData = data.list || [];
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.table-box{
  padding:0 20px;
}
</style>