<template>
    <div 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-[#dedede]">
                <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 mt-[14px]">{{ detailData?.tourHouseSaleInfoVo?.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="flex items-baseline mt-[14px]">
                <span class="text-[14px] font-bold text-[#FF1E1E]">{{ detailData?.tourHouseSaleInfoVo?.currency }}{{
                    detailData?.tourHouseSaleInfoVo?.totalPrice }}</span>
                <span class="text-[12px] ml-2 text-[#999]">{{ detailData?.tourHouseSaleInfoVo?.currency }}{{
                    detailData?.tourHouseSaleInfoVo?.averagePrice }}/㎡</span>
            </div>
            <div class="text-[12px] mt-[18px]">
                <van-row>
                    <van-col span="8">
                        <div class="text-[#242424] font-bold">{{
                            detailData?.tourHouseSaleInfoVo?.officeTypeDictMap?.name }}</div>
                        <div class="text-[#666]">{{ detailData?.tourHouseSaleInfoVo?.currentFloor
                            }}层(共{{ detailData?.tourHouseSaleInfoVo?.totalFloor }}层)</div>
                    </van-col>
                    <van-col span="8">
                        <div class="text-[#242424] font-bold">{{ detailData?.tourHouseSaleInfoVo?.area }}m²</div>
                        <div class="text-[#666]">{{ detailData?.tourHouseSaleInfoVo?.decorationDictMap?.name }}</div>
                    </van-col>
                    <van-col span="8">
                        <div class="text-[#242424] font-bold">{{
                            detailData?.tourHouseSaleInfoVo?.orientationDictMap?.name }}</div>
                        <div class="text-[#666]">
                            {{ dayjs(detailData?.tourHouseSaleInfoVo?.yearOfFinish).format('YYYY-MM-DD') }}竣工/{{
                                detailData?.tourHouseSaleInfoVo?.houseTypeDictMap?.name }}</div>
                    </van-col>
                </van-row>
                <van-row class="mt-[14px]">
                    <van-col span="8">
                        <div class="text-[#242424] font-bold">{{ detailData?.tourHouseSaleInfoVo?.communityName }}</div>
                        <div class="text-[#666]">所属小区</div>
                    </van-col>
                    <van-col span="8">
                        <div class="text-[#242424] font-bold">{{ detailData?.tourHouseSaleInfoVo?.region }}</div>
                        <div class="text-[#666]">所属区域</div>
                    </van-col>
                </van-row>
            </div>
        </div>

        <div class="p-10 bg-[#fff] mt-[14px]">
            <div class="mt-[8px]">经纪人</div>
            <div class="mt-[8px] border border-[#D4D4D4] rounded-[10px] h-[109px] flex items-center justify-between">
                <div class="flex items-center ml-[14px]">
                    <div class="w-[56px] h-[56px] rounded-full overflow-hidden shrink-0">
                        <img :src="detailData?.houseAdvisorList[0]?.avatarUrl"
                            class="object-cover w-full h-full rounded-full" alt="经纪人头像" />
                    </div>
                    <div class="flex flex-col justify-between text-[12px] text-[#333] ml-[5px]">
                        <div>{{ detailData?.houseAdvisorList[0]?.name }}</div>
                        <div>行业经验:{{ detailData?.houseAdvisorList[0]?.experienceAge }}年</div>
                        <div>成功交房:{{ detailData?.houseAdvisorList[0]?.successfulDeliveryCount }}套</div>
                    </div>
                </div>
                <div
                    class="relative w-[35%] h-[80px] border-l-[1px] border-[#D4d4d4] flex flex-col shrink-0 justify-center items-center">
                    <img :src="detailData?.tourHouseSaleInfoVo.code" class="aspect-[1/1] object-cover w-[50%]" />
                    <span class=" text-[#333] text-[10px] bottom-[0%]">扫码联系</span>
                </div>
            </div>
            <div class="mt-[14px] px-4">
                <div class="flex text-[#666] text-[14px] ">
                    <div class="w-[80px] font-bold shrink-0">产权性质</div>
                    <span class="flex-1">{{ detailData?.tourHouseSaleInfoVo?.propertyRightNature }}</span>
                </div>
                <div class="flex text-[#666] text-[14px] mt-[14px]">
                    <div class="w-[80px] font-bold shrink-0">产权年限</div>
                    <span class="flex-1">{{ detailData?.tourHouseSaleInfoVo?.termOfOwnership }}</span>
                </div>
                <div class="flex text-[#666] text-[14px] mt-[14px]">
                    <div class="w-[80px] font-bold shrink-0">唯一住房</div>
                    <span class="flex-1">{{ detailData?.tourHouseSaleInfoVo?.isSoleDwelling ? '是' : '否' }}</span>
                </div>
                <div class="flex text-[#666] text-[14px] mt-[14px]">
                    <div class="w-[80px] font-bold shrink-0">发布公司</div>
                    <span class="flex-1">{{ detailData?.tourHouseSaleInfoVo?.publishingCompany }}</span>
                </div>
                <div class="flex text-[#666] text-[14px] mt-[14px]">
                    <div class="w-[80px] font-bold shrink-0">营业执照</div>
                    <span class="flex-1">{{ detailData?.tourHouseSaleInfoVo?.businessLicense }}</span>
                </div>
                <div class="flex text-[#666] text-[14px] mt-[14px]">
                    <div class="w-[80px] font-bold shrink-0">发布日期</div>
                    <span v-if="detailData?.tourHouseSaleInfoVo?.releaseDate" class="flex-1">{{ dayjs(detailData?.tourHouseSaleInfoVo?.releaseDate).format('YYYY-MM-DD') }}</span>
                </div>
                <div class="flex text-[#666] text-[14px] mt-[14px]">
                    <div class="w-[80px] font-bold shrink-0">物业类型</div>
                    <span class="flex-1">{{ detailData?.tourHouseSaleInfoVo?.propertyType }}</span>
                </div>
                <div class="flex text-[#666] text-[14px] mt-[14px]">
                    <div class="w-[80px] font-bold shrink-0">房本年限</div>
                    <span class="flex-1">{{ detailData?.tourHouseSaleInfoVo?.housePrincipalLife }}</span>
                </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?.surroundingAtlas" :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('二手房详情：', detailData.value)

// 轮播图片 - 使用相同的图片模拟设计图效果
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);

</script>

<style scoped>
.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>