<template>
  <div class="content_main">
    <div class="loading-main" v-show="loadingProcess">
      <div class="row-main">
        <img class="loading-img" src="../../assets/images/loading.gif" />
        <div class="title-first" style=" margin-left: 22px;">正在检测您的账号安全状态，请稍后……</div>
      </div>
      <div class="row-main mt15">
        <el-icon style="width: 30px;height: 24px;" color="#1ba854" class="small">
          <CircleCheckFilled />
        </el-icon>
        <div class="title-desc">IP认证成功</div>
      </div>
      <div class="row-main mt15">
        <div class="circle-main">
          <div class="circle"></div>
        </div>
        <div class="title-desc">通行密钥认证</div>
      </div>
    </div>

    <div class="loading-main" v-show="!loadingProcess">
      <div class="row-main">
        <el-icon style="width: 32px;height: 32px;" color="#1ba854" class="big">
          <CircleCheckFilled />
        </el-icon>
        <div class="title-first" style=" margin-left: 22px;">认证通过</div>
      </div>
      <div class="row-main mt15">
        <el-icon style="width: 30px;height: 24px;" color="#1ba854" class="small">
          <CircleCheckFilled />
        </el-icon>
        <div class="title-desc">IP认证成功</div>
      </div>
      <div class="row-main mt15">
        <el-icon style="width: 30px;height: 24px;" color="#1ba854" class="small">
          <CircleCheckFilled />
        </el-icon>
        <div class="title-desc">通行密钥认证</div>
      </div>
    </div>

    <div class="file-down" v-if="!loadingProcess && file.name">
      <div class="title-first">交付物下载</div>
      <div class="file-row-main">
        <div class="file-operate">
          <template
            v-if="file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() == 'xls' || file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() == 'xlsx'">
            <img class="file-img" src="../../assets/images/excel.png" />
          </template>
          <template
            v-else-if="file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() == 'doc' || file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() == 'docx'">
            <img class="file-img" src="../../assets/images/word.png" />
          </template>
          <template v-else-if="file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() == 'zip'">
            <img class="file-img" src="../../assets/images/zip.png" />
          </template>
          <template v-else-if="file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() == 'rar'">
            <img class="file-img" src="../../assets/images/RAR.png" />
          </template>
          <template v-else-if="file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() == 'pdf'">
            <img class="file-img" src="../../assets/images/PDF.png" />
          </template>
          <template v-else-if="file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() == 'png'">
            <img class="file-img" src="../../assets/images/png.png" />
          </template>
          <template
            v-else-if="file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() == 'jpg' || file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() == 'jpeg'">
            <img class="file-img" src="../../assets/images/jpg.png" />
          </template>
          <div class="file-name"
            :style="{ width: ['pdf', 'png', 'jpg', 'jpeg'].includes(file?.name?.substring(file.name.lastIndexOf('.') + 1).toLowerCase() ?? '') ? 'calc(100% - 300px)' : 'calc(100% - 290px)' }">
            <ellipsis-tooltip :content="file.name" class-name="w100f"
              :refName="'tooltipOver' + file.name"></ellipsis-tooltip>
          </div>
          <div class="upload-time" :style="{ right: 32 }" v-if="uploadTime"> {{ '上传时间：' + uploadTime }} </div>
          <div :style="{ right: 0 }" class="file-preview" @click="onUploadFileDownload(file)">下载
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="downDeliveryFile">
import { onUploadFileDownload } from '@/api/modules/common';
import {
  CircleCheckFilled
} from "@element-plus/icons-vue";
import {
  getDeliveryFileDetail
} from '@/api/modules/dataTrustedSpace';

const { proxy } = getCurrentInstance() as any;

const route = useRoute()

const file = ref({
  name: '',
  url: ''
});

const uploadTime = ref('');

const loadingProcess = ref(true);

onActivated(() => {
  loadingProcess.value = true;
  getDeliveryFileDetail(route.query.guid).then((res: any) => {
    if (res.code == proxy.$passCode) {
      file.value = res.data?.dataDelivery?.[0] || {
        name: '',
        url: ''
      };
      uploadTime.value = res.data?.uploadTime || '';
      setTimeout(() => {
        loadingProcess.value = false;
      }, 1000)
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
})

onBeforeMount(() => {
})

</script>

<style lang="scss" scoped>
.content_main {
  display: flex;
  background-color: #f5f5f6;
  padding: 24px 120px 0px;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

.loading-main {
  height: 162px;
  background: #F2F9FF;
  border: 1px solid rgba(182, 213, 241, 1);
  padding: 30px 56px;
  width: 100%;

  .title-desc {
    font-size: 14px;
    color: #212121;
    line-height: 24px;
    font-weight: 400;
    margin-left: 22px;
  }
}


.title-first {
  font-size: 20px;
  color: #212121;
  line-height: 30px;
  font-weight: 600;
}

.row-main {
  display: flex;
}

.loading-img {
  width: 28px;
  height: 28px;
}

:deep(.el-icon.small) {
  svg {
    width: 20px;
    height: 20px;
  }
}

:deep(.el-icon.big) {
  svg {
    width: 32px;
    height: 32px;
  }
}

.circle-main {
  width: 30px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  border-radius: 100%;
  border: 1px solid #b2b2b2;
  width: 16px;
  height: 16px;
}

.mt15 {
  margin-top: 12px;
}

.file-down {
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  margin-top: 22px;

  .file-row-main {
    height: 48px;
    background-color: #f5f5f5;
    padding: 8px 24px;
    margin-top: 12px;
    justify-content: center;
    display: flex;
  }
}

.file-operate {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;

  .file-img {
    width: 30px;
    height: 30px;
  }

  &:hover {
    background-color: #f5f5f5;
  }
}

.file-name {
  margin-left: 4px;
  margin-right: 4px;
  width: calc(100% - 130px);
  color: #212121;
  font-size: 14px;
}

.upload-time {
  color: #212121;
  font-size: 14px;
}

.file-preview {
  position: absolute;
  cursor: pointer;
  color: var(--el-color-primary);
  margin-right: 8px;
   font-size: 14px;
}
</style>