<template>
    <div style="
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow: auto;
    ">
        <div class="export-img-dialog">
            <div class="thumbnails-view" ref="refThumbnails">
                <div class="thumbnails" :style="{width:viewportRatio < 1
                            ? VIEWPORT_SIZE.Value
                            : VIEWPORT_VER_SIZE.Value+'px'}" v-for="slide in slides">
                    <ThumbnailSlide class="thumbnail" :key="slide.id" :slide="slide" :size="viewportRatio < 1
                            ? VIEWPORT_SIZE.Value
                            : VIEWPORT_VER_SIZE.Value
                        " />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import ThumbnailSlide from '../components/ThumbnailSlide/index.vue'
import ConfigService from '@/services/ConfigService'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '../../store'
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '../../configs/canvas'
import { ref } from 'vue';
import { query } from '../../utils/common'
import { ElLoading } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const param = router.currentRoute.value.params
const slidesStore = useSlidesStore()
const { slides, viewportRatio } = storeToRefs(slidesStore)
const w = ref(0)
const h = ref(0)

const loadSliders = async ()=>{
  const loadingObj = ElLoading.service({text:'正在渲染数据',lock:true})
  let response = await ConfigService.sellGetTemplateDetails({Id:parseInt(param.tid.toString())})
  loadingObj.close()
  if (response.data.resultCode == 1) {

      let dataObj = response.data.data
      w.value=dataObj.Width
      h.value=dataObj.Height
      
      if(w.value>0){
        viewportRatio.value = h.value/w.value
        if(viewportRatio.value>=1) VIEWPORT_VER_SIZE.Value=w.value
        if(viewportRatio.value<1) VIEWPORT_SIZE.Value=w.value
      }else{
        viewportRatio.value = dataObj.TempType==1? 0.7069:1.414
      }
      let SlidesData = JSON.parse(dataObj.TempData)
      let newSlides:any[] = []
      SlidesData.forEach((x:any,i:number)=>{
        newSlides.push(x)
      })
      slidesStore.setSlides(newSlides)
  }
}

if(param.tid){
    loadSliders()
}
</script>