<template>
  <div class="table">
    <div class="from-Card">
      <el-form :inline="true" label-position="top">
        <el-form-item label="姓名">
          <el-input v-model="queryParams1.name" placeholder="姓名" style="width: 214px" clearable />
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select v-model="queryParams1.idcType" style="width: 214px">
            <el-option label="身份证" value="0" />
            <el-option label="港澳台通行证" value="1" />
            <el-option label="外国护照" value="3" />
            <el-option label="其它" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="queryParams1.idcCode" placeholder="证件号码" style="width: 214px" clearable />
        </el-form-item>
        <el-form-item label="&nbsp" class="end">
          <el-button type="primary" @click="handleAdd">添 加</el-button>
          <el-button type="primary" @click="chooseOnline">在线选择</el-button>
          <el-button type="primary" @click="handleImport">批量添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="vipData">
      <div>人数合计： <span>{{ tablePersonInfo.total }}</span>人</div>
      <div v-for="l in tablePersonInfo.levelArr" :key="l.level">{{ szToHz(l.level) }}段：  <span>{{ l.num }} </span>人</div>
    </div>
    <br>
    <el-form ref="queryRef" :inline="true" :model="queryParams2" label-position="top">
      <el-form-item label="姓名">
        <el-input v-model="queryParams2.name" style="width: 214px;" placeholder="考生姓名" clearable />
      </el-form-item>
      <el-form-item label="证件类型">
        <el-select v-model="queryParams2.idcType" style="width: 214px" clearable @click="handleQuery">
          <el-option label="身份证" value="0" />
          <el-option label="港澳台通行证" value="1" />
          <el-option label="外国护照" value="3" />
          <el-option label="其它" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码">
        <el-input v-model="queryParams2.idcCode" placeholder="证件号码" style="width: 214px" clearable />
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button type="warning" @click="handleExport">导 出</el-button>
        <el-button type="primary" @click="handleQuery">查 询</el-button>
        <el-button type="" @click="resetQuery">重 置</el-button>
      </el-form-item>
      <el-form-item label="&nbsp" class="end">

        <el-button type="danger" @click="uploadScore">上传资料</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="infoList" border>
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column label="姓名" align="center" prop="realName" min-width="100" />
      <el-table-column label="照片" align="center">
        <template #default="props">
          <el-image style="width: 70px; height: 70px" :src="fillImgUrl(props.row.photo)" />
        </template>
      </el-table-column>
      <el-table-column label="会员号" align="center" prop="perCode" min-width="120" />
      <el-table-column label="证件号" align="center" prop="idcCode" min-width="170" :show-overflow-tooltip="true" />
      <el-table-column label="所属单位（团体会员）" align="center" prop="memName" min-width="160" :show-overflow-tooltip="true" />
      <el-table-column label="原有段位" align="center" prop="levelOld" min-width="100">
        <template #default="scope">
          <span v-if="scope.row.levelOld && '0' != scope.row.levelOld ">
            {{ szToHz(scope.row.levelOld) }}段/品
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="考试段位" align="center" prop="levelNew" min-width="100">
        <template #default="scope">
          {{ szToHz(scope.row.levelNew) }}段/品
        </template>
      </el-table-column>
      <el-table-column label="是否通过" align="center" prop="isPass" min-width="90">
        <template #default="scope">
          <el-select v-model="scope.row.isPass">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      v-model:page="queryParams2.pageNum"
      v-model:limit="queryParams2.pageSize"
      :total="total"
      @pagination="saveThenGetList"
    />
    <br>
    <br>
    <el-row justify="center">
      <el-button type="primary" @click="submitForm(0)">保 存</el-button>
      <el-button type="primary" @click="submitForm(1)">提交审核</el-button>
    </el-row>


    <choose-person ref="choosePersonRef" @submit="resetQuery" />
    <import-person ref="importPersonRef" @uploaded="resetQuery" />

    <!--文件上传-->
    <el-dialog
      v-model="showFileUpload" draggable append-to-body title="上传资料"
      width="600px"
    >
      <el-form label-suffix="：" label-width="100">
        <el-form-item label="通知单" required>
          <file-upload v-model="transcript.tz" :file-type="['png', 'jpg', 'jpeg','pdf','zip']" />
        </el-form-item>
        <el-form-item label="签到表" required>
          <file-upload v-model="transcript.qd" :file-type="['png', 'jpg', 'jpeg','pdf','zip']" />
        </el-form-item>
        <el-form-item label="合照" required>
          <file-upload v-model="transcript.hz" :file-type="['png', 'jpg', 'jpeg','pdf','zip']" />
        </el-form-item>
        <el-form-item label="成绩单" required>
          <file-upload v-model="transcript.cj" :file-type="['png', 'jpg', 'jpeg','pdf','zip']" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="uploadSure">确 定</el-button>
          <el-button @click="showFileUpload=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>

