<template>
  <div style="padding-top: 10px;">
    <el-descriptions title="考级信息" :column="4" border>
      <el-descriptions-item label="考级名称">
        {{ examInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item label="申请日期">
        {{ parseTime(examInfo.applyTime, '{y}-{m}-{d}') }}
      </el-descriptions-item>
      <el-descriptions-item label="申请单位">
        {{ examInfo.memberName }}
      </el-descriptions-item>
      <el-descriptions-item label="考官">
        {{ examInfo.examinerNames?.split('，').join('/') }}
      </el-descriptions-item>
      <el-descriptions-item label="考试开始时间">
        {{ parseTime(examInfo.startTime,'{y}-{m}-{d} {h}:{i}') }}
      </el-descriptions-item>
      <el-descriptions-item label="考试结束时间">
        {{ parseTime(examInfo.endTime, '{y}-{m}-{d} {h}:{i}') }}
      </el-descriptions-item>
      <el-descriptions-item label="考级地点">
        {{ examInfo.address }}
      </el-descriptions-item>

    </el-descriptions>
    <!-- <h3>考级信息</h3>
    <table
      border="1" class="tableBox" cellpadding="0" cellspacing="0" width="100%"
      style="border-color: #ebeef5 ;"
    >
      <tr>
        <th style="width: 10%;">考级名称</th>
        <td style="width: 20%;"> {{ examInfo.name }}</td>
        <th style="width: 10%;">申请日期</th>
        <td style="width: 13%;">{{ parseTime(examInfo.applyTime, '{y}-{m}-{d}') }}</td>
        <th style="width: 10%;">申请单位</th>
        <td style="width: 20%;">    {{ examInfo.memberName }}</td>
        <th style="width: 7%;">考官</th>
        <td style="width: 10%;">{{ examInfo.examinerNames?.split('，').join('/') }}</td>
      </tr>
      <tr>
        <th>考官开始时间</th>
        <td> {{ parseTime(examInfo.startTime,'{y}-{m}-{d} {h}:{i}') }}</td>
        <th>考试结束时间</th>
        <td>{{ parseTime(examInfo.endTime, '{y}-{m}-{d} {h}:{i}') }}</td>
        <th>考级地点</th>
        <td>   {{ examInfo.address }}</td>
        <th>总金额</th>
        <td>{{ examInfo.totalAmount }}</td>
      </tr>
    </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="2" />-->
            <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" placeholder="考生姓名" clearable style="width: 214px" />
      </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" icon="Search" @click="handleQuery">查 询</el-button>
        <el-button icon="Refresh" @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)" />-->
          <div style="display: flex; justify-content: center;">
            <el-image v-if="props.row.photo" style="width: 46px; height: 65px;" :src="fillImgUrl(props.row.photo)">
              <template #error>
                <div class="image-slot">
                  <img style="width: 46px;" src="@/assets/admin/tx.jpg">
                </div>
              </template>
              <template #placeholder>
                <div class="image-slot"> <img style="width: 46px;" src="@/assets/admin/tx.jpg"></div>
              </template>
            </el-image>
            <img v-else style="width: 46px; height: 65px;" src="@/assets/admin/tx.jpg" alt="">
          </div>
        </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 v-if="showOne" label="一级协会" align="center" prop="oneLevel" min-width="120" />
      <el-table-column v-if="showTwo" label="二级协会" align="center" prop="twoLevel" min-width="120" />
      <el-table-column v-if="showThree" label="三级协会" align="center" prop="threeLevel" min-width="120" />
      <el-table-column label="原有级别" align="center" prop="levelOld" min-width="100">
        <template #default="scope">
          <ji :level="scope.row.levelOld" />
        </template>
      </el-table-column>
      <el-table-column label="考试级别" align="center" prop="levelNew" min-width="100">
        <template #default="scope">
          <!--          <el-select v-model="scope.row.levelNew" @change="changeLevel(scope.row)">-->
          <!--            <el-option v-for="l in levelArr" :key="l" :label="`${szToHz(l)}级`" :value="l" />-->
          <!--          </el-select>-->
          <ji :level="scope.row.levelNew" />
        </template>
      </el-table-column>
      <!--      <el-table-column label="成绩" align="center" prop="score" min-width="80">-->
      <!--        <template #default="scope">-->
      <!--          <el-input v-model="scope.row.score" clearable />-->
      <!--        </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="" @click="handlePrev">上一步</el-button>
      <el-button type="primary" @click="submitForm(0)">保 存</el-button>
      <el-button type="primary" @click="submitForm(1)">提交审核</el-button>
    </el-row>

    <!--文件上传-->
    <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" :file-type="['png', 'jpg', 'jpeg','pdf','zip']" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="text-align: center;">
          <el-button type="primary" @click="uploadSure">确 定</el-button>
          <el-button @click="showFileUpload=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <choose-person ref="choosePersonRef" @submit="resetQuery" />
    <import-person ref="importPersonRef" @uploaded="resetQuery" />
  </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 FileUpload from '@/components/FileUpload'
import ImportPerson from '@/views/exam/components/importPerson'
import Ji from '@/views/exam/level/apply/components/ji'


const emit = defineEmits(['prev'])
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: []
})
const { queryParams1, queryParams2, tablePersonInfo, transcript } = toRefs(data)

