<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 ksztList"
              :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">
        <el-tabs v-model="querys[3].value" @tab-click="handleTab">
          <el-tab-pane
            v-for="item in khlxList"
            :label="item.name"
            :name="item.value"
            :key="item"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <el-table
        ref="multipleSelection"
        v-loading="loading"
        :cell-style="{'text-align': 'center'}"
        :data="tableData"
        :header-cell-style="{'text-align': 'center'}"
        :max-height="tableMaxHeight"
        :style="{width: '100%'}"
        size="mini"
        @row-dblclick="handleDbClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          fixed
          label="序号"
          type="index"
          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="100"
          prop="subjectName"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="考试状态"
          min-width="100"
          prop="statusName"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="考核类型" min-width="120" prop="paperTypeName">
        </el-table-column>
        <el-table-column
          label="总分"
          min-width="70"
          prop="totalScore"
          show-overflow-tooltip
          sortable
        >
        </el-table-column>
        <el-table-column
          label="总时长"
          min-width="100"
          prop="timeLength"
          show-overflow-tooltip
          sortable
        >
        </el-table-column>
        <el-table-column
          label="得分"
          min-width="70"
          prop="sysScore"
          show-overflow-tooltip
          sortable
        >
        </el-table-column>
        <el-table-column
          label="用时"
          min-width="100"
          prop="answerTime"
          show-overflow-tooltip
          sortable
        >
        </el-table-column>
        <el-table-column
          label="交卷时间"
          min-width="150"
          prop="endTime"
          show-overflow-tooltip
          sortable
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="handleClick(scope.row)"
              >查看试卷
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <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 kscjMenu from '@/api/examination/kscjMenu.js'
import subMenu from '@/api/examination/subMenu.js'

export default {
  name: 'ypMenu',
  components: {},
  mixins: [TableMixin],
  data() {
    return {
      // 模拟数据
      tableData: [],
      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: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 's.status_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'b.paper_type_',
          relation: 'AND',
          value: '1'
        }
      ],
      ksztList: [],
      subjectsList: [],
      khlxList: [] //考核类型
    }
  },
  created() {
    this.getSubjects()
    this.ksztList = dictUtils.getDictItemsFromCache('kszt')
    this.khlxList = dictUtils.getDictItemsFromCache('khlx')
  },
  mounted() {},
  methods: {
    handleTab() {
      this.loadData(1)
    },
    // 打开搜索更多
    openMore() {
      this.showMore = !this.showMore
    },
    // 重置
    clearQuerys() {
      this.querys[0].value = ''
      this.querys[1].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])
      }
      kscjMenu.myResultsQuery(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows
        this.tableData.forEach(e => {
          this.ksztList.forEach(k => {
            if (e.status == k.value) {
              e.statusName = k.name
            }
          })
          this.khlxList.forEach(k => {
            if (e.paperType == k.value) {
              e.paperTypeName = k.name
            }
          })
        })
        this.$set(this.tableData)
        this.loading = false
      })
    },
    handleClick(val) {
      this.$router.push({
        name: 'lookPaper',
        params: val,
        query: {type: 1}
      })
    },
    // 导入
    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>
