<template>
  <risp-template :reportTitle="reportTitle" :baseInfo="baseInfo" class="timeline-risp-add-page">
    <template>
      <div class="diagose-bodys-con">
        <div class="item-con">
          <div class="val-title">备注意见及说明:</div>
          <div class="val-text" v-html="rispReport.remark"></div>
        </div>
        <div class="item-con">
          <div class="val-title">参考文献:</div>
          <div class="val-text" v-html="rispReport.reference"></div>
        </div>
        <div class="item-con">
          <div class="val-title">文献附件:</div>
          <div
            class="val-text reference-hover"
            style="width:100%;"
            v-for="refence in refences"
            :key="refence.id"
            @click="handleView(refence)"
          >
            {{
            refence.fileName
            }}
          </div>
        </div>
      </div>
    </template>
  </risp-template>
</template>


<script>
import RispTemplate from "../risp-template.vue";
export default {
  components: {
    RispTemplate
  },
  props: {
    rispData: Object,
    baseInfo: Array,
    rispReport: Object,
    refences: Array
  },

  provide() {
    return {
      rispDatas: this.rispData,
      rispReports: this.rispReport,
    };
  },
  methods: {
    handleView(file) {
      console.log(13123);
      let url = file.reference;
      if (file.format == "doc" || file.format == "docx") {
        url = `https://view.officeapps.live.com/op/view.aspx?src=${url}`;
      }
      if (file.format == "caj") {
        fetch(url).then(res => {
          res.blob().then(blob => {
            const blobUrl = window.URL.createObjectURL(blob);
            // 这里的文件名根据实际情况从响应头或者url里获取
            const a = document.createElement("a");
            a.href = blobUrl;
            a.download = file.fileName;
            a.click();
            window.URL.revokeObjectURL(blobUrl);
          });
        });

        return false;
      }
      window.open(url);
    }
  },
  data() {
    return {
      reportTitle: "附加页",
    }
  }
};
</script>

<style lang="less" scoped>
@import "./add-page.less";
.reference-hover {
    cursor: pointer;
}
.reference-hover:hover  {
    color:#3e98ff !important;
}
</style>