<template>
  <sh-dialog
    :title="title"
    :visible.sync="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="1000px"
    height="90vh"
    :before-close="handleClose">
    <div class="pdf">
      <pdf
        v-for="i in numPages"
        :key="i"
        :src="src"
        :page="i"
      ></pdf>
    </div>
    <span slot="footer" class="dialog-footer">
      <ul class="file clearfix">
        <li class="file-item" v-for="(item, index) in downList" :key="index">
          <span @click="downLoad(item)" >
          <i class="el-icon-download"></i>
            {{ item.name }}
          </span>
        </li>
      </ul>
      <el-button @click="visible = false">关 闭</el-button>
    </span>
  </sh-dialog>
</template>

<script>
import pdf from 'vue-pdf'
import {ANNEX_DOWNLOAD} from '@/apis/notice'
export default {
  components: { pdf },
  props: {
    api: String,
    param: Object,
    downList: Array,
    title: {
      type: String,
      default: () => {
        return '预览'
      }
    },
    dialogVisible: Boolean
  },
  watch: {
    dialogVisible: {
      handler (val) {
        this.visible = val
        if (val) {
          this.loadPdf()
        }
      },
      immediate: true
    },
    visible (val) {
      this.$emit('update:dialogVisible', val)
    }
  },
  data () {
    return {
      visible: false,
      src: null,
      numPages: undefined
    }
  },
  methods: {
    loadPdf () {
      axios({
        method: 'get',
        url: this.api || ANNEX_DOWNLOAD,
        responseType: 'blob', //接收返回的类型 
        params: this.param
      }).then((res) => {
        let url = window.URL.createObjectURL(res.data)
        // this.src = pdf.createLoadingTask(url)
        this.src = pdf.createLoadingTask({
               url: url, 
               cMapUrl: "../../sanhcdn/cmaps/",
               cMapPacked: true
        })
        this.src.promise.then(pdf => {
          this.numPages = pdf.numPages;
        })
      })
    },
    downLoad(row) {
      this.$downloadFile(this.api || ANNEX_DOWNLOAD, {id: row.id}, row.name )
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf{
  height: calc(80vh - 116px);
  overflow: auto;
  border: 1px solid #eee;
}
.arrow{
  text-align: center;
}
.dialog-footer{
  position: relative;
}
.file{
  text-align: left;
  &-item{
    float: left;
    margin-left: 20px;
    a {
      color: #129eff;
    }
    i {
      font-weight: 600;
      font-size: 18px;
    }
  }
}
</style>