<template>
  <div class="container">
    <h2>申请加入国家消化道早癌防治中心联盟</h2>
    <div class="sub_title">申请阶段</div>
    <div class="content">
      <h3>1、下载申请材料</h3>
      <div class="upload_item" v-for="item in list" :key="item.id">
        <div class="img-file">
          <img src="@/assets/img/Home/file.png" alt="" />
        </div>
        <div style="float: left" class="upload_label">
          <strong>{{ item.label }} </strong>
          <span>{{ item.size }}</span>
        </div>
        <div class="img-load" @click="download(item)">
          <img src="@/assets/img/Home/download.png" alt="" />
        </div>
      </div>
      <h3>2、发送至邮箱</h3>
      <p>service@gecachina.cn</p>
      <h3>3、定期参与入盟培训</h3>
      <p>培训内容：新系统使用、筛查方法及医患沟通等</p>
      <h3>4、材料认证 - 开通账户</h3>
      <p>a. 回复确认入盟邀请函</p>
      <p>b. 账户开通：门诊、体检、、社区</p>
      <h3>5、数据审核</h3>
      <p>
        a.
        按要求上传足量病例后，联盟官网将公示入盟医院：三甲医院需上传100例数据，非三甲医院需上传50例
      </p>
      <p>b. 目前已入联盟但未公示的医院，需补充病例才可公示</p>
      <h3>6、官网公示 - 申请成功</h3>
    </div>

    <div class="sub_title">运行阶段</div>
    <div class="content">
      <h3>1、定期沟通会 - 数据上传</h3>
      <p>a. 根据指导建议做出积极响应：制定后续跟进计划</p>
      <p>
        b. 已在官网公示名单中的医院将定期开启回溯重申，如不合格将从名单中摘除
      </p>
      <h3>2、正式授牌</h3>
      <p>正式入盟后需要定期上传筛查数据（高质量且有效）才可获得授牌</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          url: "/geca-api/disease-data/file/info/geca2/notice-00000001.docx",
          label: "国家消化道早癌防治中心”（早期胃癌筛查项目）申请表.docx",
          size: "35.7 KB",
        },
        {
          id: 2,
          url: "/geca-api/disease-data/file/info/geca2/notice-00000002.pdf",
          label: "早期胃癌筛查项目 申请表填写标准(1).pdf",
          size: "351 KB",
        },
        {
          id: 4,
          url: "/geca-api/disease-data/file/info/geca2/notice-00000004.docx",
          label: "GECA联盟申请Q&A问答汇总.docx",
          size: "508 KB",
        },
      ],
    }
  },
  methods: {
    download({ url, label }) {
      const prefix =
        process.env.NODE_ENV === "development"
          ? "https://ds.cixincloud.com/"
          : ""
      const el = document.createElement("a")
      el.download = label
      el.target = "_blank"
      el.style.display = "none"
      el.href = prefix + url
      document.body.appendChild(el)
      el.click()
      URL.revokeObjectURL(el.href)
      document.body.removeChild(el)
    },
  },
  mounted() {},
  watch: {},
}
</script>
<style lang="scss" scoped>
.container {
  padding: 30px 10px;
  h2 {
    font-weight: bold;
    font-size: 28px;
    text-align: center;
    height: 36px;
    font-size: 32px;
    font-family: AlibabaPuHuiTiB;
    letter-spacing: 3px;
    margin-bottom: 50px;
    color: #4e68ff;
    line-height: 36px;
  }
  .content {
    padding-left: 30px;
    letter-spacing: 1px;
    h3 {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      line-height: 50px;
      margin-top: 10px;
    }
    p {
      line-height: 20px;
      padding-left: 15px;
    }
  }
  .upload_item {
    width: 780px;
    height: 60px;
    background: #f5f5f5;
    border-radius: 8px;
    line-height: 60px;
    overflow: hidden;
    margin-bottom: 20px;
    .img-file {
      float: left;
      padding: 0 10px;
      width: 60px;
      line-height: 60px;
      img {
        transform: translateY(10px);
        width: 40px;
        height: 40px;
      }
    }
    .upload_label {
      float: left;
    }
    .img-load {
      float: right;
      width: 60px;
      height: 60px;
      background-color: #ebeeff;
      text-align: center;
      cursor: pointer;
      img {
        transform: translateY(10px);
        width: 28px;
        height: 28px;
      }
    }

    strong {
      color: #333333;
      font-size: 16px;
      margin-right: 10px;
    }
  }
  .sub_title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin: 10px;
    padding-left: 15px;
    letter-spacing: 2px;
    position: relative;
    &::before {
      content: " ";
      border-left: 4px solid #4e68ff;
      position: absolute;
      height: 18px;
      top: 4px;
      left: 0;
    }
  }
}
</style>