// const regionList = ref([])
const infoList = ref([])
const loading = ref(true)
const showOne = ref(false)
const showTwo = ref(false)
const showThree = ref(false)
const showFileUpload = ref(false)
const total = ref(0)

const levelArr = ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1']

onMounted(() => {

})

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

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

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

    infoList.value = response.rows
    total.value = response.total
    loading.value = false

    if (infoList.value.length > 0) {
      if (infoList.value[0].oneLevel) {
        showOne.value = true
      }
      if (infoList.value[0].twoLevel) {
        showTwo.value = true
      }
      if (infoList.value[0].threeLevel) {
        showThree.value = true
      }
    }
  }).then(getTablePersonInfo)
}


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

function getTablePersonInfo() {
  const levelArr = []
  let total = 0
  getExamPersonNum(queryParams1.value.examId, null, '1').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
    queryParams1.value.name = null
    resetQuery()
  })
}

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

/**
 * 导入考生
 */
function handleImport() {
  const examId = examInfo.value.examId
  const type = examInfo.value.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 handleView(row) {

// }

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


function uploadScore() {
  showFileUpload.value = true
}

function handlePrev() {
  emit('prev', examInfo.value.examId)
}

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

    // if (_.some(infoList.value, (d) => {
    //   return !d.score
    // })) {
    //   proxy.$modal.msgError('部分考生成绩未填写，请检查')
    //   return
    // }

    // if (!examInfo.value.transcript) {
    //   proxy.$modal.msgError('请上传成绩单')
    //   return
    // }

    proxy.$modal.confirm('确定提交审核？')
      .then(() => save(flag))
      .then(() => {
        proxy.$modal.msgSuccess('提交成功')
        proxy.$tab.closeReOpenPage({ path: '/level/apply' })
      })
  } 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.value.examId,
    personInfo: JSON.stringify(data),
    transcript: examInfo.value.transcript,
    status: flag
  })
}

function changeLevel(row) {
  if (row.levelNew !== row.levelRecommend) {
    proxy.$modal.confirm(`建议考试级别为 "${szToHz(row.levelRecommend)}级" ，确定要修改吗？`)
      .then(getTablePersonInfo)
      .catch(() => {
        row.levelNew = row.levelRecommend
      })
  }
}

function uploadSure() {
  // if (transcript.value.length == 0) {
  //   proxy.$modal.msgError('请上传成绩单')
  //   return
  // }

  examInfo.value.transcript = JSON.stringify(_.map(transcript.value, (t) => {
    return {
      name: t.name,
      url: t.url
    }
  }))
  showFileUpload.value = false
}


const examInfo = ref({})

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

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

function handleExport() {
  proxy.download('/exam/person/export/studentList', {
    ...queryParams2.value
  }, `考生信息_${new Date().getTime()}.xlsx`)
}

defineExpose({
  init
})
</script>

<style scoped>

.yan{
  /* background-color: #f5f7f9; */
  height: 20px;
}

.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;
}

.end{
  margin-left: auto;
}

.card{
  background-color: #f5fbfe;
}
.col-4{
  font-size: 14px;
  text-align: center;
  border: 1px solid #ebeef5;
  padding: 10px 0;
  color: #909399;
  word-break:break-all;

}

.first{
  font-weight: 500;
  color: #000;
  font-size: 15px;

}

.tableBox td{
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  border-color:#ebeef5  ;
  padding: 5px 0;
}
.tableBox th{
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  background-color: #f5f7fa ;
  border-color:#ebeef5  ;
  padding: 5px 0;
}
</style>