<template>
  <div class="screenshot_preview-wrapper">

    <div class="image-viewer-wrapper">
      <!-- 预览图像 -->
      <ImageViewer
        v-if="previewVisible"
        :on-switch="
          (index) => {
            selected(index)
          }
        "
        :initial-index="currentIndex"
        :url-list="previewImages"
      />
    </div>
    <div class="thumbnail-wrapper" style="z-index:999;background-color:#000;">
      <div class="">
        <div class="img-wrapper">
          <el-button
            icon="el-icon-d-arrow-left"
            plain
            class="left to"
            :disabled="disabledPrev"
            @click="toRight"
          />
          <div ref="imagesWrapper" class="images">
            <div v-if="noData" class="empty-text">
              <slot name="empty">{{ $t('trials:lugano:message:nodata') }}</slot>
            </div>
            <div v-show="!noData" class="items" :style="itemsStyle">
              <div
                v-for="(item, index) in previewImages"
                :key="index"
                class="item-img"
                :style="imgSize"
                :class="{
                  'is-active': index === currentIndex
                }"
                @click="selected(index)"
              >
                <img crossorigin="anonymous" :src="`${OSSclientConfig.basePath}${item.PicturePath}`">
                <p class="item-date">
                  {{ `${item.TaskBlindName}` }}
                </p>
              </div>
            </div>
          </div>
          <el-button
            icon="el-icon-d-arrow-right"
            :disabled="disabledNext"
            plain
            class="right to"
            @click="Left"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getPreviousOtherPicturePath } from '@/api/trials'
import { changeURLStatic } from '@/utils/history.js'
import store from '@/store'
import ImageViewer from './ImageViewer'
export default {
  name: 'Preview',
  components: {
    ImageViewer
  },
  data() {
    return {
      currentIndex: 0,
      previewVisible: true,
      translateX: 0,
      pageSize: 0, // 一页展示的图片数
      previewImages: [],
      imgSize: { width: '120px', height: '120px' },
      lesionId: '',
      visitTaskId: '',
      questionType: null
    }
  },
  computed: {
    // 偏移度数
    itemsStyle() {
      return {
        transform: `translateX(${-this.translateX}px)`
      }
    },
    // 每一项宽度
    itemWidth() {
      return parseInt(this.imgSize.width.replace('px', '')) + 8
    },
    disabledPrev() {
      // 禁用前一页按钮
      return this.translateX <= 0
    },
    disabledNext() {
      // 禁用后一页按钮
      return (
        this.translateX >= (this.previewImages.length - this.pageSize) * this.itemWidth
      )
    },
    noData() {
      return this.previewImages.length === 0
    },
    dataLength() {
      return this.previewImages.length
    }

  },
  mounted() {
    if (this.$router.currentRoute.query.TokenKey) {
      store.dispatch('user/setToken', this.$route.query.TokenKey)
      changeURLStatic('TokenKey', '')
    }
    this.lesionId = this.$route.query.rowId ? this.$route.query.rowId : ''
    this.visitTaskId = this.$route.query.visitTaskId ? this.$route.query.visitTaskId : ''
    var questionType = this.$route.query.questionType
    this.questionType = questionType ? Number(questionType) : null
    this.initPage()
  },
  methods: {
    async initPage() {
      await this.getScreenshot()
      this.pageSize = this.wrapperWidth() / this.itemWidth
      const scope = this
      window.onresize = function() {
        scope.pageSize = scope.wrapperWidth() / scope.itemWidth
        scope.selected(scope.currentIndex)
      }
    },
    getScreenshot() {
      return new Promise(resolve => {
        const loading = this.$loading({ fullscreen: true })
        getPreviousOtherPicturePath({ rowId: this.lesionId, visitTaskId: this.visitTaskId, questionType: this.questionType }).then(res => {
          this.previewImages = res.Result
          if (this.previewImages.length === 0) {
            this.$alert(this.$t('trials:lugano:message:noScreenshot'), this.$t('trials:lugano:message:warnTip'), {
              callback: action => {
                window.close()
              }
            })
          }
          loading.close()
          resolve()
        }).catch(() => {
          loading.close()
          resolve()
        })
      })
    },
    receiveMsg(event) {
      if (event.data.type === 'setReadingState' || event.data.type === 'closeHistoryScreenshot') {
        window.close()
      }
    },
    toRight() {
      if (this.translateX < this.pageSize * this.itemWidth) {
        this.translateX = 0
      } else {
        this.translateX = this.translateX - this.pageSize * this.itemWidth
      }
    },
    Left() {
      this.translateX = this.translateX + this.pageSize * this.itemWidth
      const maxTrans = this.itemWidth * (this.dataLength - this.pageSize)
      if (this.translateX > maxTrans) {
        this.translateX = maxTrans
      }
    },
    selected(index) {
      const center = this.pageSize >> 1
      // 最后一页的中间位置
      const lastCenter = this.dataLength - center

      if (index > center && index < lastCenter) {
        // 与相册中间相差的图片数量
        const step = index - center
        // 将点击图片移动到中间
        this.translateX = this.itemWidth * step
      } else {
        const maxTrans = this.itemWidth * (this.dataLength - this.pageSize)
        this.translateX = index <= center ? 0 : maxTrans
      }
      if (this.currentIndex !== index) {
        this.currentIndex = index
      }
    },
    wrapperWidth() {
      if (this.$refs.imagesWrapper) {
        return this.$refs.imagesWrapper.offsetWidth
      }
      return 0
    }

  }
}
</script>

