<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 FileService from '@/services/FileService'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '../../store'
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '../../configs/canvas'
import { ref } from 'vue';
import { ElLoading } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from "@/store";

const router = useRouter()
const param = router.currentRoute.value.params
const slidesStore = useSlidesStore()
const { slides, viewportRatio } = storeToRefs(slidesStore)
const { userInfo } = storeToRefs(useUserStore())

const acquiesceLogo = ref([
  'https://im.oytour.com/pptist/static/logo1.png',
  'https://im.oytour.com/pptist/static/logo2.png',
  'https://im.oytour.com/pptist/static/logo3.png',
  'https://im.oytour.com/pptist/static/logo4.png'
])

const w = ref(0)
const h = ref(0)

const loadSliders = async ()=>{
  const loadingObj = ElLoading.service({text:'正在渲染数据',lock:true})
  let response = await ConfigService.GetTripTemplateSlide({TempId:parseInt(param.tempId.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&&SlidesData.forEach((x:any,i:number)=>{
        newSlides.push(x)
      })
      // 根据集团渲染logo
      if(userInfo.value&&userInfo.value.RB_Group_id<=1){
        return
        for(let i=0;i<newSlides.length;i++){
          let x = newSlides[i]
          let index =null
          x.elements.forEach((y,indexs)=>{
            if(y.layerName && y.layerName.indexOf('logo')!=-1) index =  indexs
          })
          let eles = x.elements.filter(y=>y.layerName && y.layerName.indexOf('logo')!=-1)
          let newElements = await ResolveTripLogoHandler(eles,i)
          x.elements = x.elements.concat(newElements?.elements)
          if(index>=0) x.elements.splice(index,1)
        }
      }
      slidesStore.setSlides(newSlides)
  }
}

const ResolveTripLogoHandler = async (items:any, slideIndex:number) =>{
    let elements = []
    let tempNewSlide:any = null
    let templateObj = JSON.parse(JSON.stringify(items))
    for(let i=0;i<templateObj.length;i++){
      try {
          let y = templateObj[i]
          let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
          let scale = tempSize.width/tempSize.height
          if(scale==1) templateObj[i].src = acquiesceLogo.value[0]
          if(scale>1) templateObj[i].src = acquiesceLogo.value[3]
          if(scale<1) templateObj[i].src = acquiesceLogo.value[1]
          if(tempNewSlide){
            tempNewSlide.elements.push(...templateObj)
          }else{
            elements.push(...templateObj)
            tempNewSlide = copySlidHandlerLogo(slideIndex)
          }
          let newTempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
          let width = 0
          let height =  0
          //按照宽度进行缩放
          let ratio = newTempSize.width / y.width
          width = y.width
          height = newTempSize.height / ratio
          if(height<y.height){
              ratio = height / y.height
              height =  y.height
              width = width / ratio
          }
          y.height = height
          y.width = width
        } catch (error) {

        }
    }
    
    return {
      elements,
      newSlider:tempNewSlide,
    }
}


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