<template>
    <div v-if="showPage" class="pb-20 bg-[#fff]">
        <div class="sticky top-50 z-50 pt-15 bg-[#fff]">
            <Search @search="search" />
            <div v-if="listType == OLD_HOUSE" class="flex items-center justify-center mt-10">
                <div @click="isSaleByLandlord = 0"
                    :class="isSaleByLandlord === 0 ? 'bg-[#FD9A00] text-[#fff]' : 'text-[#666]'"
                    class="w-[82px] font-bold h-[30px] rounded-xl flex items-center justify-center text-[14px]">
                    全部楼盘
                </div>
                <div @click="isSaleByLandlord = 1"
                    :class="isSaleByLandlord === 1 ? 'bg-[#FD9A00] text-[#fff]' : 'text-[#666]'"
                    class="w-[82px] font-bold h-[30px] rounded-xl flex items-center justify-center text-[14px] ml-30">
                    房东自售
                </div>
            </div>
            <Filters @change="filterChange" :listType="listType" class="mt-10" />
        </div>
        <van-list :immediate-check="false" :finished="finished" loading-text="加载中..."
            error-text="获取失败" @load="loadMore" v-model:loading="loading">
            <div class="p-[10px]">
                <NuxtLink :to="`${listType==NEW_HOUSE?'/house/newHouse/':listType==OLD_HOUSE?'/house/oldHouse/':'/house/rentHouse/'}${item.id}`" v-for="item in dataList" :key="item.id"
                    class="flex items-center mt-15 border-b border-[#dedede] pb-15">
                    <div class="w-[126px] h-[126px] rounded shrink-0 overflow-hidden">
                        <img class="object-cover w-full h-full" :src="item.coverUrl" alt="">
                    </div>
                    <div class="flex flex-col justify-between h-[126px] ml-8" style="width:calc(100% - 136px)">
                        <div class="text-[#333] text-[16px] truncate font-bold w-full">
                            {{ item.houseTitle }}
                        </div>
                        <template v-if="listType == NEW_HOUSE || listType == OLD_HOUSE">
                            <div class="scrollbar w-full truncate text-[12px] text-[#fff]" style="overflow-x: auto">
                                <div class="flex items-center">
                                    <div v-if="item.isOnSaleDictMap?.name"
                                        class="mr-10 rounded-full border border-[#FC9900] pl-10 pr-10 text-[#FC9900]">
                                        {{ item.isOnSaleDictMap?.name }}
                                    </div>
                                    <div v-if="item.houseTypeDictMap?.name"
                                        class="mr-10 rounded-full border border-[#FC9900] pl-10 pr-10 text-[#FC9900]">
                                        {{ item.houseTypeDictMap?.name }}
                                    </div>
                                    <template v-if="Array.isArray(item.tags)">
                                        <div v-for="(tag, tagIndex) in item.tags" :key="tagIndex"
                                            class="mr-10 rounded-full border border-[#FC9900] pl-10 pr-10 text-[#FC9900]">
                                            {{ tag }}
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <div class="w-full truncate text-[14px] text-[#444]">
                                <span class="mr-10">{{ item.officeTypeDictMap?.name }}</span>
                                <span class="mr-10">{{ item.orientationDictMap?.name }}</span>
                                <!-- <span class="mr-10">{{dayjs(item.yearOfBuild).format('YYYY-MM-DD')}}建造</span> -->
                                <span class="mr-10">{{ item.currentFloor }}楼(共{{ item.totalFloor }}层)</span>
                            </div>
                            <div class="w-full truncate text-[14px] text-[#444]">
                                <span class="mr-20">{{ item.address }}</span>
                                <span class="mr-20">{{ item.communityName }}</span>
                            </div>
                            <div class="flex items-center text-[14px]">
                                <span v-if="listType == NEW_HOUSE" class="text-[#FF1A1A] font-bold">
                                    {{ item.currency}}{{item.averagePrice}}/m²
                                </span>
                                <span v-if="listType == OLD_HOUSE" class="text-[#FF1A1A] font-bold">
                                    {{ item.currency}}{{item.totalPrice}}
                                </span>
                                <span v-if="listType == OLD_HOUSE" class="ml-20">
                                    {{ item.currency}}{{item.averagePrice}}/m²
                                </span>
                            </div>
                        </template>
                        <template v-if="listType == RENT_HOUSE">
                            <div class="w-full truncate text=[#444] text-[14px]">
                                <span class="mr-20">{{ item.area }}m²</span>
                                <span>{{ item?.officeTypeDictMap?.name }}</span>
                            </div>
                            <div class="w-full truncate text=[#444] text-[14px]">
                                <span class="mr-20">{{ item?.rentTypeDictMap?.name }}</span>
                                <span>{{ item?.floorTypeDictMap?.name }}{{ item.currentFloor }}楼 (共{{ item.totalFloor }}层)</span>
                            </div>
                            <div class="w-full truncate text=[#444] text-[14px]">
                                <span class="mr-20">{{ item?.region }}</span>
                                <span>{{ item?.communityName }}</span>
                            </div>
                            <div class="flex items-center text-[14px]">
                                <span class="text-[#FF1A1A] font-bold">
                                    {{ item.currency }}{{item.rentPrice }}/月
                                </span>
                            </div>
                        </template>
                    </div>
                </NuxtLink>
            </div>
            <div v-if="finished" class="py-20 text-center text-[#999] text-[15px]">
                没有更多了~
            </div>
        </van-list>
    </div>
    <div v-else class="text-center text-[#999] mt-100">
        页面不存在
    </div>
