<!--扫码展示-->
<template>
  <div id="codeHtml"
       v-loading="loading">
    <div class="w-e-text w-e-text-box" v-html="text" v-if="type==1"></div>
    <div v-if="type==2" class="pdf-max-box">
      <pdf
        ref="pdf"
        :src="form.content"
        v-for="i in numPages"
        :key="i"
        :page="i"
      >
      </pdf>
    </div>
    <div class="w-e-text" v-html="text" v-if="type==3"></div>
    <p class="null-p" v-if="type == 4">数据异常,请联系管理员</p>
  </div>
</template>

<script>
  import { chemicalMsdsDetailNotToken, examSafeBookDetailNotToken, laboratoryHazardDetailNotToken } from '@/api/basicsModules/index'
  import pdf from 'vue-pdf'

  export default {
    components: {
      pdf
    },
    name: 'codeHtml',
    data() {
      return {
        //状态数据相关
        code: '',
        type: '',
        //富文本相关
        text: '',
        //pdf相关
        numPages: null, // pdf 总页数
        form: {},
        src: '', // pdf文件地址
        // 加载样式
        loading: true
      }
    },
    created() {

    },
    mounted() {
      this.$set(this, 'code', this.$route.query.code)
      this.$set(this, 'type', this.$route.query.type)
      this.$nextTick(() => {
        if (this.type == 1) {
          //查询MSDS说明书详情
          this.chemicalMsdsDetailNotToken(this.$route.query.code)
        } else if (this.type == 2) {
          //查询安全管理制度
          this.examSafeBookDetailNotToken(this.$route.query.code)
        } else if (this.type == 3) {
          //查询危险源
          this.laboratoryHazardDetailNotToken(this.$route.query.code)
        } else {
          this.type = 4
          this.loading = false
        }
      })
    },
    methods: {
      //加载接口
      chemicalMsdsDetailNotToken(code) {
        chemicalMsdsDetailNotToken({id:code}).then(data => {
          this.text = unescape(data.data.content)
          this.loading = false
        })
      },
      examSafeBookDetailNotToken(code) {
        examSafeBookDetailNotToken({id:code}).then(data => {
          this.form.content = unescape(data.data.realContent)
          // this.form.content = 'http://192.168.1.8/api'+unescape(data.data.content)
          this.getNumPages()
        })
      },
      laboratoryHazardDetailNotToken(code) {
        laboratoryHazardDetailNotToken({hazardId:code}).then(data => {
          this.text = unescape(data.data.content)
          this.loading = false
        })
      },
      getNumPages() {
        let loadingTask = pdf.createLoadingTask(this.form.content)
        loadingTask.promise.then(pdf => {
          this.numPages = pdf.numPages
          this.loading = false
        }).catch(err => {
          console.error('pdf 加载失败', err)
        })
      },
      //pdf方法
      changePdfPage(val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加载时
      loadPdfHandler(e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },
      accMul(arg1, arg2) {
        var m = 0, s1 = arg1.toString(), s2 = arg2.toString()
        try {
          m += s1.split('.')[1].length
        } catch (e) {
        }
        try {
          m += s2.split('.')[1].length
        } catch (e) {
        }
        return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
      }
    }
  }
</script>
<style lang="scss">
  #codeHtml {
    video {
      width: 100% !important;
      /*object-fit: fill;*/
      height: 100% !important;
      /*display: block;*/
    }
    img {
      width: 100% !important;
      height: 100% !important;
      /*width:1500px;*/
      /*margin:20px 200px;*/
    }
  }
</style>
<style scoped lang="scss">
  #codeHtml {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    * {
      margin: 0;
      padding: 0;
    }
    .pdf-max-box {
      flex: 1;
      overflow-y: scroll;
    }
    .top-button-box {
      width: 100%;
      display: flex;
      .null-p {
        flex: 1;
      }
    }
    .w-e-text {
      flex: 1;
      overflow-x: scroll;
      overflow-y: scroll;
      padding: 8px;
      font-size: 16px;
    }
    .w-e-text.table::-webkit-scrollbar {
      width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    .w-e-text.table::-webkit-scrollbar-thumb {
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #999;
      background: #fff;
    }
    .w-e-text.table::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0);
      border-radius: 0;
      background: rgba(255, 255, 255, 0);
    }
    .null-p {
      text-align: center;
      line-height: 80px;
      color: #666;
    }
  }
</style>
