<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-select
            v-model="querys[2].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-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleSearch"
            >搜索
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div ref="contentPanel" class="bbsl-table-content">
      <div ref="btnPanel" class="bbsl-btn-content"></div>

      <el-tabs v-model="querys[3].value" @tab-click="handleTab">
        <el-tab-pane
          v-for="item in khlxList"
          :key="item"
          :label="item.name"
          :name="item.value"
        ></el-tab-pane>
        <el-table
          ref="multipleSelection"
          v-loading="loading"
          :cell-style="{'text-align': 'center'}"
          :data="tableData"
          :header-cell-style="{'text-align': 'center'}"
          :max-height="tableMaxHeight - 50"
          :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="试卷名称"
            min-width="150"
            prop="paperName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="课目"
            min-width="150"
            prop="subjectName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="试卷状态"
            min-width="100"
            prop="paperStatusName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="总分数"
            min-width="70"
            prop="totalScore"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="平均分"
            min-width="70"
            prop="avgScore"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="应考试人数"
            min-width="100"
            prop="totalNumber"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="实际考试人数"
            min-width="100"
            prop="actualCount"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="缺考人数"
            min-width="100"
            prop="lackCount"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="及格人数"
            min-width="100"
            prop="passCount"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="及格率(%)"
            min-width="100"
            prop="passPercentage"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </el-tabs>
      <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 bbtjMenu from '@/api/examination/bbtjMenu.js'
import subMenu from '@/api/examination/subMenu.js'

export default {
  name: 'kstjMenu',
  components: {},
  mixins: [TableMixin],
  data() {
    return {
      showMore: false,
      tableData: [],
      total: 2,
      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: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'paperStatus',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'b.paper_type_',
          relation: 'AND',
          value: '1'
        }
      ],
      sjztList: [],
      subjectsList: [],
      khlxList: [] //考核类型
    }
  },
  created() {
    this.getSubjects()
    this.khlxList = dictUtils.getDictItemsFromCache('khlx')
    this.sjztList = dictUtils.getDictItemsFromCache('sjzt')
  },
  mounted() {},
  methods: {
    // 打开搜索更多
    openMore() {
      this.showMore = !this.showMore
    },
    // 重置
    clearQuerys() {
      this.querys[0].value = ''
    },
    // 获取list
    loadData(page) {
      if (page) {
        this.queryParam.pageBean.page = page
      }
      this.loading = true
      this.tableData = []
      this.queryParam.querys = []
      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])
      }
      bbtjMenu.paperQuery(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows
        this.tableData.forEach(t => {
          this.sjztList.forEach(s => {
            if (t.paperStatus == s.value) {
              t.paperStatusName = s.name
            }
          })
        })
        this.$set(this.tableData)
        this.loading = false
      })
    },
    handleTab() {
      this.loadData(1)
    },
    handleClick() {},
    // 导入
    handleAvatarSuccess() {},
    beforeAvatarUpload() {},
    //获取课目
    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-col-1 {
  margin-left: -15px;
}

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