<template>
  <div class="box-border h-[631px] w-[1019px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[30px]">
    <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in props.data" :key="index">
          <img :src="item.url" />
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>
  <div class="mb-[20px] mt-[34px] flex items-center text-[16px] text-[#333333] font-normal">
    <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
    <span class="ml-[10px]">{{ props.type === 1 ? '图纸' : props.type === 2 ? '文本' : '模型' }}</span>
  </div>
  <div class="box-border h-[126px] w-[1019px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] pa-[23px]">
    <div thumbsSlider="" class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in props.data" :key="index">
          <img :src="item.url" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import type { PropType } from 'vue'
  import { ref, watch, nextTick, onMounted } from 'vue'

  const props = defineProps({
    data: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    type: {
      type: Number as PropType<number>,
      default: 1,
    },
  })

  onMounted(() => {
    // Initialize Swiper
    var swiper = new Swiper('.mySwiper', {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    })
    var swiper2 = new Swiper('.mySwiper2', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: swiper,
      },
    })
  })
</script>

<style scoped>
  .swiper-button-disabled {
    cursor: pointer !important;
  }
  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }

  .swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-slide {
    background-size: cover;
    background-position: center;
  }

  .mySwiper2 {
    height: 100%;
    /* height: calc(100vh - 207px); */
    /* width: 100%; */
  }

  .mySwiper {
    height: 90px;
    box-sizing: border-box;
    padding: 6px 6px;

    /* position: absolute;
    bottom: 0;
    left: 0px;
    right: 0px !important; */
    background: rgba(0, 0, 0, 0.65);

    /* z-index: 1000; */

    /* width: 100%; */
  }

  .mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    background: rgba(0, 0, 0, 0.65);
    cursor: pointer;
  }

  .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
  }

  .swiper-slide img {
    display: block;
    /* width: 100%; */
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }

  .Thumbs {
    position: relative;
    height: 100%;
    width: auto;
    background: rgba(0, 0, 0, 0.65);
  }

  .Thumbs img {
    height: 100%;
    pointer-events: none;
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: #666 !important;
  }
</style>
