<template>
  <div class="pdf-controller">
    <div class="actions" :class="hide ? 'hide-actions' : ''" style="margin-top: 30px">
      <el-button title="下载" size="small" style="margin-right: 5px" v-if="canDownload"
                 @click="handleDownloadPdfFile"><el-icon><Download /></el-icon></el-button>
      <el-button @click="handlePrevious" title="上一页" size="small"><el-icon><ArrowLeftBold /></el-icon></el-button>
      <label class="page">
        {{currentPage}} / {{totalPages}}
      </label>
      <label class="to-page-action">
        <el-input placeholder="to" ref="input" type="number" v-model="currentPage" @input="handleToPage"/>
      </label>
      <el-button @click="handleNext" title="下一页" size="small"><el-icon><ArrowRightBold /></el-icon></el-button>
    </div>
    <el-button @click="hide = !hide" :title="hide ? '展开' : '收起'" class="show-button" :class="hide ? 'show-button-hide' : 'show-button-show'" circle>
      <el-icon><ArrowUpBold /></el-icon>
    </el-button>
  </div>
</template>

<script>
import { NEXT_PAGE, PREVIOUS_PAGE, SET_CURRENT_PAGE} from "../../../store/types/pdf-types";
import { mapState } from "vuex";

export default {
  data () {
    return {
      pageMarked: false,
      toPage: 1,
      hide: false,
      canDownload: false,
      //currentPage: 1
    };
  },
  mounted() {
    this.handleCanDownload();
    //this.$router.replace({ path:"/empty/" + this.$route.params.courseWareId});
  },
  computed: {
    ...mapState({
      src: state => state.pdf.src,
      totalPages: state => state.pdf.totalPages,
      currentPage: state => state.pdf.currentPage
    })
  },
  methods: {
    handlePrevious () {
      this.$store.commit(PREVIOUS_PAGE);
    },
    handleNext () {
      this.$store.commit(NEXT_PAGE);
    },
    handleToPage (value) {
      if (value === "" || value === 0) {
        return;
      }
      value = typeof value === typeof "" ? parseInt(value) : value;
      if (value > this.totalPages) {
        this.$store.commit(SET_CURRENT_PAGE, { currentPage: this.totalPages });
      } else if (value <= 0) {
        this.$store.commit(SET_CURRENT_PAGE, { currentPage: 1 });
      } else {
        this.$store.commit(SET_CURRENT_PAGE, { currentPage: value });
      }
    },
    handleCanDownload () {
      this.$apis.getCanDownloadById(this.$route.params.courseWareId).then(res => {
        this.canDownload = res.data.data;
      });
    },
    handleDownloadPdfFile() {
      this.$apis.getCourseWareById(this.$route.params.courseWareId).then(res => {
        window.open(res.data.data.fileUrl, "_blank");
      });
    }
  }
};
</script>

<style>

.pdf-controller {
  position: fixed;
  right: 12px;
  top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: .2s ease-out;
  color: #619dc9;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 4px 12px;
  margin-right: 12px;

  border-radius: 12px;
  background-color: rgba(218, 234, 250, 0.4);
  backdrop-filter: saturate(150%) blur(20px);

  transition: .2s ease-out;
}

.hide-actions {
  transform: translateY(-80px);
}

.page {
  color: #7a8a9a;
  padding: 0 6px;
  font-size: 14px;
}

.to-page-action {
  color: #7a8a9a;
  padding: 0 6px;
  font-size: 14px;
  width: 100px;
}

.show-button {
  transition: .2s ease-out;
  margin-top: 30px;
}

.show-button-hide {
  transform: scale(-1);
}

.show-button-show {
  transform: scale(1);
}

@media (max-width: 500px) {
  .show-button {
    display: none;
  }

  .hide-actions {
    transform: translateY(0);
  }
}
</style>