</template>

<script setup>
import Filters from './components/filters.vue';
import Search from './components/Search.vue';

const NEW_HOUSE = 'newHouse';//新房
const RENT_HOUSE = 'rentHouse';//租房
const OLD_HOUSE = 'oldHouse';//二手房

const listType = useRouteParam('type')
const showPage = computed(() => listType.value == NEW_HOUSE || listType.value == RENT_HOUSE || listType.value == OLD_HOUSE)
const route = useRoute()

const dayjs = useDayjs()
const pageNum = ref(1)
const pageSize = ref(5)
const params = ref('')
const dataList = ref([])
const loading = ref(true)
const finished = ref(false)
const searchString = ref('')

// 是否房东直售0否1是
const isSaleByLandlord = ref(0)
watch(isSaleByLandlord, () => {
    if(listType.value == OLD_HOUSE){
        pageNum.value = 1
        getList()
    }
    
})
async function getList() {

    if (!showPage.value) return

    let param = `pageNum=${pageNum.value}&pageSize=${pageSize.value}${params.value}&searchString=${searchString.value}`

    if(listType.value == OLD_HOUSE){
        param+=`&houseSourceType=1&isSaleByLandlord=${isSaleByLandlord.value}`
    }

    if(listType.value == NEW_HOUSE){
        param+=`&houseSourceType=0`
    }

    let url = '/website/house/sale/viewHouseListAfterFilter'
    if (listType.value == RENT_HOUSE) {
        url = '/website/tourism/tourismHouseRent/tourHouseRentInfoList'
    }

    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
    })

    const { data } = await request(`${url}?${param}`).finally(() => closeToast())

    try {
        data.dataList.map((item, index) => {
            data.dataList[index].tags = item.tag.split('&')
        })
    } catch (error) { }

    if (pageNum.value == 1) {
        dataList.value = data.dataList
    } else {
        dataList.value = dataList.value.concat(data.dataList)
    }

    loading.value = false
    if (dataList.value.length >= data.totalCount) {
        finished.value = true;
    } else {
        finished.value = false;
    }
}
function loadMore() {
    pageNum.value++;
    getList()
}

// 搜索
function search(keyword) {
    if (!searchString.value && !keyword) return
    searchString.value = keyword
    pageNum.value = 1
    getList()
}

// 筛选
function filterChange(param) {
    params.value = param
    pageNum.value = 1
    getList()
}
onMounted(() => {
    let title = '逍遥游-房屋租售'
    if(listType.value == NEW_HOUSE) title = '逍遥游-新房'
    if(listType.value == OLD_HOUSE) title = '逍遥游-二手房'
    if(listType.value == RENT_HOUSE) title = '逍遥游-租房'
    document.title=title
})
</script>

<style scoped>
.scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: #ccc;
}

/* 滚动条滑块样式 */
.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
</style>