<template>
  <div class="bbsl-common-page">
    <div class="bbsl-table-search">
      <el-form v-model="queryParam" :inline="true">
        <el-form-item label="试卷名称：" prop="">
          <el-input
            v-model="querys[1].value"
            clearable
            placeholder="请输入试卷名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="组卷方式：">
          <el-select
            v-model="querys[2].value"
            clearable
            placeholder="请选择组卷方式"
          >
            <el-option
              v-for="item in zjfsList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试开始时间：">
          <el-date-picker
            v-model="querys[3].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="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 :span="12">
							<el-form-item label="试卷状态：">
								<el-select clearable v-model="querys[4].value" 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-col>
              <el-form-item label="考核类型：">
                <el-select
                  v-model="querys[5].value"
                  clearable
                  placeholder="请选择考核类型"
                >
                  <el-option
                    v-for="item in khlxList"
                    :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-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
				<el-popconfirm title="确定删除选中数据吗？" @confirm="handleDelete">
					<el-button slot="reference" type="danger" :disabled="!multipleSelection.length"
						icon="el-icon-delete" style="margin-left: 10px">删除</el-button>
				</el-popconfirm>
				<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/paper/base/downModel'" target="_blank">下载模板</a>
				</el-button> -->
      </div>
      <el-table
        ref="multipleSelection"
        v-loading="loading"
        :data="tableData"
        :max-height="tableMaxHeight"
        :style="{width: '100%'}"
        size="mini"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- <el-table-column prop="subjectName" label="考试课目" show-overflow-tooltip>
				</el-table-column> -->
        <el-table-column label="试卷名称" prop="name"></el-table-column>

        <el-table-column label="组卷方式" prop="wayTypeName" width="100">
        </el-table-column>
        <el-table-column label="试卷状态" prop="statusName" width="100">
          <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
          label="考核类型"
          prop="paperTypeName"
          width="100"
        ></el-table-column>
        <el-table-column label="总分数" prop="totalScore" width="100">
        </el-table-column>
        <el-table-column label="总题目数" prop="totalNumber" width="100">
        </el-table-column>
        <el-table-column label="时长(分)" prop="timeLength" width="80">
        </el-table-column>
        <el-table-column label="考试开始时间" prop="planStartTime" width="170">
        </el-table-column>
        <el-table-column label="考试结束时间" prop="planEndTime" width="170">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          width="170"
        ></el-table-column>
        <el-table-column label="操作" width="100">
          <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 command="0">预览试卷</el-dropdown-item>
								<el-dropdown-item command="1" v-if="scope.row.status==0">考试发布</el-dropdown-item>
								<el-dropdown-item command="2" v-if="scope.row.status==1">添加考生</el-dropdown-item>
								<el-dropdown-item command="3" >查看配置</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown> -->
            <el-button size="small" @click="preview(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>
    <dpsjDialog ref="dpsjDialog"></dpsjDialog>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {TableMixin} from '@/mixins/tableMixin'
import dpsjDialog from './components/dpsjDialog.vue'
import paperMenu from '@/api/examination/paperMenu.js'
import dictUtils from '@/components/dict/DictSelectUtils.js'

export default {
  mixins: [TableMixin],
  name: 'roomMenu',
  components: {
    dpsjDialog
  },
  data() {
    return {
      url: {
        delete: '/exam/paper/base/'
      },
      tableData: [],
      total: 0,
      multipleSelection: [],
      currentPage: 4,
      querys: [
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'type_',
          relation: 'AND',
          value: '1'
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'b.name_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'b.way_type_ ',
          relation: 'AND',
          value: ''
        },

        {
          group: 'time',
          operation: 'BETWEEN',
          parentGroup: '',
          property: 's.plan_start_time_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'NOT_IN',
          parentGroup: '',
          property: 's.status_',
          relation: 'AND',
          value: '0'
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'b.paper_type_',
          relation: 'AND',
          value: ''
        }
      ],
      //课目
      subjects: '',
      subjectsList: [],
      //难度
      difficultyList: [],
      ksztList: [],
      khlxList: [],
      sjztList: [],
      fileList: []
    }
  },
  created() {
    this.ksztList = dictUtils.getDictItemsFromCache('kszt')
    this.khlxList = dictUtils.getDictItemsFromCache('khlx')
    this.zjfsList = dictUtils.getDictItemsFromCache('zjfs')
    this.sjztList = dictUtils.getDictItemsFromCache('sjzt')
  },
  computed: {
    ...mapState({
      token: state => state.login.currentUser.token
    })
  },
  methods: {
    loadData(page) {
      if (page) {
        this.queryParam.pageBean.page = page
      }
      this.loading = true
      this.tableData = []
      this.queryParam.querys = []
      this.queryParam.sorter = [
        {
          direction: 'DESC',
          property: 'createTime'
        }
      ]
      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])
      }
      paperMenu.getPaper(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows
        this.tableData.forEach(e => {
          this.sjztList.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.zjfsList.forEach(z => {
            if (e.wayType == z.value) {
              e.wayTypeName = z.name
            }
          })
        })
        this.$set(this.tableData)
        this.loading = false
      })
      // 	}
      // })
    },
    preview(val) {
      console.log(val.id)
      this.$refs.dpsjDialog.add(val.id)
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 == 0) {
        return 'warning-row'
      } else {
        return ''
      }
    },
    // 打开搜索更多
    openMore() {
      this.showMore = !this.showMore
    },
    //导入
    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)
      questionListMenu.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() {
      questionListMenu.export(this.queryParam, res => {
        if (res) {
        }
      })
    }
  }
}
</script>

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

::v-deep .warning-row {
  // background-color: #C1C2C5 !important;
}

.avatar-uploader {
  display: inline-block;
  margin-left: 10px;
}
</style>
