<template>
  <div class="bbsl-common-page">
    <div class="bbsl-table-search">
      <el-form v-model="queryParam" :inline="true">
        <el-form-item label="试卷名称：">
          <el-input
            v-model="querys[0].value"
            clearable
            maxlength="128"
            placeholder="请输入试卷名称"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="课目：">
          <el-select
            v-model="querys[1].value"
            clearable
            filterable
            placeholder="请选择课目"
          >
            <el-option
              v-for="item in subjectsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试时间：">
          <el-date-picker
            v-model="querys[2].value"
            end-placeholder="结束日期"
            start-placeholder="开始日期"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleSearch"
            >搜索
          </el-button>
          <el-button type="text" @click.stop="openMore"
            >更多
            <i
              :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            ></i>
          </el-button>
        </el-form-item>
        <div
          v-if="showMore"
          class="bbsl-search-more"
          style="width: 350px; height: 65px;border-radius: 15px;"
        >
          <el-row>
            <el-col>
              <el-form-item label="试卷状态：">
                <el-select
                  v-model="querys[4].value"
                  clearable
                  placeholder="请选择试卷状态"
                >
                  <el-option
                    v-for="item in sjztList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div ref="contentPanel" class="bbsl-table-content">
      <div ref="btnPanel" class="bbsl-btn-content">
        <el-tabs v-model="activeName" @tab-click="handleTab">
          <el-tab-pane label="待答卷" name="first"></el-tab-pane>
          <el-tab-pane label="已交卷" name="second"></el-tab-pane>
          <el-tab-pane label="已阅卷" name="third"></el-tab-pane>
          <el-tab-pane label="补考申请" name="fourth"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- <el-tab-pane label="待答卷" name="first"> -->
      <el-table
        ref="multipleSelection"
        v-loading="loading"
        :cell-style="{'text-align': 'center'}"
        :data="tableData"
        :header-cell-style="{'text-align': 'center'}"
        :max-height="tableMaxHeight - 70"
        :style="{width: '100%'}"
        size="mini"
        @row-dblclick="handleDbClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="试卷名称" prop="paperName" width="160">
        </el-table-column>
        <el-table-column
          label="课目"
          prop="subjectName"
          show-overflow-tooltip
          width="160"
        >
        </el-table-column>
        <el-table-column label="考试场地" min-width="120" prop="roomName">
        </el-table-column>
        <el-table-column label="考试状态" min-width="120" prop="statusName">
        </el-table-column>
        <el-table-column
          label="试卷状态"
          min-width="120"
          prop="paperStatusName"
        >
        </el-table-column>
        <el-table-column label="考核类型" min-width="120" prop="paperTypeName">
        </el-table-column>
        <el-table-column label="总分" min-width="80" prop="totalScore">
        </el-table-column>
        <el-table-column
          label="总时长(分)"
          min-width="120"
          prop="timeLength"
          sortable
        >
        </el-table-column>
        <el-table-column
          label="题目总数"
          min-width="100"
          prop="totalNumber"
          sortable
        >
        </el-table-column>
        <el-table-column
          label="试卷开始时间"
          min-width="180"
          prop="planStartTime"
          sortable
        >
        </el-table-column>
        <el-table-column
          label="试卷结束时间"
          min-width="180"
          prop="planEndTime"
          sortable
        >
        </el-table-column>
        <el-table-column
          v-if="activeName == 'second'"
          label="交卷时间"
          min-width="180"
          prop="endTime"
          sortable
        >
        </el-table-column>
        <el-table-column
          v-if="activeName == 'third'"
          label="阅卷时间"
          min-width="180"
          prop="markTime"
        >
        </el-table-column>
        <el-table-column
          v-if="activeName == 'fourth'"
          label="申请时间"
          min-width="180"
          prop="applyTime"
          sortable
        >
        </el-table-column>
        <el-table-column
          v-if="activeName == 'first'"
          fixed="right"
          label="操作"
          min-width="150"
        >
          <template v-if="activeName == 'first'" #default="scope">
            <el-dropdown
              split-button
              @click="toPreview(scope.row)"
              @command="
                command => {
                  handleClick(command, scope.row)
                }
              "
            >
              <span
                v-if="
                  scope.row.status == 1 ||
                    (scope.row.status == 8 && scope.row.paperStatus == 1)
                "
                >开始考试</span
              >
              <span v-if="scope.row.status == 2 && scope.row.paperStatus == 1"
                >继续考试</span
              >
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-if="scope.row.status == 1 && scope.row.paperStatus == 2"
                  command="0"
                >
                  申请补考
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.status > 2" command="1"
                  >查看试卷
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-tab-pane>
				<el-tab-pane label="已交卷" name="second">
					<el-table size="mini" v-loading="loading" ref="multipleSelection" :data="tableData"
						:style="{width: '100%'}" :max-height="tableMaxHeight - 70"
						:cell-style="{'text-align': 'center'}" :header-cell-style="{'text-align': 'center'}"
						@row-dblclick="handleDbClick" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column width="160" prop="paperName" label="试卷名称">
						</el-table-column>
						<el-table-column width="160" prop="subjectName" label="课目" show-overflow-tooltip>
						</el-table-column>
						<el-table-column min-width="120" prop="roomName" label="考试场地">
						</el-table-column>
						<el-table-column min-width="120" prop="statusName" label="考试状态">
						</el-table-column>
						<el-table-column min-width="120" prop="paperStatusName" label="试卷状态">
						</el-table-column>
						<el-table-column min-width="120" prop="paperTypeName" label="考核类型">
						</el-table-column>
						<el-table-column min-width="80" prop="totalScore" label="总分">
						</el-table-column>
						<el-table-column min-width="120" sortable prop="timeLength" label="总时长(分)">
						</el-table-column>
						<el-table-column min-width="100" sortable prop="totalNumber" label="题目总数">
						</el-table-column>
						<el-table-column min-width="180" sortable prop="planStartTime" label="试卷开始时间">
						</el-table-column>
						<el-table-column min-width="180" sortable prop="planEndTime" label="试卷结束时间">
						</el-table-column>
						<el-table-column min-width="180" sortable prop="endTime" label="交卷时间">
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="已阅卷" name="third">
					<el-table size="mini" v-loading="loading" ref="multipleSelection" :data="tableData"
						:style="{width: '100%'}" :max-height="tableMaxHeight - 70"
						:cell-style="{'text-align': 'center'}" :header-cell-style="{'text-align': 'center'}"
						@row-dblclick="handleDbClick" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column width="160" prop="paperName" label="试卷名称">
						</el-table-column>
						<el-table-column width="160" prop="subjectName" label="课目" show-overflow-tooltip>
						</el-table-column>
						<el-table-column min-width="120" prop="roomName" label="考试场地">
						</el-table-column>
						<el-table-column min-width="120" prop="statusName" label="考试状态">
						</el-table-column>
						<el-table-column min-width="120" prop="paperStatusName" label="试卷状态">
						</el-table-column>
						<el-table-column min-width="120" prop="paperTypeName" label="考核类型">
						</el-table-column>
						<el-table-column min-width="80" prop="totalScore" label="总分">
						</el-table-column>
						<el-table-column min-width="120" sortable prop="timeLength" label="总时长(分)">
						</el-table-column>
						<el-table-column min-width="100" sortable prop="totalNumber" label="题目总数">
						</el-table-column>
						<el-table-column min-width="80" prop="sysScore" label="得分">
						</el-table-column>
						<el-table-column min-width="180" sortable prop="planStartTime" label="试卷开始时间">
						</el-table-column>
						<el-table-column min-width="180" sortable prop="planEndTime" label="试卷结束时间">
						</el-table-column>
						<el-table-column min-width="180" prop="markTime" label="阅卷时间">
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="补考申请 " name="fourth">
					<el-table size="mini" v-loading="loading" ref="multipleSelection" :data="tableData"
						:style="{width: '100%'}" :max-height="tableMaxHeight - 70"
						:cell-style="{'text-align': 'center'}" :header-cell-style="{'text-align': 'center'}"
						@row-dblclick="handleDbClick" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column width="160" prop="paperName" label="试卷名称">
						</el-table-column>
						<el-table-column width="160" prop="subjectName" label="课目" show-overflow-tooltip>
						</el-table-column>
						<el-table-column min-width="100" prop="subjectName" label="课目名称" show-overflow-tooltip>
						</el-table-column>
						<el-table-column min-width="120" prop="roomName" label="考试场地">
						</el-table-column>
						<el-table-column min-width="120" prop="statusName" label="考试状态">
						</el-table-column>
						<el-table-column min-width="120" prop="paperStatusName" label="试卷状态">
						</el-table-column>
						<el-table-column min-width="120" prop="paperTypeName" label="考核类型">
						</el-table-column>
						<el-table-column min-width="80" prop="totalScore" label="总分">
						</el-table-column>
						<el-table-column min-width="120" sortable prop="timeLength" label="总时长(分)">
						</el-table-column>
						<el-table-column min-width="100" sortable prop="totalNumber" label="题目总数">
						</el-table-column>
						<el-table-column min-width="180" sortable prop="planStartTime" label="试卷开始时间">
						</el-table-column>
						<el-table-column min-width="180" sortable prop="planEndTime" label="试卷结束时间">
						</el-table-column>
						<el-table-column min-width="180" sortable prop="applyTime" label="申请时间">
						</el-table-column>
					</el-table>
				</el-tab-pane> -->
      <el-pagination
        ref="paginationPanel"
        :current-page="queryParam.pageBean.page"
        :page-size="queryParam.pageBean.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        :total="total"
        align="right"
        background
        class="bbsl-pagination"
        layout="prev, pager, next,total, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import myTaskMenu from '@/api/examination/myTaskMenu.js'
