<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 dataDetail?.tourHouseEquipment?.houseDetailConvertImage" :key="index">
                        <img :src="img" class="w-full h-full object-cover" />
                    </SwiperSlide>
                </Swiper>
                <div v-if="dataDetail?.tourHouseEquipment?.houseDetailConvertImage?.length" class="absolute rounded-full top-3 left-3 bg-black/50 text-white px-4 py-2 text-sm z-10">
                    {{ currentIndex }}/{{ dataDetail?.tourHouseEquipment?.houseDetailConvertImage?.length }}
                </div>
            </div>
            <div class="text-[#434343] text-[18px] font-bold mt-[14px]">{{ dataDetail?.houseTitle }}</div>

            <div class="flex flex-wrap items-center mt-[14px] text-[#333] text-[12px]">
                <div>{{dataDetail?.rentTypeDictMap?.name}}</div>
                <div class="ml-[12px]">{{ dataDetail?.officeTypeDictMap?.name }}</div>
                <div class="ml-[12px]">{{ dataDetail?.area }}m²</div>
                <div class="ml-[12px]">{{ dataDetail?.decorationDictMap?.name }}</div>
            </div>
            <div class="flex flex-wrap items-center mt-[14px] text-[#333] text-[12px]">
                <div class="">{{ dataDetail?.communityName }}</div>
                <div class="ml-[12px]">{{ dataDetail?.orientationDictMap?.name }}</div>
                <div class="ml-[12px]">{{ dataDetail?.floorTypeDictMap?.name }} &nbsp; {{ dataDetail?.currentFloor }}层/{{dataDetail?.totalFloor}}层</div>
            </div>
            <div class="flex flex-wrap items-center mt-[14px] text-[#333] text-[12px]">
                <div>{{ dataDetail?.address }}</div>
            </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="dataDetail?.tourHouseAdvisorInfo?.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>{{ dataDetail?.tourHouseAdvisorInfo?.name }}</div>
                        <div>{{ dataDetail?.tourHouseAdvisorInfo?.companyName }}</div>
                        <div>行业经验:{{dataDetail?.tourHouseAdvisorInfo?.experienceAge}}年</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="dataDetail?.tourHouseAdvisorInfo?.covertCode" class="aspect-[1/1] object-cover w-[50%]" />
                    <span class=" text-[#333] text-[12px] bottom-[0%]">扫码联系</span>
                </div>
            </div>
            
        </div>
        <div class="p-10 bg-[#fff] mt-[14px] text-[#333] text-[14px]">
            <van-row>
                <van-col span="5">
                    <div class="text-[#242424] font-bold h-full flex flex-col justify-center items-center">
                        <img :src="equipmentIcon" class="w-[26px] h-[26px]" />
                        
                        <span class="mt-3">
                            居家<br/>设施
                        </span>
                    </div>
                </van-col>
                <van-col span="6">
                    <div class="">
                        <div class="flex items-center">
                            <span v-if="dataDetail?.tourHouseEquipment?.icebox">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.icebox?'':'text-[#999]']">冰箱</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.broadband">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.broadband?'':'text-[#999]']">宽带</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.gasStove">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.gasStove?'':'text-[#999]']">燃气灶</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.bed">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.bed?'':'text-[#999]']">床</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.balcony">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.balcony?'':'text-[#999]']">阳台</span>
                        </div>
                    </div>
                </van-col>
                <van-col span="6">
                    <div class="">
                        <div class="flex items-center">
                            <span v-if="dataDetail?.tourHouseEquipment?.washer">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.washer?'':'text-[#999]']">洗衣机</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.sofa">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.sofa?'':'text-[#999]']">沙发</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.airConditioner">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.airConditioner?'':'text-[#999]']">空调</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.restRoom">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.restRoom?'':'text-[#999]']">卫生间</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.heating">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.heating?'':'text-[#999]']">暖气</span>
                        </div>
                    </div>
                </van-col>
                <van-col span="6">
                    <div class="">
                        <div class="flex items-center">
                            <span v-if="dataDetail?.tourHouseEquipment?.calorifier">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.calorifier?'':'text-[#999]']">热水器</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.rangeHood">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.rangeHood?'':'text-[#999]']">油烟机</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.wardrobe">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.wardrobe?'':'text-[#999]']">衣柜</span>
                        </div>
                        <div class="flex items-center mt-8">
                            <span v-if="dataDetail?.tourHouseEquipment?.smartDoorLock">√</span>
                            <span v-else class="text-[#999]">x</span>
                            <span class="ml-5"  :class="[dataDetail?.tourHouseEquipment?.smartDoorLock?'':'text-[#999]']">智能门锁</span>
                        </div>
                    </div>
                </van-col>
            </van-row>
        </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>
                            {{ dataDetail?.tourHouseEquipment?.surroundingSupport }}
                        </div>
                        <div v-for="(item,index) in dataDetail?.tourHouseEquipment?.surroundingSupportConvertImage" :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>
                            {{ dataDetail?.tourHouseEquipment?.plotIntroduction }}
                        </div>
                        <div v-for="(item,index) in dataDetail?.tourHouseEquipment?.plotIntroductionConvertImage" :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 right-0 h-[55px] bg-white border-t flex items-center justify-end">
            <div class="flex items-end">
                <div class="text-[#FF1717] font-bold text-[14px]">
                    {{ dataDetail?.currency }}{{ dataDetail?.rentPrice }}/月
                </div>
                <div class="text-[12px] text-[#333] mx-[10px]">{{dataDetail.area}}m²</div>
            </div>
            <button class=" bg-[#FF8C29] text-white h-[36px] rounded-[10px] text-[12px] flex items-center justify-center px-[20px]">
                <a :href="`tel:${dataDetail?.tourHouseAdvisorInfo?.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'
import equipmentIcon from '~/assets/img/equipment.png'

const id = useRouteParam('id')
// 房屋详情
const { data: dataDetail, status } = useMyFetch(`/website/tourism/tourismHouseRent/tourHouseRentInfoById?id=${id.value}`)

console.log('dataDetail:', dataDetail.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);
async function getData() {
   await request(`/website/tourism/tourismHouseRent/tourHouseRentInfoById?id=${id.value}`)
}
onMounted(() => {
    getData()
})
</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>