<template>
  <div class="app-container">
    <el-row class="row" justify="center">
      <div :span="10" class="box">
        <el-image style="width: 400px" :src="url" fit="cover" />
      </div>
    </el-row>
    <!-- <el-link
      v-show="true" ref="linkRef" :href="fillImgUrl(urlS)" :underline="false"
      target="_blank"
    /> -->
  </div>
</template>

<script setup >
import { useRoute } from 'vue-router'
import { onMounted, getCurrentInstance, ref } from 'vue'
import {
  queryProcess,
  downJiaoFei,
  downloadPersonCert,
  downJiaoFeiGroup,
  downloadPersonCertGroup,
  downExamPayment,
  downExamCerts, downExamCertsByExamId, downExamCertsByStudentId
} from '@/api/download.js'
import url from '@/assets/images/download.png'
import { ElLoading } from 'element-plus'
const { proxy } = getCurrentInstance()
const route = useRoute()
const timer = ref(null)
const urlS = ref(null)
const downloadLoadingInstance = ref()
onMounted(() => {
  // 个人会员证批量下载
  if (route.query.type == 'batchMember') {
    clearInterval(timer.value)
    downloadLoadingInstance.value = ElLoading.service({
      text: '正在下载数据，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    return downloadPersonCert(route.query.arr).then((res) => {
      if (res.code == 200) {
        downloadLoadingInstance.value = ElLoading.service({
          text: '正在下载数据，请稍候',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        circulation(res.data)
      }
    })
  }

  // 个人会员缴费单下载
  if (route.query.type == 'batchMemberFeeBill') {
    clearInterval(timer.value)
    downloadLoadingInstance.value = ElLoading.service({
      text: '正在下载数据，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    return downJiaoFei(route.query.arr).then((res) => {
      if (res.code == 200) {
        downloadLoadingInstance.value = ElLoading.service({
          text: '正在下载数据，请稍候',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        circulation(res.data)
      }
    })
  }

  // 团体会员缴费单下载
  if (route.query.type == 'batchGroupMemberFeeBill') {
    clearInterval(timer.value)
    downloadLoadingInstance.value = ElLoading.service({
      text: '正在下载数据，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    return downJiaoFeiGroup(route.query.arr).then((res) => {
      if (res.code == 200) {
        downloadLoadingInstance.value = ElLoading.service({
          text: '正在下载数据，请稍候',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        circulation(res.data)
      }
    })
  }

  // 级段位证书
  if (route.query.type == 'examCert') {
    clearInterval(timer.value)
    downloadLoadingInstance.value = ElLoading.service({
      text: '正在下载数据，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    return downExamCerts(route.query.arr).then((res) => {
      if (res.code == 200) {
        downloadLoadingInstance.value = ElLoading.service({
          text: '正在下载数据，请稍候',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        circulation(res.data)
      }
    })
  }
  if (route.query.type == 'examCertByExamIds') {
    clearInterval(timer.value)
    downloadLoadingInstance.value = ElLoading.service({
      text: '正在下载数据，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    return downExamCertsByExamId(route.query.arr).then((res) => {
      if (res.code == 200) {
        downloadLoadingInstance.value = ElLoading.service({
          text: '正在下载数据，请稍候',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        circulation(res.data)
      }
    })
  }
  if (route.query.type == 'examCertByStudentIds') {
    clearInterval(timer.value)
    downloadLoadingInstance.value = ElLoading.service({
      text: '正在下载数据，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    return downExamCertsByStudentId(route.query.arr, route.query.examIds).then((res) => {
      if (res.code == 200 && res.data) {
        downloadLoadingInstance.value = ElLoading.service({
          text: '正在下载数据，请稍候',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        circulation(res.data)
      }
    })
  }

  // 批量下载团体会员证
  if (route.query.type == 'batchGroupMember') {
    clearInterval(timer.value)
    downloadLoadingInstance.value = ElLoading.service({
      text: '正在下载数据，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    return downloadPersonCertGroup(route.query.arr).then((res) => {
      if (res.code == 200) {
        downloadLoadingInstance.value = ElLoading.service({
          text: '正在下载数据，请稍候',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        circulation(res.data)
      }
    })
  }

  // 缴费单下载
  if (route.query.type == 'examPayment') {
    clearInterval(timer.value)
    downloadLoadingInstance.value = ElLoading.service({
      text: '正在下载数据，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    return downExamPayment(route.query.arr).then((res) => {
      if (res.code == 200 && res.data) {
        downloadLoadingInstance.value = ElLoading.service({
          text: '正在下载数据，请稍候',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        circulation(res.data)
      }
    })
  }
})


// 循环请求
function circulation(id) {
  timer.value = setInterval(async() => {
    downloadLoadingInstance.value = ElLoading.service({
      text: '正在下载数据，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    const res = await queryProcess(id)
    if (res.data.url) {
      urlS.value = res.data.url
      window.open(`${import.meta.env.VITE_APP_BASE_API}${res.data.url}`)
      clearInterval(timer.value)
      downloadLoadingInstance.value.close()
      closeWindow()
    }
    console.log(res)
  }, 2000)
}

function closeWindow() {
  proxy.$modal.confirm('文件转换已完成正在下载中，是否关闭当前页面？')
    .then(() => {
      window.close()
    })
}


</script>

<style scope lang="scss">
.app-container{
  height: 100%;
  padding: 100px;
  .row{
  width: 100%;
  height: 100%;
  align-content: center;

  .box{
    width: 600px;
    height: 400px;
    border-radius: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
}

</style>