<template>
  <div v-loading="loadedRatio < 1">
    <!-- <input type="checkbox" v-model="show" /> -->
    <!-- <select v-model="src" style="width: 30em">
      <option v-for="item in pdfList" :value="item" v-text="item"></option>
    </select>-->
    <div id="pdf-buttons">
      <el-button-group>
        <el-button type="primary" size="mini" icon="el-icon-arrow-left" @click.prevent="previousPage">上一页</el-button>
        <el-button type="primary" size="mini" @click.prevent="nextPage">
          下一页
          <i class="el-icon-arrow-right el-icon--right" />
        </el-button>
      </el-button-group>
      <el-input id="pdf-page-input" type="number" size="mini" :value="page" :min="1" :max="numPages" @input="page = $event * 1" />
      <!-- <el-input-number size="mini" v-model="page" controls-position="right" :min="1" :max="numPages"></el-input-number> -->
      /{{ numPages || 0 }}
      <!-- <input v-model.number="page" type="number" style="width: 5em" />
      /{{numPages}}-->
      <!-- <el-button type="primary" icon="el-icon-arrow-left" @click.prevent="rotate += 90"></el-button>
      <el-button type="primary" icon="el-icon-arrow-left" @click.prevent="rotate -= 90"></el-button>-->
      <el-button-group>
        <el-button type="primary" size="mini" icon="el-icon-printer" @click.prevent="$refs.pdf.print()">打印</el-button>
        <el-button type="primary" size="mini" icon="el-icon-download" @click.prevent="download">下载</el-button>
      </el-button-group>
    </div>
    <div style="width:100%;height:80vh;overflow:auto;">
      <div
        v-if="loadedRatio > 0 && loadedRatio < 1"
        style="background-color: green; color: white; text-align: center"
        :style="{ width: loadedRatio * 100 + '%' }"
      >
        {{ Math.floor(loadedRatio * 100) }}%
      </div>
      <pdf
        v-if="show"
        ref="pdf"
        style="width:100%;margin:0px auto;"
        :src="src"
        :page="page"
        :rotate="rotate"
        @password="password"
        @progress="loadedRatio = $event"
        @error="error"
        @num-pages="numPages = $event"
        @link-clicked="page = $event"
      />
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf: pdf
  },
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      show: true,
      loadedRatio: 0,
      page: 1,
      numPages: 0,
      rotate: 0
    }
  },
  watch: {
    src: function() {
      this.loadedRatio = 0
      this.page = 1
    }
  },
  methods: {
    password: function(updatePassword, reason) {
      updatePassword(prompt('password is "test"'))
    },
    error: function(err) {
      console.log(err)
    },
    nextPage() {
      if (this.page < this.numPages) {
        this.page++
      }
    },
    previousPage() {
      if (this.page > 1) {
        this.page--
      }
    },
    download() {
      if (this.src) {
        window.open(this.src)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#pdf-buttons {
  width: 100%;
  text-align: center;
  margin-bottom: 5px;
  ::v-deep .el-input {
    width: 50px;
  }

  ::v-deep #pdf-page-input {
    padding: 0px;
    padding-left: 10px;
  }
}
</style>