<style lang="scss" >
.screenshot_preview-wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #000;
.image-viewer-wrapper{
  flex: 1;
}
.thumbnail-wrapper{
  height: 130px;
}
.img-content{
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
}
.img-wrapper {
  display: flex;
  position: relative;
  margin: 0 20px;
  height: 120px;
  .to {
    width: 32px;
    height: 100%;
    padding: 0;
  }
  .images::before {
    position: absolute;
    z-index: 5;
    top: 0;
    height: 100%;
    width: 84px;
    content: '';
    pointer-events: none;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#fff),
      color-stop(50%, rgba(0, 0, 0, 0))
    );
    background: -o-linear-gradient(left, #fff, rgba(0, 0, 0, 0) 50%);
    background: linear-gradient(90deg, #fff, rgba(0, 0, 0, 0) 50%);
  }
  .images::after {
    position: absolute;
    z-index: 5;
    top: 0;
    height: 100%;
    right: 0;
    width: 84px;
    content: '';
    pointer-events: none;
    background: -webkit-gradient(
      linear,
      right top,
      left top,
      from(#fff),
      color-stop(50%, rgba(0, 0, 0, 0))
    );
    background: -o-linear-gradient(right, #fff, rgba(0, 0, 0, 0) 50%);
    background: linear-gradient(270deg, #fff, rgba(0, 0, 0, 0) 50%);
  }
  .images {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0 2px;
    .empty-text {
      color: rgb(158, 158, 158);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .items {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      // width: 6000px;
      height: 100%;
      align-items: center;
      transition: transform 0.25s ease;
      .item-img {
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        margin-right: 8px;
        border: 2px solid rgba(0, 0, 0, 0);
        cursor: pointer;
        .item-date {
          bottom: 0px;
          position: absolute;
          width: 100%;
          height: 24px;
          background: rgba(0, 0, 0, 0.2);
          text-align: center;
          line-height: 24px;
          color: white;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-img:hover::after {
        // border-color: #409EFF;
        opacity: 0;
      }
      .item-img::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: '';
        opacity: 0.2;
        pointer-events: none;
        -webkit-transition: opacity 0.3s ease;
        -o-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
        background-color: #fff;
      }
      .is-active {
        border-color: #409eff;
      }
      .is-active:after {
        opacity: 0;
      }
    }
  }
}
}
</style>
