<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="60px">
      <el-form-item label="级部" prop="">
        <el-select v-model="queryParams" placeholder="请选择级部" clearable>
          <!--            <el-option v-for="(item, index) in dict.type.exam_type" :key="index" :label="item.label"-->
          <!--                       :value="item.value"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item label="实验名称" prop="" label-width="80px">
        <el-input v-model="queryParams" placeholder="请输入实验名称" clearable />
      </el-form-item>
      <el-form-item label="学年" prop="">
        <el-date-picker v-model="queryParams" type="year" placeholder="请选择学年"></el-date-picker>
      </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-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleOption(0)">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="!isMultiple"
          @click="handleDelete">批量删除</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="tableData" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column fixed="left" label="序号" type="index" width="55" align="center" />
      <el-table-column label="级部" align="center" prop="totalScore" />
      <el-table-column label="实验名称" align="center" prop="totalScore" />
      <el-table-column label="学年" align="center" prop="ranking" />
      <el-table-column label="总班级数" align="center" prop="language" />
      <el-table-column label="已完成班级数" align="center" prop="ywRanking" />
      <el-table-column label="未完成班级数" align="center" prop="math" />
      <el-table-column label="完成比例" align="center" prop="sxRanking" />
      <el-table-column fixed="right" label="操作" align="center" prop="orgname" width="150">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="handleOption(2, 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='`实验名称：${dialogTitle}`' :visible.sync="dialogVisible" width="80%">
      <el-form :model="dialogParams" ref="queryForm" size="small" :inline="true" label-width="80px">
        <el-form-item label="实验分类" prop="">
          <el-select v-model="dialogParams" placeholder="请选择实验分类" clearable>
            <!--            <el-option v-for="(item, index) in dict.type.exam_type" :key="index" :label="item.label"-->
            <!--                       :value="item.value"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="">
          <el-input v-model="dialogParams" placeholder="请输入班级" clearable />
        </el-form-item>
        <el-form-item label="实验时间" prop="">
          <el-date-picker v-model="dialogParams" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dialogData" stripe>
        <el-table-column fixed="left" label="序号" type="index" width="55" align="center" />
        <el-table-column label="实验分类" align="center" prop="math" />
        <el-table-column label="班级" align="center" prop="ywRanking" />
        <el-table-column label="实验时间" align="center" prop="ywRanking" />
        <el-table-column label="节次" align="center" prop="sxRanking" />
        <el-table-column label="附件" align="center" prop="orgname" width="150">
          <template slot-scope="{ row }">
          </template>
        </el-table-column>
      </el-table>
      <pagination ref="pageBlock" v-show="dialogTotal > 0" :total="dialogTotal" :page.sync="dialogParams.pageNum"
        :limit.sync="dialogParams.pageSize" @pagination="" />
    </el-dialog>
    <!-- 新增、编辑、查看弹窗 -->

  </div>
</template>

<script>
import {
  getList,
  getSemester,
  getTeacherxq
} from '@/api/smartSchool/laboratoryManagement/laboratoryExecution'
export default {
  dicts: ['exam_type'],
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      total: 0,
      tableData: [],
      isMultiple: false, // table是否有选择
      dialogTitle: '', //弹窗标题
      dialogVisible: false,
      dialogParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dialogTotal: 0,
      dialogData: []
    }
  },
  mounted() {
  },
  methods: {
    //获取列表数据
    getList() { },
    //重置
    resetQuery() { },
    //删除
    handleDelete() { },
    //编辑 0新增 1编辑 2查看
    handleOption(type) {
      this.nowOption = type
      if (type == 0) {
        this.dialogTitle = '新增实验室记录'
      } else if (type == 1) {
        this.dialogTitle = '编辑实验室记录'
      } else {
        this.dialogTitle = '查看实验室记录'
      }
      this.dialogVisible = true
    },

    handleSelectionChange(val) {
      this.isMultiple = val.length == 0 ? false : true
    }
  },
}
</script>

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