<script name="trialRunInfo" setup>
import { ref, onMounted } from 'vue'
import { appReport } from '@/http/apis/projectStoreManage/projectStore'
import NoData from '@/components/noData/index.vue'
const props = defineProps({
  detailData: Object
})
const reportData = ref([]),
  getReportData = () => {
    reportData.value = []
    if (props?.detailData?.projectApplications?.filter(i => i.relatedExistsApplicationCode || i.appCode).length) {
      props?.detailData?.projectApplications?.filter(i => i.relatedExistsApplicationCode || i.appCode).forEach(async data => {
        const res = await appReport(data.relatedExistsApplicationCode || data.appCode)
        reportData.value.push({
          name: data.relatedExistsApplication || data.applicationName,
          ossUrl: res.data
        })
      })
    }
  },
  // 预览
  view = (url) => {
    window.open(url, '_blank')
  },
  // 下载
  downloadFile = (url) => {
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.download = props.fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
  }
onMounted(() => {
  getReportData()
})
</script>

<template>
  <el-descriptions v-if="reportData?.length" :column="2" border>
    <template v-for="(item,index) in reportData" :key="index">
      <el-descriptions-item label="应用名称">
        {{ item.name||'-' }}
      </el-descriptions-item>
      <el-descriptions-item label="试运行报告">
        <div v-if="item.ossUrl" class="accessory text-primary flex items-center">
          <span class="cursor-pointer" @click="view(item.ossUrl)">试运行报告.pdf</span>
          <p class="ml-24 flex items-center text-primary btn cursor-pointer" @click="downloadFile(item.ossUrl)">
            <svg-icon name="down-icon" class="mr-4 text-14" />
            <span>下载</span>
          </p>
        </div>
        <span v-else>-</span>
      </el-descriptions-item>
    </template>
  </el-descriptions>
  <no-data v-else />
</template>
<style lang="less">
.accessory {
  .btn {
    line-height: 22px;
    height: 22px;
    background: rgba(9, 103, 253, 0.06);
    border-radius: 4px;
    border: 1px solid #0967FD;
    padding: 0 6px;
    font-size: 14px;
  }
}
</style>
