<template>
  <div id="pic-viewer">
    <div class="pic-carousel-wrapper">
      <i class="pc-switch-left" @click="pcSwitch('left')"></i>
      <i class="pc-switch-right" @click="pcSwitch('right')"></i>
      <i class="pc-close" @click="emits('closePicViewerOne')"></i>
      <el-carousel
              style="height:500px; width:80%;"
              class="pic-carousel"
              type="card"
              arrow="never"
              :autoplay="false"
              ref="pic_carousel"
              @change="changeIndex"
      >
        <div  style="position: relative; height: 100%; width:100%;">
             <div style="position: absolute; top: 0; height: 20%; width:100%;color: #FFFFFF; ">
               {{title}}</div>
            <el-carousel-item style="   position: absolute; top:60px; height: 80%" v-for="pic, index in props.picImg"   :key="pic" >
               <img :src="pic.imgurl" :alt="props.picImg[index].boatstatus" class="pics">
            </el-carousel-item>
         </div>
      </el-carousel>
    </div>
  </div>
</template>

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

<script setup>
import { ref,computed,onBeforeMount} from 'vue'
import { ElCarousel, ElCarouselItem,ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/carousel/style/css'
import 'element-plus/es/components/carousel-item/style/css'
const props = defineProps(['picImg'])

const emits = defineEmits(['closePicViewerOne'])

let indexs=0
//
// let title = computed(()=>{
//   return  props.picImg.type[1]
// })

const title = ref('')
onBeforeMount(()=>{
    if (props.picImg.length>0)
{
    title.value = props.picImg[indexs].boatstatus
    indexs=1
}else {
        ElMessage.warning('所选未查到图片')
        emits('closePicViewerOne')
    }
})
const pic_carousel = ref(null)


function pcSwitch(type) {

  if(type==='left') {
    if (indexs==0)
  {
    indexs=2
  }else {
      indexs--
    }
    pic_carousel.value.prev()
    title.value=props.picImg[indexs].boatstatus

  } else if(type==='right') {
    if (indexs==2)
    {
      indexs=0
    }else {
      indexs++
    }
    pic_carousel.value.next()
    title.value=props.picImg[indexs].boatstatus

  }
}

function changeIndex(index) {
  title.value=props.picImg[index].boatstatus
}

</script>

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

  .pic-carousel-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.7);
    z-index: 999;

    :deep(.pic-carousel) {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      width: 85%;
      height: 55vh;

      .el-carousel__indicators {
        display: none;
      }
      .el-carousel__container {
        height: 100%;
      }
      .el-carousel__item {
        box-sizing: border-box;
        border: 1px solid #4DA6FF;

        &:not(.is-active) {
          filter: brightness(60%);
        }
        &>img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .pc-switch-right,.pc-switch-left {
      display: block;
      position: absolute;
      top: 46%;
      width: 35px;
      height: 59px;
      cursor: pointer;
    }
    .pc-switch-left {
      left: 4%;
      background: url('@/assets/imgs/navi/sxdx-arrow-left.png');
      background-size: contain;
    }
    .pc-switch-right {
      right: 4%;
      background: url('@/assets/imgs/navi/sxdx-arrow-right.png');
      background-size: contain;
    }
    .pc-close {
      display: block;
      position: absolute;
      bottom: 17%;
      left: calc(50% - 12px);
      width: 24px;
      height: 24px;
      cursor: pointer;
      background: url('@/assets/imgs/page_kkjk/bi-pics-close.png');
      background-size: contain;
      &:hover {
        transform: scale(1.1);
      }
    }
  }

}
</style>