<template>

    <div class="search-card-detail">
        <div class="row items-center">
            <el-button link round size="small" @click="handleBack">
                <IconLeft :size="18"></IconLeft>
            </el-button>
            <div class="sub-title1 col q-mx-md">POI详情</div>
            <el-button link round size="small" @click="handleClose">
                <IconClose size="14px"></IconClose>
            </el-button>
        </div>
        <el-scrollbar  max-height="50vh">
            <div class="item-poi-img q-mt-md" v-if="data.ImgArray && data.ImgArray.length > 0">
                <div class="container row">
                    <div class="col full-height">
                        <image-opera-hover
                            @handleInsert="currentImg=0,handleInsert()"
                            @handleReplace="currentImg=0,handleReplace()">
                            <el-image class="full-height" :preview-teleported="true" :src="data.ImgArray[0]" fit="cover" @click="setImages(0)" />
                        </image-opera-hover>
                    </div>
                    <div style="width: 60%;" class="q-ml-sm row" v-if="data.ImgArray.length > 1">
                        <div class="col column">
                            <div class="col full-height">
                                <image-opera-hover
                                    @handleInsert="currentImg=1,handleInsert()"
                                    @handleReplace="currentImg=1,handleReplace()">
                                    <el-image class="full-height" :preview-teleported="true" :src="data.ImgArray[1]" fit="cover" @click="setImages(1)" />
                                </image-opera-hover>
                            </div>
                            <div v-if="data.ImgArray.length > 2" class="col full-height q-mt-sm">
                                <image-opera-hover
                                    @handleInsert="currentImg=2,handleInsert()"
                                    @handleReplace="currentImg=2,handleReplace()">
                                    <el-image :preview-teleported="true"
                                        class="full-height" :src="data.ImgArray[2]" fit="cover" @click="setImages(2)" /> 
                                </image-opera-hover>
                            </div>
                                

                        </div>
                        <div class="col column q-ml-sm" v-if="data.ImgArray.length > 3">
                            <div class="col full-width">
                                <image-opera-hover
                                @handleInsert="currentImg=3,handleInsert()"
                                @handleReplace="currentImg=3,handleReplace()">
                                    <el-image class="full-width full-height" :preview-teleported="true" :src="data.ImgArray[3]" fit="cover" @click="setImages(3)" />
                                </image-opera-hover>
                            </div>
                            

                            <div class="col full-width q-mt-sm last-img" v-if="data.ImgArray.length > 4">
                                <div class="col full-height">
                                    <image-opera-hover
                                    @handleInsert="currentImg=4,handleInsert()"
                                    @handleReplace="currentImg=4,handleReplace()">
                                        <el-image class="full-height"
                                            :preview-teleported="true" :src="data.ImgArray[4]" fit="cover" @click="setImages(4)" />
                                    </image-opera-hover>
                                </div>
                                
                                <div class="content column items-center flex-center text-white"
                                    style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);"
                                    v-if="data.ImgArray.length > 5">
                                    <div>+ {{ data.ImgArray.length - 5 }}</div>
                                    <div class="q-mt-sm text-small">点击查看</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="q-mt-md">
                <text-opera>{{ data.Name }}</text-opera>
                <div class="q-mt-md row items-center">
                    <div class="text-small text-info col">地址</div>
                    <el-tag type="success" size="small" class="text-bold">{{ getTypeName(data.Platform, 0)
                        }}</el-tag>
                    <el-tag type="info" size="small" class="text-bold q-ml-md">{{ getTypeName(data.Type, 1)
                        }}</el-tag>
                </div>
                <text-opera><span class="text-small">{{ data.CountryName }}·{{ data.CityName }} {{ data.Address
                        }}</span></text-opera>
                <template v-if="data.Tel && data.Tel != ''">
                    <div class="text-small text-info col q-mt-md">联系电话</div>
                    <text-opera><span class="text-small q-mt-sm">{{ data.Tel }}</span></text-opera>
                </template>
                <template v-if="data.Url && data.Url != ''">
                    <div class="text-small text-info col q-mt-md">网址</div>
                    <text-opera><a :href="data.Url" target="_blank" class="text-small q-mt-sm">{{ data.Url }}</a></text-opera>
                </template>
                <template v-if="data.PlayTimeHour && data.PlayTimeHour != ''">
                    <div class="text-small text-info col q-mt-md">推荐时长</div>
                    <text-opera><span class="text-small q-mt-sm">{{ data.PlayTimeHour }}</span></text-opera>
                </template>
                <template v-if="data.UseTypeList&&data.UseTypeList.length>0">
                    <div class="text-small text-info col q-mt-md">适用类型</div>
                    <text-opera><el-tag class="q-mt-sm" :type="index==0?'danger':index==1?'warning':index==2?'':'info'" :class="[!index?'':'q-ml-md']" size="small" v-for="(item,index) in data.UseTypeList">{{item}}</el-tag> </text-opera>
                </template>
                <template v-if="data.PriceList&&data.PriceList.length>0">
                    <div class="text-small text-info col q-mt-md">套餐价格</div>
                    <!-- <text-opera>
                        <el-tag class="q-mt-sm q-mr-md" size="small" v-for="(item,index) in data.PriceList">
                        {{item.MealName}}
                        <text>/ {{item.MealPrice}}</text>
                    </el-tag> 
                    </text-opera> -->
                    <template v-for="(item,index) in data.PriceList">
                        <text-opera>
                            <div class="q-mt-sm q-mr-md text-small">
                                <span style="color: #564bec;font-weight: bold;">
                                    {{item.MealName}}<text>/{{item.MealPrice}}</text></span>
                                <p v-if="item.MealRemarks">{{item.MealRemarks}}</p>
                            </div>
                        </text-opera>
                    </template>
                </template>
                <div class="text-small text-info col q-mt-md">详细介绍</div>
                <text-opera><span class="text-small q-mt-sm">{{ data.Feature }}</span></text-opera>
                <template v-if="data.About && data.About != ''">
                    <div class="text-small text-info col q-mt-md">温馨提示</div>
                    <text-opera><span class="text-small q-mt-sm">{{ data.About }}</span></text-opera>
                </template>
                <template v-if="data.BookingInfo && data.BookingInfo != ''">
                    <div class="text-small text-info col q-mt-md">预定须知</div>
                    <text-opera><span class="text-small q-mt-sm">{{ data.BookingInfo }}</span></text-opera>
                </template>
            </div>
        </el-scrollbar>

    </div>
    <template v-if="isViewerShow">
        <image-opera
        @handleInsert="handleInsert"
        @handleReplace="handleReplace"/>
        <el-image-viewer
        @close="() => { isViewerShow = false }" 
        :initial-index="currentImg"
        :url-list="data.ImgArray" 
        :onSwitch="switchImage"/>
    </template>
    
