<template>
  <div id="pic-viewer">
    <div class="pic" >
      <span class="pic-close" @click="emits('close-pic-viewer')"></span>
      <i class="pic-switch-left" @click="handleSwitch('left')" v-if="props.picList.length>1"></i>
      <i class="pic-switch-right" @click="handleSwitch('right')" v-if="props.picList.length>1"></i>
      <img :src="props.picList[currentPicIndex]" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'PicViewer'
}
</script>

<script setup>
import { ref } from 'vue'
const props = defineProps(['pic-list'])

const currentPicIndex = ref(0)

function handleSwitch(type) {
  if(type==='left'&&currentPicIndex.value>0) {
    currentPicIndex.value--
  } else if(type==='right'&&currentPicIndex.value<props.picList.length-1) {
    currentPicIndex.value++
  }
}

const emits = defineEmits(['close-pic-viewer'])


</script>

<style lang="scss" scoped>
#pic-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba($color: #000000, $alpha: 0.7);

  .pic {
    position: absolute;
    top: 22vh;
    left: 25vw;
    width: 48vw;
    height: 55vh;
    border: 1px solid #4DA6FF;
    &>img {
      width: 100%;
      height: 100%;
    }
    &>.pic-close {
      display: block;
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      background: url('@/assets/imgs/page_kkjk/bi-pics-close.png');
      background-size: contain;
      &:hover {
        transform: scale(1.1);
      }
    }
    .pic-switch-right,.pic-switch-left {
      display: block;
      position: absolute;
      top: 45%;
      width: 35px;
      height: 59px;
      cursor: pointer;
    }
    .pic-switch-left {
      left: 2%;
      background: url('@/assets/imgs/navi/sxdx-arrow-left.png');
      background-size: contain;
    }
    .pic-switch-right {
      right: 2%;
      background: url('@/assets/imgs/navi/sxdx-arrow-right.png');
      background-size: contain;
    }
  }
}
</style>