<template>
  <div class="ImgDetail-main" ref="ImgDetail-main" @click="closeImgDetail($event)" style="display: none">
    <div class="ImgDetail-container" >
      <div class="ImgDetail-box">
        <div class="close-btn" @click="closeImgDetail($event)">X</div>
        <div class="left-box">
          <img src="/img/leftImgDetailIcon.png" title="图片" alt="暂无图片"
               @click="leftEvent">
        </div>
        <div class="right-box">
          <img src="/img/rightImgDetailIcon.png" title="图片" alt="暂无图片"
               @click="rightEvent">

        </div>
        <div class="img-box">
          <template v-for="(item,idx) in props.imgList">
            <img v-show="idx === imgIdx" :src="item" alt="">

          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>


const props = defineProps({
  imgList:Array,
  imgIdx:Number
})
const emits = defineEmits()

const imgIdx = ref(props.imgIdx)

const closeImgDetail = function (e){
  document.getElementsByClassName('ImgDetail-main')[0].style.display='none'

}
const leftEvent = function (){
  if(!imgIdx.value  <= 0){
    imgIdx.value -=1
    emits('left')
  }
}
const rightEvent = function (){
  if(imgIdx.value < props.imgList.length-1){
    imgIdx.value += 1
    emits('right')
  }
}

watch(props,nv=>{
  imgIdx.value = nv.imgIdx
})
defineExpose({
  showImgDetail(){
    document.getElementsByClassName('ImgDetail-main')[0].style.display='block'
  }
})

</script>

<style scoped src="~/assets/css/ImgDetail/index.scss"></style>
<style scoped src="~/assets/css/ImgDetail/media.scss"></style>