<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="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: 950px; height: 65px;border-radius: 15px;margin-top: 25px;"
            >
              <el-row>
                <el-col :span="8">
                  <el-form-item label="考生姓名：">
                    <el-input
                      v-model="querys[3].value"
                      clearable
                      placeholder="请输入考生姓名"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="考试状态：">
                    <el-select
                      v-model="querys[4].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-col>
                <el-col :span="8">
                  <el-form-item label="试卷状态：">
                    <el-select
                      v-model="querys[5].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-col>
              </el-row>
            </div>
          </el-form>
        </div>
        <div ref="contentPanel" class="content">
          <div ref="btnPanel" class="bbsl-btn-content">
            <el-tabs v-model="querys[6].value" @tab-click="handleTab">
              <el-tab-pane
                v-for="item in khlxList"
                :label="item.name"
                :name="item.value"
              ></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"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              label="试卷名称"
              min-width="160"
              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="userName"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="考生账号"
              min-width="100"
              prop="account"
              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="100"
              prop="timeLength"
              show-overflow-tooltip
              sortable
            >
            </el-table-column>
            <el-table-column
              label="总计得分"
              min-width="100"
              prop="totalScore"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="申请时间"
              min-width="150"
              prop="applyTime"
              show-overflow-tooltip
              sortable
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-button size="small" @click="handleClick(scope.row)"
                  >审批
                </el-button>
                <!-- <el-dropdown split-button @click="handleClick(scope.row)" @command="
								  (command) => {
								    handleClick( scope.row,command);
								  }
								">
										同意
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item command="0">拒绝</el-dropdown-item>

										</el-dropdown-menu>
									</el-dropdown> -->
                <!-- <el-button @click="preview(scope.row)" size="small">预览试卷</el-button> -->
              </template>
              <!-- <template slot-scope="scope">
									<el-button @click="handleClick(scope.row)" size="small">阅卷</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>
    </el-dialog>
  </div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import ksTaskMenu from '@/api/examination/ksTaskMenu.js'
import subMenu from '@/api/examination/subMenu.js'

export default {
  name: 'dpsjMenu',
  components: {},
  mixins: [TableMixin],
  data() {
    return {
      showMore: false,
      tableData: [],
      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.apply_time_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 's.user_name_',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 's.status_',
          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'
        },
        {
          group: 'main',
          operation: 'IN',
          parentGroup: '',
          property: 's.paper_id_',
          relation: 'AND',
          value: ''
        }
      ],
      ksztList: [], //考试状态
      subjectsList: [],
      sjztList: [], //试卷状态
      khlxList: [],
      visible: false
    }
  },
  created() {
    this.getSubjects()
    this.ksztList = dictUtils.getDictItemsFromCache('kszt')
    this.sjztList = dictUtils.getDictItemsFromCache('sjzt')
    this.khlxList = dictUtils.getDictItemsFromCache('khlx')
  },
  mounted() {},
  methods: {
    add(val) {
      this.querys[7].value = val
      this.visible = true
      this.getData(1)
    },
    handleClose() {
      this.visible = false
    },
    loadData() {},
    // 打开搜索更多
    openMore() {
      this.showMore = !this.showMore
    },
    // 重置
    clearQuerys() {
      this.querys[0].value = ''
      this.querys[1].value = ''
    },
    // 获取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])
      }
      if (this.querys[6].value) {
        this.queryParam.querys.push(this.querys[6])
      }
      ksTaskMenu.applyPaperRecord(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows
        this.tableData.forEach(t => {
          console.log(t.status)
          this.ksztList.forEach(k => {
            if (t.status == k.value) {
              t.statusName = k.name
            }
          })
        })
        this.$set(this.tableData)
        this.loading = false
      })
    },
    handleClick(val) {
      // console.log(command,val);
      let parmas = {
        id: val.id,
        status: null
      }
      // let title
      // if (command) {
      // 	parmas.status = "1"
      // 	title = '拒绝'
      // } else {
      // 	parmas.status = "0"
      // 	title = '同意'
      // }
      this.$confirm(`是否同意该考生补考?`, '提示', {
        confirmButtonText: '同意',
        cancelButtonText: '拒绝',
        closeOnClickModal: false,
        type: 'warning'
      })
        .then(() => {
          parmas.status = '0'
          ksTaskMenu.modifyStatus(parmas, res => {
            if (res.state) {
              this.$message({
                message: '已通过',
                type: 'success'
              })
              this.getData(1)
            }
          })
        })
        .catch(() => {
          parmas.status = '1'
          ksTaskMenu.modifyStatus(parmas, res => {
            if (res.state) {
              this.$message({
                message: '已拒绝',
                type: 'success'
              })
              this.getData(1)
            }
          })
        })
    },
    //获取课目
    getSubjects() {
      let params = {
        pageBean: {
          pageSize: -1,
          page: -1
        }
      }
      subMenu.getSubjects(params, res => {
        if (res.rows) {
          this.subjectsList = res.rows
        }
      })
    },
    handleTab() {
      this.getData(1)
    }
  }
}
</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;
}

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