<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="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="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 label="身份证" value="0" />
                <el-option label="港澳台通行证" value="1" />
                <el-option label="外国护照" value="3" />
                <el-option label="其它" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="证件号码" prop="idcCode">
              <el-input v-model="queryParams.idcCode" style="width: 100%;" placeholder="请输入" clearable @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :hidden="showCollect">
            <el-form-item label="证书发送日期" prop="certTimeRange">
              <el-date-picker
                v-model="queryParams.certTimeRange"
                clearable
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                style="width: 100%;"
                @change="handleQuery"
              />
            </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="deptType=='1'">
          <el-button
            type="primary"
            :disabled="multiple"
            @click="sendAll"
          >批量发送证书</el-button>
          <el-button
            type="success"
            :disabled="multiple"
            @click="downloadAll"
          >批量下载证书</el-button>
          <!--          <el-button size="small" type="warning" @click="handleExport">导出</el-button>-->
        </div>


      </el-row>
      <el-table :data="infoList" border max-height="500" @selection-change="handleSelectionChange">
        <el-table-column v-if="deptType=='1'" 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="60px">
          <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 v-if="queryParams.type =='1'" min-width="60" label="成绩" align="center" prop="score" />-->
        <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="deptType=='1' || deptType=='2'" width="220" label="操作" fixed="right" align="center">
          <template #default="scope">
            <el-button v-if="deptType=='1'" type="primary" @click="sendCert(scope.row)">{{ ['发送证书','更新证书'][scope.row.isCert] }}</el-button>
            <el-button :disabled="scope.row.isCert != '1'" type="primary" @click="downCert(scope.row)">证书下载</el-button>
            <!--              <el-button :disabled="scope.row.isCert == '0'" link type="primary" @click="viewCert(scope.row)">查看</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="foot">
        <pagination
          v-show="total>0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="getList"
        />
      </div>
    </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, submitCert, viewCertPdf } from '@/api/exam/cert'
import { useRouter } from 'vue-router'

const router = useRouter()

const deptType = computed(() => useUserStore().deptType)
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 examIds = []

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


function getList() {
  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 = ''
  handleQuery()
}

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

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

      submitCert(params).then(() => {
        proxy.$modal.msgSuccess('下发成功')
        getList()
        emit('sendCert')
      })
    })
}

/**
 * 证书下载
 * @param row
 */
function downCert(row) {
  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() {
  proxy.$modal.confirm(queryParams.value.type == '1' ? '批量下发已选考生的级位证书？' : '批量下发已选考生的段位证书？')
    .then(() => {
      const params = [{
        id: queryParams.value.payId,
        children: [{
          id: queryParams.value.examId,
          children: ids
        }]
      }]

      submitCert(params).then(() => {
        proxy.$modal.msgSuccess('下发成功')
        getList()
        emit('sendCert')
      })
    })
}

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

    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
  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`)
}

defineExpose({
  open
})

</script>

<style lang="scss" scoped>
.center{
  text-align: center;
}
.flex{
  display: flex;
  justify-content: center;
  font-size: 16px;
  div{
    margin-left: 40px;
    margin-right: 40px;
  }
}

.x-flex{
  display: flex;
  font-size: 16px;
  div{
    margin-right: 40px;
    span{
      color: #920f20;
      font-size: 20px;
    }
  }
}
.el-button {
  margin-bottom: 18px;
}

</style>