<template>
  <div class="app-container">
    <el-card>
      <div>
        <br>
        <div>
          <el-form
            ref="" :model="queryParams" size="small" label-position="top" :inline="true"
            label-width="auto"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="queryParams.name" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="证件号码" prop="idcCode">
              <el-input v-model="queryParams.idcCode" placeholder="请输入" style="width: 250px;" @change="IDchange" />
            </el-form-item>
            <el-form-item label="&nbsp;">
              <el-button type="primary" @click="selectFN"> 查询</el-button>
              <el-button type="" @click="reset"> 重置</el-button>
            </el-form-item>
          </el-form></div>
        <div>
          <el-button type="primary" icon="Plus" @click="addForm">添加</el-button>
          <el-button type="warning" icon="Upload" @click="addDuanExcl">导入</el-button>
          <el-button type="success" icon="Upload" @click="handelUp">上传附件</el-button>
          <br>
          <br>
          <el-table border :data="list" style="width: 100%">
            <el-table-column label="序号" align="center" type="index" width="55" />
            <el-table-column
              label="姓名"
              align="center"
              prop="name"
              min-width="80"
            />
            <el-table-column
              label="证件类型"
              align="center"
              prop="personIdcType"
              min-width="80"
            >
              <template #default="props">
                <div>{{ idcFilter(props.row.idcType) }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="性别"
              align="center"
              prop="sex"
              min-width="80"
            >
              <template #default="{row}">
                {{ row.sex==1?'女':'男' }}
              </template>
            </el-table-column>
            <el-table-column
              label="证件号"
              align="center"
              prop="idcCode"
              min-width="170"
            />
            <el-table-column
              label="出生日期"
              align="center"
              prop="originValidityDate"
              min-width="100"
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <div>{{ parseTime(scope.row.birth, '{y}-{m}-{d}') }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="段位"
              align="center"
              prop="level"
              min-width="100"
              :show-overflow-tooltip="true"
            >
              <template #default="{row}">
                {{ szToHz(row.level) }}段
              </template>
            </el-table-column>
            <el-table-column
              label="添加时间"
              align="center"
              prop="originValidityDate"
              min-width="100"
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <div>{{ parseTime(scope.row.passDate, '{y}-{m}-{d}') }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              prop="originValidityDate"
              min-width="100"
              :show-overflow-tooltip="true"
            >
              <template #default="{row}">
                {{ row.status }}
              </template>
            </el-table-column>
            <!--            <el-table-column-->
            <!--              label="附件"-->
            <!--              align="center"-->
            <!--              min-width="100"-->
            <!--              :show-overflow-tooltip="true"-->
            <!--            >-->
            <!--              <template #default="{row}">-->
            <!--                <el-button type="primary" link @click="handelUp(row)">{{ row.fileUrl?'编辑':'上传' }}</el-button>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column
              label="操作"
              align="center"
              fixed="right"
              class-name="small-padding"
              width="100"
            >
              <template #default="scope">
                <el-button type="danger" @click="handleDel(scope.row)">删除</el-button>
                <!--                <el-button v-if="scope.row.status=='生效中'" type="danger" @click="handleDelete(scope.row)">撤回</el-button>-->
                <!--                <el-button v-else color="#13B5B1" style="&#45;&#45;el-color-black:#fff;" @click="handleSubmit(scope.row)">再确认</el-button>-->
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="getList"
          />
        </div>
        <br>
        <br>
        <el-row justify="center">
          <el-button type="primary" :disabled="list?.length<=0" @click="commitFN"> 保存并提交</el-button>
        </el-row>
      </div>
      <addDialog ref="addDialogRef" @success="addSuccess" />
    </el-card>

    <importDuan ref="importDuanRef" @uploaded="uploadedFn" />
    <upload ref="uploadRef" @success="successFN" />
    <Error ref="errorRef" />
  </div>
</template>

<script setup>
import { ref, toRefs, reactive, onMounted } from 'vue'
import addDialog from './addDialog.vue'
import { useRoute, useRouter } from 'vue-router'
import { getCurrentInstance } from '@vue/runtime-core'
import { listApi, confirm, duanInputDel } from '@/api/exam/addDuan'
import importDuan from './importDuan.vue'
import upload from './upload.vue'
import Error from './error.vue'
import { idcFilter, szToHz } from '@/utils/ruoyi'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const dialogID = ref(false)
const fileUrl = ref(null)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    rangeId: null
  }
})
const form = ref({
})
const showDialog = ref(false)
const total = ref(0)
const list = ref([])
const ids = ref([])
const { queryParams } = toRefs(data)