import { reactive } from '@vue/runtime-core'
import { computed, getCurrentInstance, onMounted, ref, toRefs } from 'vue'
import { addPerson, delPerson, editLevel, studentList } from '@/api/exam/person'
import ChoosePerson from '@/views/exam/components/choosePerson'
import useUserStore from '@/store/modules/user'
import _ from 'lodash'
import { szToHz } from '@/utils/ruoyi'
import { getExamPersonNum, getInfo } from '@/api/exam/info'
import ImportPerson from '@/views/exam/components/importPerson'
import { useRoute } from 'vue-router'


const route = useRoute()
const { proxy } = getCurrentInstance()

const memberInfo = computed(() => useUserStore().memberInfo)

const data = reactive({
  queryParams1: {
    examId: null,
    idcType: null,
    idcCode: null,
    name: null
  },
  queryParams2: {
    pageNum: 1,
    pageSize: 10,
    examId: null,
    cityId: null,
    name: null,
    idcType: null,
    idcCode: null,
    groupName: null
  },
  tablePersonInfo: {},
  transcript: {
    tz: [],
    qd: [],
    hz: [],
    cj: []
  }
})
const { queryParams1, queryParams2, tablePersonInfo, transcript } = toRefs(data)


const infoList = ref([])
const loading = ref(true)
const showFileUpload = ref(false)
const total = ref(0)

let addLevel = 0
let type
onMounted(() => {
  if (route.path.indexOf('rank') > -1) {
    type = 'rank'
    addLevel = 1
  } else if (route.path.indexOf('beyond') > -1) {
    type = 'beyond'
    addLevel = 2
  }
})


function getList() {
  loading.value = true
  studentList(queryParams2.value).then(response => {
    _.each(response.rows, (d) => {
      if (d.levelOld) {
        d.levelRecommend = (parseInt(d.levelOld) + addLevel) + ''
        if (d.levelRecommend === '10') {
          d.levelRecommend = '9'
        }
      } else {
        d.levelRecommend = addLevel + ''
      }

      if (!d.levelNew) {
        d.levelNew = d.levelRecommend
      }

      if (!d.isPass) {
        d.isPass = '1'
      }
    })

    infoList.value = response.rows
    total.value = response.total
    loading.value = false
  }).then(getTablePersonInfo)
}

function getTablePersonInfo() {
  const levelArr = []
  let total = 0
  getExamPersonNum(queryParams1.value.examId, null, '2').then(res => {
    _.each(res.data, (val, key) => {
      if (val > 0) {
        levelArr.push({
          level: key,
          num: val
        })
        total += val
      }
    })

    tablePersonInfo.value = {
      total: total,
      levelArr: _.sortBy(levelArr, (l) => {
        return l.level
      })
    }
  })
}

function handleAdd() {
  if (!queryParams1.value.idcCode) {
    proxy.$modal.msgError('请输入证件号')
    return
  }
  if (!queryParams1.value.idcType) {
    proxy.$modal.msgError('请输入证件类型')
    return
  }
  if (!queryParams1.value.name) {
    proxy.$modal.msgError('请输入姓名')
    return
  }

  addPerson(queryParams1.value).then(() => {
    proxy.$modal.msgSuccess('添加成功')
    queryParams1.value.idcCode = null
    resetQuery()
  })
}

