<template>
  <div>
    <el-dialog
      :before-close="handleClose"
      :close-on-click-modal="false"
      :visible="visible"
      custom-class="bbsl-location-dialog"
      title="详情"
      top="5vh"
      width="80%"
    >
      <div>
        <div class="search">
          <el-form v-model="queryParam" :inline="true">
            <el-form-item label="考生姓名：">
              <el-input
                v-model="querys[1].value"
                clearable
                placeholder="请输入考生姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="交卷时间：">
              <el-date-picker
                v-model="querys[0].value"
                end-placeholder="结束日期"
                range-separator="至"
                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="loadData(1)"
                >搜索
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div ref="contentPanel" class="content">
          <div ref="btnPanel" class="bbsl-btn-content"></div>
          <el-tabs v-model="querys[2].value" @tab-click="handleTab">
            <el-tab-pane
              v-for="item in khlxList"
              :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'}"
              :style="{width: '100%'}"
              size="mini"
              :max-height="330"
              @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
              >
                <template #default="scope">
                  <span
                    :style="{
                      color:
                        scope.row.status == 1
                          ? '#1E90FF'
                          : scope.row.status == 2
                          ? '#FFA500'
                          : scope.row.status == 3
                          ? '#00F5FF'
                          : scope.row.status == 4
                          ? '#FF3030'
                          : scope.row.status == 5
                          ? '#32CD32'
                          : ''
                    }"
                  >
                    {{ scope.row.statusName }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                v-if="querys[2].value == 2"
                label="年度上报"
                min-width="120"
                prop="reportStatus"
              >
                <template #default="scope">
                  {{
                    scope.row.reportStatus == 1
                      ? '已上报'
                      : scope.row.reportStatus == 0
                      ? '未上报'
                      : ''
                  }}
                </template>
              </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="100"
                prop="userName"
                show-overflow-tooltip
              >
              </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="150">
                <template #default="scope">
                  <el-dropdown
                    split-button
                    @click="handleClick(scope.row)"
                    @command="
                      command => {
                        preview(command, scope.row)
                      }
                    "
                  >
                    查看试卷
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        v-if="
                          scope.row.paperType == 1 ||
                            (scope.row.paperType == 2 &&
                              scope.row.reportStatus != 1)
                        "
                        >成绩调整
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </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>
    </el-dialog>
  </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: 'time',
          operation: 'BETWEEN',
          parentGroup: '',
          property: 's.end_time_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 's.user_name_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'b.paper_type_',
          relation: 'AND',
          value: '1'
        },
        {
          group: 'main',
          operation: 'IN',
          parentGroup: '',
          property: 's.paper_id_',
          relation: 'AND',
          value: ''
        }
      ],
      ksztList: [],
      subjectsList: [],
      fileList: [],
      khlxList: [], //考核类型
      visible: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    add(val) {
      this.ksztList = dictUtils.getDictItemsFromCache('kszt')
      this.khlxList = dictUtils.getDictItemsFromCache('khlx')
      this.querys[3].value = val
      this.visible = true
      this.loadData(1)
    },
    handleClose() {
      this.visible = false
    },
    loadData() {},
    // 打开搜索更多
    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])
      }

      kscjMenu.resultsQuery(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'
        }
      })
    },
    preview(command, val) {
      this.$router.push({
        name: 'marking',
        params: val
      })
    },
    handleTab() {
      this.loadData(1)
    },
    // 导入
    handleAvatarSuccess() {},
    beforeAvatarUpload() {},

    //导入
    handleChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
      if (
        file.raw.name.split('.')[1] == 'xlsx' ||
        file.raw.name.split('.')[1] == 'xls' ||
        file.raw.name.split('.')[1] == 'xlsm'
      ) {
        this.upLoadFile(file.raw)
      } else {
        this.$message.warning('请上传xls,xlsx,xlsm格式文件！')
        fileList.splice(0)
      }
    },
    //自定义上传方法（覆盖默认上传行为）
    upLoadFile(file) {
      let formData = new FormData()
      formData.append('file', file)
      kscjMenu.importExcel(formData, res => {
        if (res.state) {
          this.$notify({
            type: 'success',
            message: '导入成功',
            duration: 2000
          })
          this.loadData(1)()
        } else {
          this.$notify({
            type: 'error',
            message: res.message,
            duration: 2000,
            offset: 80
          })
          this.loadData(1)
        }
      })
    },
    exportFile() {
      kscjMenu.export(this.queryParam, res => {
        if (res) {
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .table-content {
//   height: 400px;
// }
.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;
}

::v-deep .el-dialog__body {
  min-height: 600px;
}
</style>
