<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="78px">
      <el-form-item label="级部" prop="">
        <el-select v-model="queryParams.gradeId" placeholder="请选择级部" clearable>
          <el-option v-for="(item, index) in gradeList" :key="index" :label="item.gradeName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="实验名称" prop="" label-width="80px">
        <el-input v-model="queryParams.experimentName" placeholder="请输入实验名称" clearable />
      </el-form-item>
      <el-form-item label="学期">
        <el-date-picker v-model="queryParams.schoolYear" type="year" value-format="yyyy" placeholder="选择年">
        </el-date-picker>
        <el-select v-model="queryParams.semester" placeholder="请选择学期">
          <el-option label="上学期" value="1"></el-option>
          <el-option label="下学期" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableData" stripe>
      <el-table-column fixed="left" label="序号" type="index" width="55" align="center" />
      <el-table-column label="级部" align="center" prop="grade" />
      <el-table-column label="实验名称" align="center" prop="experimentName" />
      <el-table-column label="学年" align="center" prop="schoolYearSemester" />
      <el-table-column label="总班级数" align="center" prop="totalClass" />
      <el-table-column label="已完成班级数" align="center" prop="completeClass" />
      <el-table-column label="完成比例" align="center" prop="ratio" />
      <el-table-column fixed="right" label="操作" align="center" prop="orgname" width="150">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="handleLook(row)">查看班级完成情况</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination ref="pageBlock" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />
    <!-- 查看弹窗 -->
    <el-dialog title="实验名称:物理研究" :visible.sync="dialogTableVisible" width="80%">
      <el-form :model="form" ref="form" size="small" :inline="true" label-width="88px">
        <el-form-item label="实验分类">
          <el-select v-model="form.experimentClassify" placeholder="请选择" clearable>
            <el-option v-for="dict in dict.type.experiment_classify" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="form.className" placeholder="请输入班级" clearable></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="form.startTime" type="date" placeholder="选择" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="form.endTime" type="date" placeholder="选择" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getListtc">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="ExperimentalData" border style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="55" />
        <el-table-column align="center" prop="experimentClassify" label="实验分类">
          <template slot-scope="{ row }">
            <div>{{ selectDictLabel(dict.type.experiment_classify, row.experimentClassify) }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="className" label="班级" />
        <el-table-column align="center" prop="experimentTime" label="实验时间" />
        <el-table-column align="center" prop="section" label="节次" />
        <el-table-column align="center" prop="state" label="附件">
          <template slot-scope="scope">
            <span v-if="scope.row.state === '0'">未上报</span>
            <span v-else-if="scope.row.state === '1'">已上报</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>


    </el-dialog>

  </div>
</template>

<script>
import {
  getList,
  getSemester,
  getTeacherxq,
  getGrade
} from '@/api/smartSchool/laboratoryManagement/laboratoryExecution'
export default {
  dicts: ['experiment_classify', 'lab_sub'],
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schoolYear: "",
        semester: "",
        sub: "",
        grade: "",
        experimentName: "",
      },
      //查看弹窗表格
      ExperimentalData: [],
      //弹窗
      dialogTableVisible: false,
      form: {
        experimentPlanId: "",
        experimentClassify: "",
        className: "",
        startTime: "",
        endTime: "",
      },
      loading: false,
      total: 0,
      //级部
      gradeList: [],
      tableData: [],
      isMultiple: false, // table是否有选择
      dialogTitle: '', //弹窗标题
      dialogVisible: false,
      dialogParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dialogTotal: 0,
      dialogData: []
    }
  },
  created() {
    this.getSemesterAndList();
    this.getListtc();
    this.getGrade();
  },
  methods: {
    async getSemesterAndList() {
      await this.getSemester(); // 等待获取学年和学期信息
      this.getList(); // 获取数据列表
    },
    getSemester() {
      return new Promise((resolve, reject) => {
        getSemester()
          .then(response => {
            this.queryParams.semester = response.semester;
            this.queryParams.schoolYear = response.schoolYear + '';
            resolve(); // 成功获取学年和学期信息
          })
          .catch(error => {
            console.log(error);
            reject(error);
          });
      });
    },
    getList() {
      getList(this.queryParams)
        .then(response => {
          this.tableData = response.rows;
          console.log('response', response);
          this.total = response.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
          console.log(error);
        });
    },
    //查询级部
    getGrade() {
      getGrade().then(response => {
        this.loading = false;
        this.gradeList = response.data;
        console.log("this.gradeList", this.gradeList);

      });
    },
    //查看按钮
    handleLook(row) {
      console.log(row);
      console.log(this.form.id);
      // 设置 dialogTableVisible 为 true，显示弹窗
      this.dialogTableVisible = true;
      // 根据 row 的数据构建请求参数
      const params = {
        experimentPlanId: row.id,
        experimentClassify: this.form.experimentClassify,
        className: this.form.className,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      };
      getTeacherxq(params).then(response => {
        this.ExperimentalData = response.rows;
        this.loading = false;
      }).catch(error => {

      });
    },


    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        schoolYear: "",
        semester: "",
        sub: "",
        grade: "",
        experimentName: "",
      },
        this.getList();
    },
    //弹窗获取表单
    getListtc() {
      const params = {
        experimentPlanId: this.form.id,
        experimentClassify: this.form.experimentClassify,
        className: this.form.className,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      };
      getTeacherxq(params).then(response => {
        this.ExperimentalData = response.rows;
      }).catch(error => {

      });
    },
    //弹窗重置按钮
    resetQuerytc() {
      this.form = {
        experimentPlanId: "",
        experimentClassify: "",
        className: "",
        startTime: "",
        endTime: "",
      };

      this.getListtc();
    },

  },
}
</script>

<style lang="scss" scoped></style>
