<template>
   
    <div class="element-data-mapping" v-if="handleElement && handleElement.dataMapping">
        <divider />
        <div class="q-mb-md row items-center">
            <div class="text-small col">数据绑定</div>
            <el-checkbox v-model="updateUnionElement" label="更新关联数据" size="small"/>
        </div>
        <Select v-if="model==0"
            class="col"
            :value="currentId" 
            @update:value="value => changeDataSourceHandler(value)"
            :options="selectDataSource"
        />
        <el-select v-else v-model="currentId" filterable remote
            reserve-keyword placeholder="输入关键词查询" remote-show-suffix
            :remote-method="remoteMethod" :loading="loading"
            @change="value => changeDataSourceHandler(value)"
            style="width: 100%;">
            <el-option
            v-for="item in selectDataSource"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id"
            />
        </el-select>
        <div class="row items-center wrap" v-if="handleElement && handleElement.type=='image' && currentImages && currentImages.length>0">
            <div class="item-image-box" v-for="(x,i) in currentImages" :key="i" @click="setImageHandler(x,handleElement,handleElement.dataMapping)">
                <img :src="x" />
                <div class="opera-box" v-if="x == handleElement.src">
                    <el-icon color="#67C23A" size="32"><SuccessFilled /></el-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import Divider from '@/components/Divider.vue'
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas';
import useHistorySnapshot from '@/hooks/useHistorySnapshot';
import FileService from '@/services/FileService';
import { useMainStore, useSlidesStore, useScreenStore } from '@/store';
import { SlideDataSource, TravelDetail, injectKeyDataSource } from '@/types/injectKey';
import { PPTImageElement } from '@/types/slides';
import { getHtmlPlainText } from '@/utils/common';
import { storeToRefs } from 'pinia';
import { inject, onMounted, ref } from 'vue';
import ConfigService from '@/services/ConfigService'
const trip = ref<SlideDataSource>()
const { addHistorySnapshot } = useHistorySnapshot()
trip.value = inject(injectKeyDataSource)
const mainStore = useMainStore()
const slidesStore = useSlidesStore()
const { hotelInfo, scenicInfo, dinnerInfo } = trip.value?.TravelAatas??{}
const resources:Array<TravelDetail[]> = [[],hotelInfo??[],scenicInfo??[],dinnerInfo??[]]
const { handleElement }  = storeToRefs(mainStore)
const { model } = storeToRefs(useScreenStore())
const slide = slidesStore.currentSlide
const selectDataSource = ref<{label:string,value:string|number}[]>([])
const currentId = model.value==0?ref<number>(0):ref<number>(null)
const currentImages = ref<string[]>()
const updateUnionElement = ref<boolean>(true)
const loading = ref<boolean>(false)
const loadingObj = ref<any>('')
const query = ref<string>('')
let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE.Value, viewportRatio = slidesStore.viewportRatio
if(viewportRatio<1){
    maxWidth = VIEWPORT_VER_SIZE.Value
    maxHeight = VIEWPORT_SIZE.Value
}

if(handleElement.value?.dataMapping){
    currentId.value = handleElement.value.dataMapping.id
    currentId.value = currentId.value == 0? null:currentId.value
    resources[slide.pageType-1].forEach(x=>{
        selectDataSource.value.push({
            label:x.Name,
            value:x.Id
        })
    })
}

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
        getDatasTrip(query)
    }, 200)
  } else {
    // selectDataSource.value = []
  }
}

const getDatasTrip = async (query:string) => {
    // loadingObj.value = ElLoading.service({
    //     text:'正在查询数据',
    //     lock:true
    // })
    
    try {
        let Type = 0
        if(slide.pageType==2) Type = 1
        if(slide.pageType==3) Type = 3
        if(slide.pageType==4) Type = 2
        let queryMsg = {
            Name: query,
            Type: Type // 1酒店 2景点 3餐食
        }
        let dataRes = await ConfigService.getSourceDatas(queryMsg);
        if (dataRes.data.resultCode == 1) {
            loading.value = false
            selectDataSource.value = dataRes.data.data
        }else{
            loading.value = false
        }
        
    } catch (error) { }
    
    // loadingObj.value.close()
}

