<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-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="结束日期"
                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="getData(1)"
                >搜索
              </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 :span="24">
                  <el-form-item label="考生姓名：">
                    <el-input
                      v-model="querys[3].value"
                      clearable
                      placeholder="请输入考生姓名"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
        <div ref="contentPanel" class="content">
          <div ref="btnPanel" class="bbsl-btn-content">
            <!-- 	<el-upload class="avatar-uploader" ref="upload" action="no" :show-file-list="false"
							:http-request="upLoadFile" :auto-upload="false" :on-change="e => handleChange(e, fileList)"
							accept="." :file-list="fileList">
							<el-button icon="el-icon-download" type="primary" style="margin-right: 10px;">导入</el-button>
						</el-upload>
						<el-button type="warning" icon="el-icon-upload2" @click="exportFile">导出</el-button>
						<el-button type="info" icon="el-icon-document">
							<a :href="this.portal+'/exam/user/evaluation/downModel'" target="_blank">下载模板</a>
						</el-button> -->
          </div>
          <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"
            @row-dblclick="handleDbClick"
            @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <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[4].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-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 ndcjMenu from '@/api/examination/ndcjMenu.js'
import kscjMenu from '@/api/examination/kscjMenu.js'
import dictUtils from '@/components/dict/DictSelectUtils.js'

export default {
  name: 'ndcjMenu',
  mixins: [TableMixin],
  data() {
    return {
      url: {
        delete: '/exam/year/EvaluationmentSub/'
      },
      search: '',
      tableData: [],
      treeData: [
        {
          code: '',
          id: '0',
          name: '岗位',
          type: 0,
          children: []
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      parentId: null, //上级id
      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: '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: '2'
        },
        {
          group: 'main',
          operation: 'IN',
          parentGroup: '',
          property: 's.paper_id_',
          relation: 'AND',
          value: ''
        }
      ],
      sortList: {},
      subjectsList: [],
      pjdjeList: [],
      currentKey: null,
      fileList: [],
      khlxList: [], //考核类型
      ksztList: [],
      visible: false
    }
  },
  created() {},

  mounted() {},
  methods: {
    add(val) {
      this.pjdjeList = dictUtils.getDictItemsFromCache('pjdj')
      this.khlxList = dictUtils.getDictItemsFromCache('khlx')
      this.ksztList = dictUtils.getDictItemsFromCache('kszt')
      this.querys[5].value = val
      this.visible = true
      this.getData()
    },
    handleClose() {
      this.visible = false
    },
    // 保存排序
    savePropertyf() {
      ndcjMenu.updateEvaluation(this.sortList, res => {
        if (res.state) {
          this.$notify({
            type: 'success',
            message: res.message,
            duration: 2000
          })
          this.getData()
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    insort(val) {
      let id = val.id
      let value = val.sn
      this.sortList[id] = value
    },
    reload() {
      this.getData()
    },
    // handleClick(val) {
    // 	this.$router.push({
    // 		name: 'ndcjMenuDetails',
    // 		params: val
    // 	})
    // },
    handleClick(val) {
      this.$router.push({
        name: 'lookPaper',
        params: val
      })
    },
    preview(command, val) {
      this.$router.push({
        name: 'marking',
        params: val
      })
    },
    handleAdd() {},
    // 打开搜索更多
    openMore() {
      this.showMore = !this.showMore
    },
    loadData() {},
    // 获取list
    getData(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])
      }
      if (this.querys[4].value) {
        this.queryParam.querys.push(this.querys[4])
      }
      if (this.querys[5].value) {
        this.queryParam.querys.push(this.querys[5])
      }
      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
      })
    },
    //导入
    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)
      ndcjMenu.importExcel(formData, res => {
        if (res.state) {
          this.$notify({
            type: 'success',
            message: '导入成功',
            duration: 2000
          })
          this.getData(1)()
        } else {
          this.$notify({
            type: 'error',
            message: res.message,
            duration: 2000,
            offset: 80
          })
          this.getData(1)
        }
      })
    },
    exportFile() {
      ndcjMenu.export(this.queryParam, res => {
        if (res) {
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
  color: #ffffff;
}

.type-tag {
  margin: 0 2px;
}

.common-tree-container {
  height: calc(100% - 70px);
  margin-top: 0.52083vw;
  padding: 1.04167vw 1.04167vw;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  overflow-y: auto;
  border-radius: 20px;
  box-shadow: 0px 0px 0.625vw 0 rgba(92, 102, 83, 0.2);
}

.avatar-uploader {
  display: inline-block;
  margin-left: 10px;
}

.title {
  width: 100%;
  margin-bottom: 10px;

  i {
    color: #1289fe;
    font-size: 25px;
  }

  span {
    font-size: 25px;
  }
}

::v-deep .el-tree {
  border: none;
}

::v-deep .el-tree-node__content {
  padding: 5px 0;
}

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