<template>
    <div v-if="status=='success'" class="bg-gray-50 pb-50">
        <div class="p-10 bg-[#fff]">
            <div class="relative w-full aspect-[4/3] rounded-xl overflow-hidden bg-[#f5f5f5]">
                <Swiper :modules="[SwiperAutoplay, SwiperPagination]" :slides-per-view="1" :loop="true" @swiper="onSwiper" @slideChange="onSlideChange">
                    <SwiperSlide v-for="(img, index) in detailData?.housingAtlasLst" :key="index">
                        <img :src="img" class="w-full h-full object-cover" />
                    </SwiperSlide>
                </Swiper>
                <div v-if="detailData?.housingAtlasLst.length" class="absolute rounded-full top-3 left-3 bg-black/50 text-white px-4 py-2 text-sm z-10">
                    {{ currentIndex }}/{{ detailData?.housingAtlasLst.length }}
                </div>
            </div>
            
            <div class="text-[#434343] text-[18px] font-bold mb-3">{{ detailData?.houseTitle }}</div>

            <!-- 标题下方的标签 -->
            <div v-if="tags.length" class="flex flex-wrap text-[12px] mt-[14px]">

                <template v-for="(item, index) in tags" :key="index">
                    <div v-if="item" class="px-6 py-2 border border-[#666] text-[#666] rounded-full mr-8">{{ item }}</div>
                </template>
                
            </div>
            <div class=" mt-[14px] text-[14px] font-bold text-[#FF1E1E]">
                {{ detailData?.tourHouseSaleInfoVo?.currency }}{{ detailData?.tourHouseSaleInfoVo?.averagePrice }}/㎡
            </div>
            <div class="mt-[14px] text-[#444] text-[12px]">
                <van-row>
                    <van-col span="12">
                        <div class="flex items-center">
                            <div class="w-[50px] font-bold">交房</div>
                            <div>{{ dayjs(detailData?.tourHouseSaleInfoVo?.handingTime).format('YYYY-MM-DD') }}</div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="flex items-center">
                            <div class="w-[50px] font-bold">开盘</div>
                            <div>{{ dayjs(detailData?.tourHouseSaleInfoVo?.openingTime).format('YYYY-MM-DD') }}</div>
                        </div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="24">
                        <div class="flex items-center mt-[14px]">
                            <div class="w-[50px] font-bold">户型</div>
                            <div>
                                {{ detailData?.tourHouseSaleInfoVo?.officeTypeDictMap?.name }}
                                {{ detailData?.tourHouseSaleInfoVo?.houseTypeDictMap?.name }}
                            </div>
                        </div>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col span="24">
                        <div class="flex items-center mt-[14px]">
                            <div class="w-[50px] font-bold">地址</div>
                            <div>{{ detailData?.tourHouseSaleInfoVo?.address }}</div>
                        </div>
                    </van-col>
                </van-row>
            </div>

        </div>

        <div class="p-10 bg-[#fff] mt-[14px]">
            <div class="mt-[8px]">开发商专属顾问</div>
            <div class="mt-[8px]">
                <div class="w-full overflow-x-auto scrollbar">
                    <div class="flex flex-nowrap">
                        <div v-for="item in detailData?.houseAdvisorList" :key="item"
                            class="w-[155px] flex items-center overflow-hidden shrink-0 h-[95px] border border-[#D4D4D4] rounded-[10px] mr-10">
                            <div class="w-[56px] h-[56px] rounded-full overflow-hidden shrink-0 mx-5">
                                <img :src="item.avatarUrl" class="object-cover w-full h-full rounded-full" alt="经纪人头像" />
                            </div>
                            <div class="flex flex-col justify-center h-full overflow-y-auto text-[10px] text-[#333]">
                                <div>{{ item.name }}</div>
                                <div>行业经验:{{ item.experienceAge }}年</div>
                                <div>成功交房:{{ item.successfulDeliveryCount }}套</div>
                                <div class="w-[54px] h-[18px] bg-[#FD9A00] flex items-center justify-center text-[#fff] rounded-full">
                                    
                                    <a :href="`tel:${item.mobile}`">咨询</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-[8px]">户型</div>
            <div class="mt-[8px]">
                <div class="w-full overflow-x-auto scrollbar">
                    <div class="flex flex-nowrap ">
                        <div v-for="(item,index) in detailData?.housingTypeAtlas" :key="index"
                            class="w-[145px] overflow-hidden mr-10 shrink-0">
                            <div class="w-full aspect-[1/1] border">
                                <img :src="item.fileUrl" class="object-cover w-full h-full" alt="" />
                            </div>
                            <div class="flex items-center justify-between text-[12px] mt-[10px]">
                                <div class="text-[#FF1E1E] ">{{ item.currency }}{{ item.price }}起</div>
                                <div>面积约{{ item.area }}m²</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-10 bg-[#fff] mt-[14px]">
            <van-tabs v-model:active="active" title-active-color="#FD9A00" color="#FD9A00">
                <van-tab title="周边配套">
                    <div class="min-h-[200px] pt-[10px]">
                        <div>{{ detailData?.tourHouseSaleInfoVo?.surroundingSupport }}</div>
                        <div v-for="(item,index) in detailData?.surroundingAtlasList" :key="index" class="w-full mt-10">
                            <img  class="w-full" :src="item" alt="" />
                        </div>
                    </div>
                </van-tab>
                <van-tab title="小区介绍">
                    <div class="min-h-[200px] pt-[10px]">
                        <div>{{ detailData?.tourHouseSaleInfoVo?.plotIntroduction }}</div>
                        <div v-for="(item,index) in detailData?.communityIntroductionAtlas" :key="index" class="w-full mt-10">
                            <img  class="w-full" :src="item" alt="" />
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>

        <!-- 底部按钮 -->
        <div class="fixed bottom-0 left-0 h-[44px] right-0 bg-white border-t flex justify-end items-center">
            <button class="bg-[#FD9A00] h-[34px] text-white px-10 rounded-lg mr-10">
                <a :href="`tel:${detailData?.tourHouseSaleInfoVo?.mobile}`">电话咨询</a>
            </button>
        </div>
    </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'

const id = useRouteParam('id')
const dayjs = useDayjs()
// 房屋详情
const { data: detailData, status } = useMyFetch(`/website/house/sale/viewHousingDetailsById?id=${id.value}`)

const tags = computed(()=>detailData.value?.tourHouseSaleInfoVo?.tag.split('&'))
console.log('tags:',tags.value)
console.log('detailData:', detailData)

// 轮播图片 - 使用相同的图片模拟设计图效果
const images = Array(4).fill('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=500')

const SwiperAutoplay = Autoplay
const SwiperPagination = Pagination
// 当前轮播图索引
const currentIndex = ref(1)

// Swiper 实例
let swiperInstance = null

// Swiper 初始化回调
const onSwiper = (swiper) => {
    swiperInstance = swiper
}

// 轮播图切换回调
const onSlideChange = () => {
    if (swiperInstance) {
        // realIndex 是当前实际的索引（考虑了 loop 模式）
        currentIndex.value = isNaN(swiperInstance.realIndex + 1)?1 : swiperInstance.realIndex + 1
    }
}
const active = ref(0);
async function getData() {
   await request(`/website/house/sale/viewHousingDetailsById?id=${id.value}`)
}
onMounted(() => {
    getData()
})
</script>

<style scoped lang="scss">
.swiper {
    @apply w-full h-full;
}

.swiper-pagination-bullet {
    @apply bg-white opacity-60;
}

.swiper-pagination-bullet-active {
    @apply bg-white opacity-100;
}

/* 可选：添加过渡动画 */
.absolute {
    transition: all 0.3s ease;
}

</style>