<template>
  <div class="office-demo" :class="{ 'z-full': full }">
    <div class="office-title">
      文档
      <div class="colse" @click="_colse"></div>
    </div>
    <div class="content">
      <img :src="pageUrlRule" :alt="pageUrlRule" v-photoswipe="{ group: 'officeImg' }" />
      <div class="page-box" v-if="form.enableTurn === 1">
        <div class="prev" @click="_prev"></div>
        <div class="next" @click="_next"></div>
      </div>
    </div>
    <div class="operation">
      <div class="name">
        <span>{{ form.currentPage }}/{{ form.pageCount }}</span>
        {{ form.name }}
      </div>
      <div class="download" v-if="form.enableDown === 1" id="copyDownUrl" @click="_copy"></div>
      <div class="full" @click="_full"></div>
    </div>
  </div>
</template>
<script>
import Clipboard from 'clipboard';
import { mapGetters } from 'vuex';
export default {
  name: 'suspension-office-demo',
  data() {
    return {
      full: false,
      form: {
        officeId: null,
        isEnable: false,
        enableTurn: false,
        enableDown: false,
        name: '',
        downUrl: '',
        pageUrlRule: '',
        currentPage: 1,
        pageCount: 1
      }
    };
  },
  computed: {
    ...mapGetters({
      channelConfig: 'channelConfig'
    }),
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    },
    officeLive() {
      return this.channelConfig.officeLive || {};
    },
    pageUrlRule() {
      if (this.form.pageUrlRule) {
        const sql = this.form.name.split('.');
        const type = sql[sql.length - 1];
        let pagePath = this.form.currentPage;
        if (type === 'xlsx' || type === 'xls') {
          pagePath = `s1/${this.form.currentPage}`;
        }
        return this.form.pageUrlRule.replace('{PAGE_NUM}', pagePath);
      } else {
        return '';
      }
    }
  },
  mounted() {
    this._resetInfo();
  },
  methods: {
    _resetInfo() {
      this.form = {
        officeId: this.officeLive.officeId,
        isEnable: this.officeLive.isEnable,
        enableTurn: this.officeLive.enableTurn,
        enableDown: this.officeLive.enableDown,
        name: this.officeLive.name,
        downUrl: this.officeLive.downUrl,
        pageUrlRule: this.officeLive.pageUrlRule,
        currentPage: this.officeLive.currentPage,
        pageCount: this.officeLive.pageCount
      };
    },
    _copy() {
      const self = this;
      const clipboardObj = new Clipboard('#copyDownUrl', {
        text: () => {
          return this.form.downUrl;
        }
      });
      clipboardObj.on('success', function() {
        clipboardObj.destroy();
        self.$layer.msg(
          `<div style="white-space: nowrap">已复制下载链接至剪切板,<br>请使用浏览器进行下载</div>`
        );
      });
      clipboardObj.on('error', function() {
        clipboardObj.destroy();
        self.$layer.msg('复制失败');
      });
    },
    _full() {
      this.full = !this.full;
    },
    _prev() {
      const page = this.form.currentPage - 1;
      this.form.currentPage = page <= 1 ? 1 : page;
    },
    _next() {
      const page = this.form.currentPage + 1;
      this.form.currentPage = page >= this.form.pageCount ? this.form.pageCount : page;
    },
    _colse() {
      this.isShow = false;
    }
  },
  watch: {
    'officeLive.officeId'() {
      this._resetInfo();
    },
    'officeLive.currentPage'(nVal) {
      if (this.form.enableTurn !== 1) {
        this.form.currentPage = nVal;
      }
    },
    'officeLive.enableTurn'(nVal) {
      this.form.enableTurn = nVal;
    },
    'officeLive.enableDown'(nVal) {
      this.form.enableDown = nVal;
      this._copy();
    }
  }
};
</script>
<style lang="less" scoped>
.office-demo {
  position: relative;
  background: #fff;
  height: 50vh;
  padding: 0.36rem 0 0.5rem 0;
  .office-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.36rem;
    line-height: 0.36rem;
    color: #666666;
    font-size: 0.12rem;
    text-align: center;
    .colse {
      position: absolute;
      right: 0;
      top: 0;
      width: 0.36rem;
      height: 0.36rem;
      background: url(./img/icon-colse.png) no-repeat center center;
      background-size: 0.13rem auto;
      cursor: pointer;
    }
  }
  .content {
    position: relative;
    padding: 0.1rem;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .page-box {
      .prev {
        position: absolute;
        top: 50%;
        left: 0.2rem;
        margin-top: -0.2rem;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 100%;
        background: rgba(0, 0, 0, 0.5) url(./img/icon-left.png) no-repeat center center;
        background-size: 0.2rem auto;
        cursor: pointer;
      }
      .next {
        position: absolute;
        top: 50%;
        right: 0.2rem;
        margin-top: -0.2rem;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 100%;
        background: rgba(0, 0, 0, 0.5) url(./img/icon-right.png) no-repeat center center;
        background-size: 0.2rem auto;
        cursor: pointer;
      }
    }
  }
  .operation {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.1rem;
    display: flex;
    align-items: center;
    height: 0.5rem;
    border-top: 0.01rem solid #f6f6f6;
    .name {
      flex: 1;
      margin-right: 0.1rem;
      max-height: 100%;
      line-height: 0.15rem;
      overflow: hidden;
      font-size: 0.12rem;
      color: #666;
    }
    .download {
      margin-right: 0.1rem;
      flex: 0 0 auto;
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 100%;
      background: #f5f5f5 url(./img/icon-download.png) no-repeat center center;
      background-size: 0.18rem auto;
    }
    .full {
      flex: 0 0 auto;
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 100%;
      background: #f5f5f5 url(./img/icon-full.png) no-repeat center center;
      background-size: 0.15rem auto;
    }
  }
  &.z-full {
    height: 100vh;
    padding: 0 0 0.5rem 0;
    .office-title {
      display: none;
    }
  }
}
</style>
