<template>
  <el-scrollbar>
    <div class="grid-container">
      <div v-for="(box, index) in drawingData" :key="index" class="suit-box">
        <div class="pdf-box">
          <PDFView
            :need-to-show-pdf="true"
            :pdf-source="baseUrl + box.pdfPath"
          />
        </div>
        <div class="suit-title">{{ box?.drawingTitle }}</div>
        <div class="suit-desc">{{ box?.created }}</div>
        <el-button
          class="download-btn"
          type="primary"
          @click="download(box)"
          :key="box.drawingPath"
          >下载</el-button
        >
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { drawingList } from "@/api/process/reportBreak";
import { useProcessStore } from "@/store/modules/processView";
import PDFView from "@/components/PDFView/index.vue";

const processStore = useProcessStore();
const drawingData = ref<any>([]);

const baseUrl = import.meta.env.VITE_APP_UPLOAD_URL;

onMounted(() => {
  drawingList({ materialCode: processStore.scanInfo.materialCode }).then(
    (res) => {
      drawingData.value = res.data;
    }
  );
});

const downloadBtnLoading = ref(false);
const download = async (row: any) => {
  downloadBtnLoading.value = true;
  let url = import.meta.env.VITE_APP_UPLOAD_URL + row.drawingPath;

  // 1. 获取资源并转为Blob
  const response = await fetch(url);
  const blob = await response.blob();

  // 2. 创建临时对象URL
  const tempUrl = URL.createObjectURL(blob);

  // 3. 创建隐藏a标签触发下载
  const link = document.createElement("a");
  link.href = tempUrl;
  link.download = row.fileName;
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();

  // 4. 清理内存
  URL.revokeObjectURL(tempUrl);
  document.body.removeChild(link);
  downloadBtnLoading.value = false;
};
</script>

<style lang="scss" scoped>
.grid-container {
  display: grid;
  /*行间距*/
  grid-row-gap: 24px;
  /*列间距*/
  grid-column-gap: 24px;

  overflow-y: auto;
  padding: 24px;
  width: calc(100% - 48px);
  grid-template-columns: 1fr 1fr 1fr;
  height: calc(100vh - 100px);

  .suit-box {
    height: 343px;
    background-color: white;
    border-radius: 16px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: relative;

    .pdf-box {
      height: 263px;
      width: 100%;
      overflow: hidden;
    }

    .suit-title {
      font-weight: 500;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
      margin-left: 24px;
    }

    .suit-desc {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.6);
      text-align: left;
      margin-left: 24px;
    }

    .download-btn {
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }
}
</style>