</template>

<script lang="ts" setup>
import { ref, watch, inject } from "vue"
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import useCreateElement from '@/hooks/useCreateElement'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import { injectKeyDataSource } from '@/types/injectKey'
import FileService from '@/services/FileService'
import type { PPTImageElement } from '@/types/slides'
import { copyImage, replaceText } from "@/utils/clipboard";
import TextOpera from './TextOpera.vue'
import ImageOpera from './ImageOpera.vue'
import ImageOperaHover from './ImageOperaHover.vue'


const { createImageElement } = useCreateElement()
const mainStore = useMainStore()
const { handleElement, handleElementId } = storeToRefs(mainStore)
const slidesStore = useSlidesStore()
const { addHistorySnapshot } = useHistorySnapshot()
const handleImageElement = handleElement as Ref<PPTImageElement>

const emit = defineEmits<{
    (event: 'close'): void
    (event: 'refound'): void
}>()
const props = defineProps({
    itemInfo: {
        type: Object,
        required: true,
    },
})

const data = ref<any>(props.itemInfo)
const isViewerShow = ref(false)
const currentImg = ref(0)
const queryObj = ref({} as any)
queryObj.value = inject(injectKeyDataSource).queryObj
const propsDatas = ref<any>({})

if(data.value.ImgArray){
    for (let i = 0; i < data.value.ImgArray.length; i++) {
        const x = data.value.ImgArray[i];
        if(x.includes('?')) {
            data.value.ImgArray[i]= x.split('?')[0]
        }
    }
}
const platforms = ref<{ id: number, name: string }[]>([
    { id: 2, name: "ERP" },
    { id: 1, name: "第三方" }
])
const allTypes = ref<{ id: number, name: string }[]>([
    { id: 0, name: "不限类型" },
    { id: 1, name: "酒店" },
    { id: 2, name: "餐厅" },
    { id: 3, name: "景点" }
])