onMounted(() => {
  if (route.query.fileUrl) fileUrl.value = JSON.parse(route.query.fileUrl)
  if (route.query.rangeId) {
    queryParams.value.rangeId = route.query.rangeId
    getList()
  }
})

function uploadedFn(id) {
  if (id) queryParams.value.rangeId = id
  getList()
}
function addSuccess(rangeId) {
  router.replace({ path: route.path, query: { rangeId: rangeId, fileUrl: route.query.fileUrl }})
  queryParams.value.rangeId = rangeId
  getList()
}

// 身份证校验
function IDchange(e) {
  dialogID.value = true
}

function addForm() {
  proxy.$refs['addDialogRef'].open(list.value.length > 0 ? queryParams.value.rangeId : null)
}

function addDuanExcl() {
  proxy.$refs['importDuanRef'].open(queryParams.value.rangeId)
}

async function getList() {
  if (!queryParams.value.rangeId) return
  const res = await listApi(queryParams.value)
  list.value = res.rows
  total.value = res.total
  ids.value = list.value.map((item) => item.id)
}
function selectFN() {
  getList()
}

function reset() {
  queryParams.value.name = null
  queryParams.value.idcCode = null
  getList()
}

// 提交审核
async function commitFN() {
  if (!fileUrl.value) return proxy.$modal.msgError('请上传附件！')
  const res = await confirm({ ids: queryParams.value.rangeId })
  if (res.data.finishFlag) {
    proxy.$modal.msgSuccess('操作成功!')
    router.go(-1)
  } else {
    proxy.$refs['errorRef'].open(res.data)
    // proxy.$modal.msgSuccess('操作成功!')
    // router.go(-1)
    // form.value = res.data
    // showDialog.value = true
  }
}

async function handleDel(row) {
  await proxy.$modal.confirm('是否确认删除姓名为"' + row.name + '"的数据项？')
  await duanInputDel({ ids: row.id })
  if (list.value.length == 1 && queryParams.value.pageNum == 1) {
    queryParams.value.rangeId = undefined
    fileUrl.value = null
    list.value = []
    await router.replace({ path: route.path })
  } else if (list.value.length == 1 && queryParams.value.pageNum > 1) {
    queryParams.value.pageNum--
    await getList()
  } else {
    await getList()
  }
  proxy.$modal.msgSuccess('操作成功！')
}

function handelUp() {
  if (list.value.length <= 0) return proxy.$modal.msgError('请先添加人员，再上传文件！')
  proxy.$refs['uploadRef'].open({ id: queryParams.value.rangeId, fileUrl: fileUrl.value })
}

function successFN(row) {
  fileUrl.value = row
  router.replace({ path: route.path, query: { rangeId: route.query.rangeId, fileUrl: JSON.stringify(row) }})
  getList()
}

</script>

<style scoped lang="scss">
.box{
  padding: 50px;
}
.tdFlex {
  display: flex;
}

.w50 {
  width: 50%;
}

.ml20 {
  margin-left: 20px;
}

:deep(.el-button--info){
  background-color: #920f20;
  border: 1px solid #920f20;
}

// :deep(.el-button--info){
//   background-color: #409eff;
//   border: 1px solid #409eff;
// }

.idCode{
  :deep(.el-upload--picture-card){
    width: 380px;
    height: 240px;
  }
  :deep(.fileItem ){
    width: 380px;
    height: 240px;
  }
  :deep(.el-upload__tip){
    display: none;
  }
  :deep(.el-upload-list--picture-card){
    // text-align: center;
    display: flex;
    justify-content: center;
  }
}

.text-center{
  display: flex;
  margin-top: 30px;
  margin-bottom: 40px;
}
.text-center>div{
  margin-left: 20px;
}
.btn{
  margin-left: 10px;
}
.a{
  color:#0000ff;
  border-bottom: 1px solid #0000ff;
}
.nav-box{
  padding: 10px;
  font-size: 16px;
  background-color: #fff;
  span{
    font-weight: 600;
    font-size: 18px;
    margin: 0 10px;
  }
}


</style>