import subMenu from '@/api/examination/subMenu.js'

export default {
  name: 'dpsjMenu',
  components: {},
  mixins: [TableMixin],
  data() {
    return {
      showMore: false,
      querys: [
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'b.name_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'b.subject_id_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'time',
          operation: 'BETWEEN',
          parentGroup: '',
          property: 'sp.plan_start_time_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'IN',
          parentGroup: '',
          property: 's.status_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'IN',
          parentGroup: '',
          property: 'paperStatus',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'b.paper_type_',
          relation: 'AND',
          value: ''
        }
      ],
      tableData: [],
      CourseList: [],
      spaceList: [],
      TestStatusList: [],
      examineeList: [],
      ksztList: [], //考试状态
      sjztList: [], //试卷状态
      activeName: 'first',
      subjectsList: [],
      khlxList: [] //考核类型
    }
  },
  created() {
    this.getSubjects()
    this.ksztList = dictUtils.getDictItemsFromCache('kszt')
    this.sjztList = dictUtils.getDictItemsFromCache('sjzt')
    this.khlxList = dictUtils.getDictItemsFromCache('khlx')
  },

  mounted() {},
  methods: {
    // 打开搜索更多
    openMore() {
      this.showMore = !this.showMore
    },
    // 重置
    clearQuerys() {
      this.querys[0].value = ''
      this.querys[1].value = ''
    },
    // 获取list
    loadData(page) {
      if (page) {
        this.queryParam.pageBean.page = page
      }
      if (this.activeName == 'first') {
        this.querys[3].value = '1,2,8'
      } else if (this.activeName == 'second') {
        this.querys[3].value = '3,4'
      } else if (this.activeName == 'third') {
        this.querys[3].value = '5'
      } else if (this.activeName == 'fourth') {
        this.querys[3].value = '6,7,8'
      }
      this.loading = true
      this.tableData = []
      this.queryParam.querys = []
      this.queryParam.sorter = [
        {
          direction: 'ASC',
          property: 'status'
        }
      ]
      if (this.querys[0].value) {
        this.queryParam.querys.push(this.querys[0])
      }
      if (this.querys[1].value) {
        this.queryParam.querys.push(this.querys[1])
      }
      if (this.querys[2].value) {
        this.queryParam.querys.push(this.querys[2])
      }
      if (this.querys[3].value) {
        this.queryParam.querys.push(this.querys[3])
      }
      if (this.querys[4].value) {
        this.queryParam.querys.push(this.querys[4])
      }
      if (this.querys[5].value) {
        this.queryParam.querys.push(this.querys[5])
      }
      myTaskMenu.myPaper(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows
        this.tableData.forEach(t => {
          this.ksztList.forEach(k => {
            if (t.status == k.value) {
              t.statusName = k.name
            }
          })
          this.sjztList.forEach(k => {
            if (t.paperStatus == k.value) {
              t.paperStatusName = k.name
            }
          })
          this.khlxList.forEach(k => {
            if (t.paperType == k.value) {
              t.paperTypeName = k.name
            }
          })
        })
        this.$set(this.tableData)
        this.loading = false
      })
    },
    toPreview(val) {
      this.$router.push({
        name: 'previewTestPaper',
        params: {
          id: val.id
        }
      })
    },
    handleClick(command, val) {
      console.log(command, val)
      if (command == 0) {
        myTaskMenu.applyExamPaper(val.id, res => {
          if (res.state) {
            this.$message({
              message: '申请成功',
              type: 'success'
            })
          }
        })
      }
    },
    handleTab() {
      this.loadData(1)
    },
    //获取课目
    getSubjects() {
      let params = {
        pageBean: {
          pageSize: -1,
          page: -1
        }
      }
      subMenu.getSubjects(params, res => {
        if (res.rows) {
          this.subjectsList = res.rows
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.type-tag {
  margin: 0 2px;
}

::v-deep .el-tabs__item:focus.is-active.is-focus:not(:active) {
  box-shadow: none;
}
</style>
