<template>
  <div>
    <el-dialog
      v-model="show" title="" :close-on-click-modal="true" width="85%"
      align-center
      @close="close"
    >
      <el-form ref="queryRef" size="small" :inline="true" :model="queryParams" label-position="top">
        <el-row style="width: 100%;">
          <el-col :span="4">
            <el-form-item label="考生姓名" prop="name">
              <el-input
                v-model.trim="queryParams.name" placeholder="请输入考生姓名" clearable style="width: 100%;"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="证书是否已发放" prop="isCert">
              <el-select
                v-model="queryParams.isCert" style="width: 100%;" placeholder="" clearable
                @change="handleQuery"
              >
                <el-option label="全部" value="" />
                <el-option label="未发放" value="0" />
                <el-option label="已发放" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="所属单位" prop="memberName">
              <el-input
                v-model.trim="queryParams.memberName" style="width: 100%;" placeholder="请输入单位" clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="证件类型" prop="idcCode">
              <el-select
                v-model="queryParams.idcType" style="width: 100%" placeholder="全部" clearable
                @change="handleQuery"
              >
                <el-option v-for="item in idcTypeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="证件号码" prop="idcCode">
              <el-input
                v-model.trim="queryParams.idcCode" style="width: 100%;" placeholder="请输入" clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          
          <el-col v-if="!showCollect" :span="8" style="display: flex">
            <el-form-item style="width: 100%;" label="证书发送日期" prop="certTimeRange">
              <el-date-picker
                v-model="queryParams.certTimeRange[0]" type="date" value-format="YYYY-MM-DD"
                placeholder="开始时间" style="width: 100%;"
              />
            </el-form-item>
            <el-form-item style="width: 100%;" label="证书发送日期" prop="certTimeRange">
              <el-date-picker
                v-model="queryParams.certTimeRange[1]" type="date" value-format="YYYY-MM-DD"
                placeholder="结束时间" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <div class="po-r-btns">
            <el-button size="small" type="primary" @click="handleQuery">查询</el-button>
            <el-button size="small" @click="resetQuery">重置</el-button>
            <el-button
              v-if="showCollect" size="small" type="primary" link icon="ArrowDown"
              @click="showCollect=!showCollect"
            >展开
            </el-button>
            <el-button
              v-else size="small" type="primary" link icon="ArrowUp"
              @click="showCollect=!showCollect"
            >收起
            </el-button>
          </div>
        </el-row>
      </el-form>
      <el-row justify="space-between">
        <div v-if="showDownload">
          <el-button
            v-if="isZtx"
            type="primary"
            :disabled="multiple"
            @click="sendAll"
          >批量发送证书
          </el-button>
          <el-button
            type="success"
            :disabled="multiple"
            @click="downloadAll"
          >批量下载证书
          </el-button>
        
        </div>
        <el-button v-if="exportData" size="small" type="warning" @click="handleExport">导出</el-button>
      </el-row>
      <br>
      <el-table :data="infoList" border max-height="500" @selection-change="handleSelectionChange">
        <el-table-column v-if="showDownload" type="selection" width="40" align="center" :selectable="selectable" />
        <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" prop="sexStr" min-width="55" />
        <el-table-column label="证件类型" align="center" prop="idcTypeStr" min-width="80" />
        <el-table-column label="证件号" align="center" prop="idcCode" min-width="180" :show-overflow-tooltip="true" />
        <el-table-column label="联系方式" align="center" prop="phone" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="会员有效期" align="center" prop="vaildityDate" min-width="100">
          <template #default="scope">
            <span>{{ scope.row.idcType == 3 ? '--' : parseTime(scope.row.vaildityDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属单位" align="center" prop="memName" :show-overflow-tooltip="true" min-width="100" />
        <!--          <el-table-column label="二级单位" align="center" prop="memberInfoName" />-->
        <!--          <el-table-column label="一级单位" align="center" prop="memberInfoName" />-->
        <el-table-column :label="queryParams.type=='1'?'级位':'段位' " align="center" prop="levelNew" min-width="80px">
          <template #default="scope">
            <span v-if="scope.row.levelNew">
              {{ szToHz(scope.row.levelNew) }}{{ queryParams.type == '1' ? '级' : '段/品' }}
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="证书编号" align="center" prop="certCode" min-width="100" :show-overflow-tooltip="true" />
        <el-table-column min-width="110" label="证书是否发送" align="center" prop="isCert">
          <template #default="scope">
            <span>{{ scope.row.isCert == '9' ? '正在生成' : (scope.row.isCert == '1' ? '是' : '否') }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column min-width="110" label="证书发送时间" align="center" prop="certTime">-->
        <!--          <template #default="scope">-->
        <!--            <span>{{ parseTime(scope.row.certTime, '{y}-{m}-{d}') }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column v-if="showDownload" :width="isZtx?220:120" label="操作" fixed="right" align="center">
          <template #default="scope">
            <el-button
              v-if="isZtx" type="primary" :disabled="!(scope.row.isCert == '0' || scope.row.isCert == '1')"
              @click="sendCert(scope.row)"
            >{{ scope.row.isCert == '1' ? '更新证书' : '发送证书' }}
            </el-button>
            <el-button :disabled="scope.row.isCert != '1'" type="primary" @click="downCert(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"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs, getCurrentInstance, ref, computed } from 'vue'
import useUserStore from '@/store/modules/user'
import { szToHz } from '@/utils/ruoyi'
import {
  certStudentList,
  checkPersonByPersonId,
  checkPersonByPersonIds,
  submitCert2,
  viewCertPdf,
  checkDownPermission
} from '@/api/exam/cert'
import { useRouter } from 'vue-router'
import { idcTypeList } from '@/utils/ruoyi'
import { checkTechDownPermission } from '/@/api/member/detail'


defineProps({
  showDownload: {
    type: Boolean,
    default: false
  },
  exportData: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()
const isZtx = computed(() => useUserStore().deptType == '1')
const { proxy } = getCurrentInstance()
const emit = defineEmits(['sendCert'])

const batchList = ref([])
const showCollect = ref(true)
const loading = ref(true)
const multiple = ref(true)
const total = ref(0)
let ids = []
let perIds = []
let examIds = []

const data = reactive({
  show: false,
  infoList: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    isCert: '',
    memberName: undefined,
    idcType: undefined,
    idcCode: undefined,
    certTimeRange: [null, null],
    examId: undefined,
    perId: undefined
  }
})
const {
  queryParams,
  show,
  infoList
} = toRefs(data)


function getList() {
  if ((queryParams.value.certTimeRange[0] == null && queryParams.value.certTimeRange[1] != null) || (queryParams.value.certTimeRange[1] == null && queryParams.value.certTimeRange[0] != null)) return proxy.$modal.msgError('请完善证书发送日期')
  
  loading.value = true
  certStudentList(queryParams.value).then(response => {
    infoList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

function selectable(row) {
  return row.certStatus != '9'
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  queryParams.value.idcType = ''
  queryParams.value.certTimeRange = [null, null]
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  batchList.value = [...selection]
  ids = selection.map(item => item.id)
  perIds = selection.map(item => item.perId)
  multiple.value = !selection.length
}

function checkCert(row, perIds) {
  if (perIds) {
    return checkPersonByPersonIds(perIds).then(res => {
      if (!res.data) {
        proxy.$modal.alert('有学员没有照片，无法生成证书！')
        return Promise.reject()
      }
    })
  } else {
    return checkPersonByPersonId(row.perId).then(res => {
      if (!res.data) {
        proxy.$modal.alert('该学员没有照片，无法生成证书！')
        return Promise.reject()
      }
    })
  }
}

/**
 * 发送证书
 */
function sendCert(row) {
  checkCert(row).then(() => {
    proxy.$modal.confirm(`确定下发 ${row.realName} 的证书?`)
      .then(() => {
        const params = [{
          id: queryParams.value.payId,
          children: [{
            id: queryParams.value.examId,
            children: [row.id]
          }]
        }]
        
        submitCert2(params).then(() => {
          proxy.$modal.msgSuccess('下发成功')
          getList()
          emit('sendCert')
        })
      })
  })
}

/**
 * 证书下载
 * @param row
 */
async function downCert(row) {
  if (row.techId) {
    await handelCheckDownPermissionFn(row.techId)
  } else {
    await handelCheckDownPermission(row.examId)
  }
  await checkCert(row).then(() => {
    const fileName = row.certCode
    proxy.download('/exam/person/exportPdf', {
      examId: row.examId, perId: row.perId
    }, fileName + '.pdf')
  })
}

/**
 * 查看证书
 * @param row
 */
function viewCert(row) {
  viewCertPdf({ examId: row.examId, perId: row.perId }).then(res => {
    window.open(import.meta.env.VITE_APP_BASE_API + '/' + res.msg)
  })
}

/**
 * 批量发送
 */
function sendAll() {
  checkCert(null, perIds.join(',')).then(() => {
    proxy.$modal.confirm(queryParams.value.type == '1' ? '批量下发已选考生的级位证书？' : '批量下发已选考生的段位证书？')
      .then(() => {
        const params = [{
          id: queryParams.value.payId,
          children: [{
            id: queryParams.value.examId,
            children: ids
          }]
        }]
        
        submitCert2(params).then(() => {
          proxy.$modal.msgSuccess('下发成功')
          getList()
          emit('sendCert')
        })
      })
  })
}

async function downloadAll() {
  examIds = [queryParams.value.examId]
  if (examIds.length == 1) {
    const flag = batchList.value.some(item => {
      if (item.isCert != 1) {
        return proxy.$message.warning(`考生姓名为”${item.realName}“未发放证书!`)
      }
    })
    if (flag) return
    await checkCert(null, perIds.join(','))
    await handelCheckDownPermission(queryParams.value.examId)
    const routerData = router.resolve({
      path: '/download',
      query: {
        arr: ids,
        examIds,
        type: 'examCertByStudentIds'
      }
    })
    window.open(routerData.href, '_blank')
  }
}

function open(params, flag) {
  queryParams.value.examId = params.examId
  queryParams.value.payId = params.payId
  queryParams.value.type = flag
  queryParams.value.certTimeRange = [null, null]
  show.value = true
  getList()
}

function close() {
  show.value = false
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  }
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('/exam/person/cert/studentList/export', {
    ...queryParams.value
  }, `级位考试信息_${new Date().getTime()}.xlsx`)
}

function handelCheckDownPermission(examIds) {
  return new Promise(async(resolve, reject) => {
    const res = await checkDownPermission(examIds)
    console.log(res)
    if (res.code == 200 && res.data.flag == 1) {
      return resolve()
    } else {
      proxy.$modal.msgError(res.data.info)
      return reject()
    }
  })
}


function handelCheckDownPermissionFn(techId) {
  return new Promise(async(resolve, reject) => {
    if (!techId) return reject()
    const res = await checkTechDownPermission(techId)
    if (res.code == 200 && res.data.flag == 1) {
      return resolve()
    } else {
      proxy.$modal.msgError(res.data.info)
      return reject()
    }
  })
}

defineExpose({
  open
})

</script>

<style lang="scss" scoped></style>