<template>
  <div class="app-container">
    <el-row class="row" justify="center">
      <div class="box">
        <el-image v-show="!show" :src="url" fit="cover" />
        <div v-show="show" style="margin-top: 80px">
          <h2>下载即将开始。如果没有开始，请使用此直接链接。</h2>
          <p>
            <el-link
              ref="linkRef" style=" text-decoration: underline;" type="primary" :href="fillImgUrl(urlS)"
              target="_blank"
            >{{ name }}
              <el-icon>
                <Download />
              </el-icon>
            </el-link>
          </p>
          <br>
          <br>
          <p>
            <el-button type="primary" @click="closeFN()">关闭当前页面</el-button>
          </p>
        </div>
      </div>
    </el-row>
  
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { onMounted, getCurrentInstance, ref, nextTick } from 'vue'
import {
  queryProcess,
  downJiaoFei,
  downloadPersonCert,
  downJiaoFeiGroup,
  downloadPersonCertGroup,
  downExamPayment,
  downExamCerts,
  downExamCertsByExamId,
  downExamCertsByStudentId,
  downJiaoYJFei
} 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()
const urlS = ref(null)
const show = ref(false)
const name = ref()
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 == 'batchMemberYJFeeBill') {
    clearInterval(timer.value)
    downloadLoadingInstance.value = ElLoading.service({
      text: '正在下载数据，请稍候',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    return downJiaoYJFei(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) {
      downloadLoadingInstance.value.close()
      clearInterval(timer.value)
      show.value = true
      urlS.value = res.data.url
      const arr = res.data.url.split('/')
      const Narr = arr[arr.length - 1].split('\\')
      name.value = Narr[Narr.length - 1]
      await nextTick(() => {
        proxy.$refs['linkRef'].$el.click()
      })
    }
  }, 2000)
}


function closeFN() {
  window.close()
}


</script>

<style scoped 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;
    }
  }
  
  .link {
    color: #4696d2;
  }
}

</style>