function chooseOnline() {
  proxy.$refs['choosePersonRef'].open({
    memId: memberInfo.value.memId,
    examId: examInfo.examId
  })
}

/**
 * 导入考生
 */
function handleImport() {
  const examId = examInfo.examId
  const type = examInfo.type
  proxy.$refs['importPersonRef'].open({ examId, type })
}


function handleQuery() {
  queryParams2.value.pageNum = 1
  getList()
}

function resetQuery() {
  queryParams2.value.name = null
  queryParams2.value.idcType = null
  queryParams2.value.idcCode = null
  queryParams2.value.cityId = null
  queryParams2.value.groupName = null

  handleQuery()
}

function handleDelete(row) {
  proxy.$modal.confirm(`确定删除 "${row.realName}" ?`)
    .then(() => {
      return delPerson(row.id).then(() => {
        proxy.$modal.msgSuccess('操作成功')
      })
    }).then(getList)
}

function submitForm(flag) {
  if (flag === 1) {
    if (infoList.value.length == 0) {
      proxy.$modal.msgError('请添加考生信息')
      return
    }
    if (!examInfo.transcript) {
      proxy.$modal.msgError('请上传资料')
      return
    }

    proxy.$modal.confirm('确定提交审核？')
      .then(() => save(flag))
      .then(() => {
        proxy.$modal.msgSuccess('提交成功')
        proxy.$tab.closeReOpenPage({ path: `/${type}/score` })
      })
  } else {
    save(flag).then(() => {
      proxy.$modal.msgSuccess('保存成功')
    })
  }
}

function save(flag) {
  const data = _.map(infoList.value, (d) => {
    return {
      id: d.id,
      levelNew: d.levelNew,
      score: d.score,
      isPass: d.isPass
    }
  })
  return editLevel({
    examId: examInfo.examId,
    personInfo: JSON.stringify(data),
    transcript: examInfo.transcript,
    status: flag
  })
}

let examInfo
function init(examId) {
  queryParams1.value.examId = examId
  queryParams2.value.examId = examId
  getList()

  getInfo(examId).then(res => {
    examInfo = res.data
    if (examInfo.transcript) {
      transcript.value = JSON.parse(examInfo.transcript)
    }
  })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('/exam/person/export/rank/studentList', {
    ...queryParams2.value
  }, `段位考生_${new Date().getTime()}.xlsx`)
}

// 上传文件
function uploadScore() {
  showFileUpload.value = true
}

// 确定上传文件
function uploadSure() {
  if (transcript.value.tz.length == 0) {
    proxy.$modal.msgError('请上传通知单')
    return
  }
  if (transcript.value.qd.length == 0) {
    proxy.$modal.msgError('请上传签到表')
    return
  }
  if (transcript.value.hz.length == 0) {
    proxy.$modal.msgError('请上传合照')
    return
  }
  if (transcript.value.cj.length == 0) {
    proxy.$modal.msgError('请上传成绩单')
    return
  }

  examInfo.transcript = JSON.stringify(transcript.value)
  showFileUpload.value = false
}

function saveThenGetList() {
  const flag = 0
  save(flag).then(() => {
    getList()
  })
}

defineExpose({
  init
})
</script>

<style scoped>
.row{
  background-color: #f4f6f8;
  padding: 10px;
}
.end{
  margin-left: auto;
}

.flex{
  display: flex;
  background-color: #f8f8f9;
}
.flex-1{
  flex:1;
  padding: 10px;
  font-size: 16px;
  background-color: #f8f8f9;
  border:1px solid #ebeef5;
  max-width: 200px;
}
.flex-1>span{
  font-weight: 600;
  margin-left: 10px;
  margin-right: 10px;
}

</style>