<template>
  <div class="imagecon">
    <div class="title">
      <i class="iconfont icon-material_image title-icon" />
      {{ currentTag.hotspotTitle }}
    </div>

    <div class="realimgcon" :class="{ fullimgcon: objectFit === 'contain' }">
      <img class="image" :src="currentTag.image[currentIndex].ossPath" :style="imageStyle"
        @wheel.prevent="onImageWheel" />
    </div>

    <div class="toolbar">
      <i v-if="currentTag.image.length > 1" class="iconfont icon-material_preview_previous hover-tips"
        :class="{ disabled: currentIndex === 0 }" @click="onClickPrevious()">
        <div>
          <div class="remark">{{$t('common.prev')}}</div>
        </div>
      </i>
      <i v-if="currentTag.image.length > 1" class="iconfont icon-material_preview_next1 hover-tips append-splitter"
        :class="{ disabled: currentIndex === currentTag.image.length - 1 }" @click="onClickNext()">
        <div>
          <div class="remark">{{$t('common.next')}}</div>
        </div>
      </i>
      <i :class="{ disabled: scaleRate >= 2 }" class="iconfont icon-material_preview_enlarge hover-tips"
        @click="onClickZoomIn()">
        <div>
          <div class="remark">{{$t('common.zoomIn')}}</div>
        </div>
      </i>
      <span>{{ Math.floor(scaleRate.toFixed(2) * 100) }}%</span>
      <i :class="{ disabled: scaleRate <= 0.5 }" class="iconfont icon-material_preview_narrow hover-tips"
        @click="onClickZoomOut()">
        <div>
          <div class="remark">{{$t('common.zoomOut')}}</div>
        </div>
      </i>

      <i v-if="canFullScreen && objectFit === 'scale-down'"
        class="iconfont icon-material_preview_full_screen hover-tips" @click="onClickFullScreen()">
        <div>
          <div class="remark">{{$t('common.fullScene')}}</div>
        </div>
      </i>
      <i v-if="canFullScreen && objectFit === 'contain'" class="iconfont icon-material_preview_drop_out hover-tips"
        @click="onClickCancelFullScreen()">
        <div>
          <div class="remark">{{$t('common.exitFullScene')}}</div>
        </div>
      </i>
    </div>

    <div class="btnmask"></div>
  </div>
</template>


<script setup>
import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
import { useStore } from "vuex";
const store = useStore();


const scaleRate = ref(1)

const objectFit = ref('scale-down')

const canFullScreen = ref(true)

const imageStyle = computed(() => {
  return {
    transform: `scale(${scaleRate.value})`,
    objectFit: objectFit.value,
  }
})

const currentTag = computed(() => store.getters['tags/currentTag'])

const currentIndex = ref(0)

const onImageWheel = (e) => {

  if (e.deltaY < 0) {
    let scle = scaleRate.value * 1.1
    if (scle > 2) {
      scaleRate.value = 2
    } else {
      scaleRate.value = scle
    }
  } else {
    let scle = scaleRate.value * 0.9
    if (scle < 0.5) {
      scaleRate.value = 0.5
    } else {
      scaleRate.value = scle
    }
  }


}

const onClickZoomIn = () => {
  scaleRate.value = Math.min(scaleRate.value * 1.1, 2)
}
const onClickZoomOut = () => {
  scaleRate.value = Math.max(scaleRate.value * 0.9, 0.5)
}

const onClickPrevious = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
  }
}
const onClickNext = () => {
  if (currentIndex.value < currentTag.value.image.length - 1) {
    currentIndex.value++
  }
}

const onClickFullScreen = () => {
  scaleRate.value = 1
  objectFit.value = 'contain'
}
const onClickCancelFullScreen = () => {
  scaleRate.value = 1
  objectFit.value = 'scale-down'
}

</script>

<style lang="scss" scoped>
.imagecon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;

  >video {
    max-width: 960px;
    height: 540px;
  }

  .title {
    position: absolute;
    left: 20px;
    top: 20px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    z-index: 999;

    >i {
      margin-right: 4px;
    }
  }

  .toolbar {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 43px;
    // background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    z-index: 2;

    .iconfont {
      cursor: pointer;
      color: white;
      margin: 0 18px;
      font-size: 22px;

      &.disabled {
        opacity: 0.5;
        pointer-events: none;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    >span {
      color: #fff;
      text-align: center;
      display: inline-block;
      min-width: 50px;
    }

    .append-splitter {
      &::after {
        pointer-events: none;
        content: "|";
        position: absolute;
        right: -18px;
        top: -4px;
        font-size: 20px;
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }

  .realimgcon {
    top: 8%;
    left: 0;
    width: 100%;
    height: 84%;
    position: absolute;
    z-index: 1;

    .image {
      width: 100%;
      height: 100%;
      // top: 0;
      // left: 0;
      // width: 100%;
      // height: 100%;
      // position: absolute;
      // z-index: 1;
    }
  }

  .fullimgcon {
    top: 0;
    height: 100%;

  }


}


.hover-tips,
.hover-tips-warn {
  position: relative;
  font-size: 18px;

  &:hover {
    >div {
      display: block;
    }
  }

  // tip的方框
  >div {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: default;
    display: none;
    z-index: 10000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
    color: #fff;
    pointer-events: none;
    text-align: center;
    word-break: keep-all;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 3px;

    // tip的箭头
    &::before {
      border: 7px solid transparent;
      border-top: 7px solid rgba(0, 0, 0, 0.6);
      width: 0;
      height: 0px;
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -14px;
      left: 50%;
      transform: translateX(-50%);
    }

    // tip的文字
    .remark {
      line-height: 2.5;
      color: #fff;
    }
  }


}
.btnmask {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
    height: 60px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 52%, #000000 100%);
  }
</style>