const switchImage = (index:number) => {
    currentImg.value = index
}
const handleCopyImage = async () =>{
    const image = data.value.ImgArray[currentImg.value]; // 替换为您要复制的图片的URL
    const response = await copyImage(image);
    if(response=='success')ElMessage({ message: '操作成功', type: 'success' })
    else ElMessage({ message: '操作失败', type: 'info' })
}

const handleInsert = () =>{
    const url = data.value.ImgArray[currentImg.value]
    createImageElement(url,queryObj.value.TemplateType)
    ElMessage({ message: '操作成功', type: 'success' })
}

const handleReplace = async () =>{
    const url = data.value.ImgArray[currentImg.value]
    let downloadInfo:any = {}
    downloadInfo = await FileService.convertNetworkToBase64Async(url)
    propsDatas.value.src = url
    let tempSize = downloadInfo
    setPropsDatas(tempSize)
}

const setPropsDatas = (image:any) => {
    let width = 0
    let height =  0
    //按照宽度进行缩放
    let ratio = image.width / handleImageElement.value.width
    width = handleImageElement.value.width
    height = image.height / ratio

    if(height<handleImageElement.value.height){
        ratio = height /  handleImageElement.value.height
        height =  handleImageElement.value.height
        width = width / ratio
        propsDatas.value.left = handleImageElement.value.left - (Math.ceil((width - handleImageElement.value.width)/2))
    }else{
        propsDatas.value.top = handleImageElement.value.top - (Math.ceil((height - handleImageElement.value.height)/2))
    }
    propsDatas.value.height = height
    propsDatas.value.width = width
    
    propsDatas.value.fixedRatio = true
    slidesStore.updateElement({ id: handleElementId.value, props:propsDatas.value })
    addHistorySnapshot()
    currentImg.value = 0
    isViewerShow.value = false
    ElMessage({ message: '操作成功', type: 'success' })
}

const setImages = (i:number) => {
    currentImg.value = i
    isViewerShow.value = true
}

const getTypeName = (t: number, st: 0 | 1) => {
    if (st == 1) {
        const p = allTypes.value.find(x => x.id == t)
        return (p?.name ?? "").replace('不限', "")
    } else {
        const p = platforms.value.find(x => x.id == t)
        return (p?.name ?? "").replace('不限', "")
    }
}
const handleClose = () => emit('close')
const handleBack = () => emit('refound')


watch(props.itemInfo, (val: any) => {
    data.value = props.itemInfo
})

</script>

<style>
.search-card-detail .item-poi-img {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

.search-card-detail .item-poi-img .container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.search-card-detail .item-poi-img .container img {
    border-radius: 8px;
    cursor: pointer;
}

.search-card-detail .item-poi-img .container .last-img {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;

}

.search-card-detail .item-poi-img .container .last-img .content {
    background: rgba(0, 0, 0, .2);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}
</style>