<template>
  <div class="table">
    <br>
    <div>
      <el-form :inline="true" label-position="top">
        <!--        <el-form-item label="姓名">-->
        <!--          <el-input v-model.trim="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 v-for="item in idcTypeList" :key="item.value" :label="item.label" :value="item.value" />
          
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model.trim="queryParams1.idcCode" clearable placeholder="证件号码" style="width: 214px" />
        </el-form-item>
        <el-form-item class="end" label="&nbsp">
          <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>
    <br>
    <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" clearable placeholder="考生姓名" style="width: 214px;" />
      </el-form-item>
      <el-form-item label="证件类型">
        <el-select v-model="queryParams2.idcType" clearable style="width: 214px" @click="handleQuery">
          <el-option v-for="item in idcTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码">
        <el-input v-model="queryParams2.idcCode" clearable placeholder="证件号码" style="width: 214px" />
      </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-button :disabled="ids?.length<=0" type="danger" @click="OneClickDelete"> 一键清空</el-button>
      
      </el-form-item>
      <el-form-item class="end" label="&nbsp">
        
        <el-button type="danger" @click="uploadScore">上传资料</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="infoList" border>
      <el-table-column align="center" label="序号" type="index" width="55" />
      <el-table-column align="center" label="姓名" min-width="100" prop="realName" />
      <el-table-column align="center" label="照片">
        <template #default="props">
          <el-image :src="fillImgUrl(props.row.photo)" style="width: 52px; height: 65px" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="会员号" min-width="120" prop="perCode" />
      <el-table-column :show-overflow-tooltip="true" align="center" label="证件号" min-width="170" prop="idcCode" />
      <el-table-column
        :show-overflow-tooltip="true" align="center" label="所属单位（单位会员）" min-width="160"
        prop="memName"
      />
      <el-table-column align="center" label="原有段位" min-width="100" prop="levelOld">
        <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 align="center" label="考试段位" min-width="100" prop="levelNew">
        <template #default="scope">
          {{ szToHz(scope.row.levelNew) }}段/品
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否通过" min-width="90" prop="isPass">
        <template #default="scope">
          <el-select v-model="scope.row.isPass" @change="submitForm(0)">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作" width="100">
        <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:limit="queryParams2.pageSize"
      v-model:page="queryParams2.pageNum"
      :total="total"
      @pagination="saveThenGetList"
    />
    <br>
    <br>
    <el-row justify="center">
      <el-button type="primary" @click="submitForm(0)">保 存</el-button>
      <el-button :disabled="infoList?.length<=0" type="primary" @click="submitForm(1)">提交审核</el-button>
    </el-row>
    
    
    <choose-person ref="choosePersonRef" @submit="resetQuery" />
    <import-person ref="importPersonRef" @uploaded="resetQuery" />
    <conFirmOrder ref="conFirmOrderRef" />
    
    <!--文件上传-->
    <el-dialog
      v-model="showFileUpload" append-to-body draggable 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 { deleteByOutId } 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'
import { idcTypeList, idcFilter } from '@/utils/ruoyi'
import conFirmOrder from '@/views/exam/rank/apply/components/conFirmOrder'

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

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

const data = reactive({
  queryParams1: {
    examId: null,
    idcType: '0',
    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)
const ids = ref([])
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
    ids.value = infoList.value.map(item => item.id)
    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((res) => {
        if (res.data) {
          proxy.$modal.msgSuccess('提交成功')
          // proxy.$tab.closeReOpenPage({ path: `/${type}/score` })
        } else {
          proxy.$modal.msgError('提交失败，存在会员没有照片！')
        }
      })
  } 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
    }
  })
  if (flag == 1) {
    proxy.$refs['conFirmOrderRef'].open(queryParams1.value.examId, addLevel)
  } else {
    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
}

// 确定上传文件
async 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)
  // const data = _.map(infoList.value, (d) => {
  //   return {
  //     id: d.id,
  //     levelNew: d.levelNew,
  //     score: d.score,
  //     isPass: d.isPass
  //   }
  // })
  await editLevel({
    examId: examInfo.examId,
    // personInfo: JSON.stringify(data),
    transcript: examInfo.transcript,
    status: '0'
  })
  showFileUpload.value = false
}

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

function OneClickDelete() {
  proxy.$modal.confirm('是否确认删除列表所有人员？').then(function() {
    return deleteByOutId(queryParams2.value.examId)
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功')
    getList()
  }).catch(() => {
  }).finally(() => {
  })
}

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>