<template>
  <div>
    <div class="home-box" v-if="cardListMap && cardListMap.length > 0">
      <div>
        <div v-for="(item, index) in cardListMap" :key="index" class="home-box-content">
          <div class="home-box-content-btn">
            <el-button round class="btn" @click="handlePrint(item)">打印</el-button>
            <!-- <a :href="item.download_info.url" :download="item.download_info.filename" target="_blank"
              ><el-button round class="btn">下载</el-button></a
            > -->
            <el-button round class="btn" @click="handleDownload(item)">下载</el-button>
          </div>
          <div class="home-box-content-list">
            <img class="home-box-content-img" :src="item.download_info.url" />
          </div>
        </div>
      </div>
    </div>
    <div class="home-box-else" v-else>
      <!-- 暂无信息 -->
      <el-result title="暂无信息" icon="info"> </el-result>
    </div>
  </div>
</template>

<script>
import printJS from 'print-js'
import * as api from '@/api/article'
import { saveAs } from 'file-saver'

export default {
  data() {
    return {
      exportPDFtitle: '结业证书',
      cardList: [],
    }
  },
  computed: {
    cardListMap() {
      return this.cardList?.filter((item) => item.status === 2)
    },
  },
  methods: {
    // 获取证书列表
    getCertCard() {
      const params = { project_prefix: 'x1' }
      api.getCertCard(params).then((res) => {
        this.cardList = res.data?.list
      })
    },
    // 打印
    handlePrint(item) {
      printJS(item.download_info.url, 'image')
    },
    // 下载
    handleDownload(item) {
      saveAs(item.download_info.url, item.download_info.filename)
    },
  },
  mounted() {
    // 获取证书
    this.getCertCard()
  },
}
</script>
<style lang="scss" scoped>
.content-max-width {
  width: 1200px;
  margin: 0 auto;
  overflow: scroll;
  height: 100vh;
}
.home-box {
  width: 1100px;
  // background: #f8f8f8;
  margin: 100px auto;
  text-align: center;
  .home-box-content {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    padding: 20px 0 20px 0;
    .home-box-content-btn {
      align-self: flex-end;
      .btn {
        background: #a81a42;
        color: #fff;
        width: 150px;
        height: 50px;
      }
    }
    .home-box-content-list {
      width: 1100px;
      margin-top: 20px;
      .home-box-content-img {
        width: 100%;
        display: block;
      }
    }
  }
}
.home-box-else {
  width: 1200px;
  height: calc(100vh - 300px);
  margin: auto;
  text-align: center;
  position: relative;
  .el-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
