<template>
  <div>
    <header>
      <div class="flex title">
        <h3>{{ detailInfo.qjy_zymc }}</h3>
        <!-- <preview-attach :commonUrl="commonUrl" :suffix="suffix" style="width: 100%; height: 600px;">
        </preview-attach> -->
        <el-button type="primary" class="ml5" @click='downLoad()'>
          下载
        </el-button>
      </div>
      <p><span class="blank">资源类别</span> {{ detailInfo.qjy_zylb_mc }}</p>
      <p><span class="blank">资源类型</span> {{ detailInfo.qjy_zylx }}</p>
      <p><span class="blank">资源大小</span> {{ detailInfo.qjy_zydx }}</p>
      <p><span class="blank">上传人</span> {{ detailInfo.qjy_scr }}</p>
      <p><span class="blank">上传时间</span> {{ detailInfo.qjy_scsj }}</p>
    </header>
    <!-- <preview-attach :commonUrl="commonUrl" :suffix="suffix" style="width: 100%; height: 600px;">
    </preview-attach> -->
    <file-preview :url="dialogDataFile" alt="" style="width: 100%; height: 600px;" />
  </div>
</template>
<script>
import FilePreview from "@/components/FilePreview/index.vue";
//import PreviewAttach from "@/components/PreviewAttach/index.vue";
import { zyxxlb_detail } from "./api";
import { useUserStore } from "@/stores/user";
const { token } = useUserStore();
export default {
  components: {
    FilePreview,
    //PreviewAttach
  },
  data() {
    return {
      detailInfo: {},
      qjy_id: "",
      suffix: "",
      commonUrl: "",
      currentId: "",
      dialogDataFile: {},
    };
  },
  methods: {
    handlePreview(d) {
      this.dialogDataFile = d
      console.log(this.dialogDataFile, 999);
    },
    getFullUrl(url) {
      // return url;
      if (!url) return '';
      return url.startsWith('http') ? url : window.globalVariables.api + '/' + url
    },
    detailData() {
      let data = {
        qjy_id: this.qjy_id
      };
      zyxxlb_detail(data).then((res) => {
        if (res.code == 1) {
          this.detailInfo = res.data.one_info;
          let a = this.detailInfo.qjy_wjdz.indexOf('|');
          this.detailInfo.qjy_wjdz = this.detailInfo.qjy_wjdz.substring(0, a)
          this.handlePreview(this.getFullUrl(this.detailInfo.qjy_wjdz));
          console.log(this.detailInfo.qjy_wjdz, 123);
          // this.commonUrl = this.detailInfo.qjy_wjdz;
          // let a = this.commonUrl.indexOf('|');
          // this.commonUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + this.commonUrl.substring(0, a);
          // this.suffix = this.commonUrl.substr(this.commonUrl.lastIndexOf(".") + 1);
          // console.log(this.suffix);
          // if (this.suffix = 'pdf') {
          //   this.commonUrl = this.commonUrl.substring(0, a);
          // }
        }
      });
    },


    downLoad() {
      let downFileUrl = this.getFullUrl(this.detailInfo.qjy_wjdz);
      window.open(downFileUrl, '_self');
      console.log(downFileUrl, 456);
      // let a = this.wjUrl.indexOf('|');
      // this.wjUrl = this.wjUrl.substring(0, a)
      // this.commonUrl = this.detailInfo.qjy_wjdz;
      // let a = this.commonUrl.indexOf('|');
      // this.commonUrl = this.commonUrl.substring(0, a);
      // this.suffix = this.commonUrl.substr(this.commonUrl.lastIndexOf(".") + 1);
      // console.log(this.suffix);
      // var a = document.createElement('a')
      // document.body.appendChild(a)
      // a.href = downFileUrl
      // a.download = "资源信息列表";
      // a.click()
    },



  },
  mounted() {
    if (this.$route.params.id != "") {
      this.qjy_id = this.$route.params.id;
      this.detailData();

    }

  }
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
header {
  padding: 15px 20px;
  font-family: PingFangSC-Regular;
  box-sizing: border-box;
  font-size: 14px;
  color: #969696;
  border-bottom: 1px solid #f0f3f8;
  .title {
    justify-content: space-between;
    h3 {
      color: #000;
      font-size: 16px;
    }
  }
}
.blank {
  display: inline-block;
  color: #000;
  width: 65px;
}
.imgs {
  img {
    width: 160px;
    height: 90px;
    background: rgba(0, 0, 0, 0);
    margin-right: 23px;
  }
}
</style>