<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">
                    <el-image class="col full-height" :preview-teleported="true" :src="data.ImgArray[0]"
                        :initial-index="0" :preview-src-list="data.ImgArray" fit="cover" />
                    <div style="width: 60%;" class="q-ml-sm row" v-if="data.ImgArray.length > 1">
                        <div class="col column">
                            <el-image class="col full-width" :preview-teleported="true" :src="data.ImgArray[1]"
                                :initial-index="1" :preview-src-list="data.ImgArray" fit="cover" />
                            <el-image v-if="data.ImgArray.length > 2" :preview-teleported="true"
                                class="col full-width q-mt-sm" :src="data.ImgArray[2]" :initial-index="2"
                                :preview-src-list="data.ImgArray" fit="cover" />
                        </div>
                        <div class="col column q-ml-sm" v-if="data.ImgArray.length > 3">
                            <el-image class="col full-width" :preview-teleported="true" :src="data.ImgArray[3]"
                                :initial-index="3" :preview-src-list="data.ImgArray" fit="cover" />
                            <div class="col full-width q-mt-sm last-img" v-if="data.ImgArray.length > 4">
                                <el-image class="col full-height" v-if="data.ImgArray.length > 4"
                                    :preview-teleported="true" :src="data.ImgArray[4]" :initial-index="4"
                                    :preview-src-list="data.ImgArray" fit="cover" />
                                <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" :class="[!index?'':'q-ml-md']" size="small" v-for="(item,index) in data.UseTypeList">{{item}}</el-tag> </text-opera>
                </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>

<script lang="ts" setup>
import { ref, watch } from "vue"
import TextOpera from './TextOpera.vue'

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

const data = ref<any>(props.itemInfo)
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]
        }
    }
}
console.log(data.value.ImgArray)
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 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>