const changeDataSourceHandler = (value:number) => {
    currentId.value = value
    const data = model.value==0?resources[slide.pageType-1].find(x=>x.Id==value):selectDataSource.value.find(x=>x.Id==value)
    if(data && handleElement.value && handleElement.value.dataMapping){
        updateUnionElementsHanlder(value)
    }
    loadCurrentImages()
    addHistorySnapshot()
}

const updateUnionElementsHanlder = (newValue:number) => {
    let elements = slide.elements.filter(x=>x.dataMapping && x.below == handleElement.value?.below)
    if(!updateUnionElement.value) elements = elements.filter(x=>x.id==handleElement.value?.id)
    if(elements) {
        const data = model.value==0?resources[slide.pageType-1].find(x=>x.Id==newValue):selectDataSource.value.find(x=>x.Id==newValue)
        elements.forEach(x => {
            if(x.dataMapping){
                const newDataMapping = {id:newValue, filed:x.dataMapping.filed, name: data.Name}
                if(x.type == 'text'){
                    const content = x.content.replace(getHtmlPlainText(x.content),data[x.dataMapping.filed])
                    const props = {content,dataMapping:newDataMapping}
                    slidesStore.updateElement({ id: x.id, props})
                }else if(x.type == 'image'){
                    const urls = data[x.dataMapping.filed] as Array<string> ?? ['']
                    if(urls.length>0) setImageHandler(urls[0],x as PPTImageElement,newDataMapping)
                }
            }
        })
    }
}

const setImageHandler = async (url:string, element:PPTImageElement, mapping:any) => {
    let props = {
        src: url,
        width: element.width,
        height: element.height,
        left: element.left,
        top: element.top,
        dataMapping:mapping
    }
    if(url!='' && url!=handleElement.value?.src){
        try {
            let width = element.width
            let height = element.height
            let tempSize = await FileService.getImageSizeWithoutDownloading(url)
            if(tempSize.width>maxWidth){
                let ratio = maxWidth/tempSize.width
                tempSize.width = maxWidth
                tempSize.height = tempSize.height*ratio
            }
            if(tempSize.height>maxHeight){
                let ratio = maxHeight/tempSize.height
                tempSize.height = maxHeight
                tempSize.width = tempSize.width*ratio
            }
            if(tempSize.width!=width){
                let ratio = width/tempSize.width
                tempSize.width = Math.ceil(tempSize.width*ratio)
                tempSize.height = Math.ceil(tempSize.height*ratio)
            }
            if(tempSize.height<height){
                let ratio = height / tempSize.height
                tempSize.width = Math.ceil(tempSize.width*ratio)
                tempSize.height = Math.ceil(tempSize.height*ratio)
            }

            props = {
                src: url,
                width: tempSize.width,
                height: tempSize.height,
                // left: element.left,
                // top: element.top,
                left: element.left -= (tempSize.width - width) / 2,
                top: element.top -= (tempSize.height - height) / 2,
                dataMapping:mapping,
                fixedRatio: true
            }
            
            // if(props.left<0)props.left=0
            // if(props.top<0)props.top=0
        } catch (error) {
            element.fixedRatio = false
        }
    }
    
    slidesStore.updateElement({ id: element.id, props})
}

const loadCurrentImages = () => {
    if(handleElement.value && handleElement.value.dataMapping){
        currentImages.value = []
        const data = model.value==0?resources[slide.pageType-1].find(x=>x.Id==currentId.value):selectDataSource.value.find(x=>x.Id==currentId.value)
        if(data){
            currentImages.value = data[handleElement.value.dataMapping.filed] as Array<string> ?? []
        }
    }
}
if(model.value==2&&handleElement.value 
&& handleElement.value.dataMapping 
&& handleElement.value.dataMapping.name) {
    getDatasTrip(handleElement.value.dataMapping.name)
}
loadCurrentImages()
</script>
<style scoped>
.item-image-box{
    width:calc(33% - 5px);
    height:50px; 
    position:relative;
    border-radius: 5px;
    background-color: #333;
    margin-right: 5px;
    margin-top: 5px;
    overflow: hidden;
    cursor: pointer;
}
.item-image-box img{
    object-fit: cover;
    width: 100%;
    height: auto;
}
.item-image-box .opera-box{
    background-color: rgba(0,0,0,.3);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>