<template>
    <div>
        <van-dropdown-menu ref="dropDownMenuRef">
            <van-dropdown-item title="地域">
                <van-picker v-model="selectedValues" @confirm="onConfirmArea" :columns="areaList"
                    :columns-field-names="customFieldName" />
            </van-dropdown-item>
            <van-dropdown-item v-if="props.listType!='rentHouse'" @change="doEmit()" :title="price_select == 0 ? '价格' : priceList[price_select].text"
                v-model="price_select" :options="priceList" />
            <van-dropdown-item title="户型">
                <div class="text-[#333] text-[12px] p-15 pl-25">
                    <div class="text-[14px] text-[#444]">厅室</div>
                    <div class="flex items-center justify-between mt-10">
                        <div @click="officeTypeId = item.itemId, doEmit()" class="bg-[#e4e4e4] px-8 py-4 rounded"
                            :class="[officeTypeId == item.itemId ? 'text-[#ff9300] font-bold' : '']"
                            v-for="(item, index) in officeType" :key="index">
                            {{ item.itemName }}
                        </div>
                    </div>
                    <div class="text-[14px] text-[#444] mt-10">朝向</div>
                    <div class="flex items-center mt-10">
                        <div @click="orientation_select = item.itemId, doEmit()"
                            class="bg-[#e4e4e4] mr-20 px-8 py-4 rounded"
                            :class="[orientation_select == item.itemId ? 'text-[#ff9300] font-bold' : '']"
                            v-for="(item, index) in orientation" :key="index">
                            {{ item.itemName }}
                        </div>
                    </div>
                    <div class="text-[14px] text-[#444] mt-10">面积</div>
                    <div class="flex items-center flex-wrap">
                        <div @click="area_select = item.itemId, doEmit()"
                            class="bg-[#e4e4e4] mr-15 mt-10 px-8 py-4 rounded"
                            :class="[area_select == item.itemId ? 'text-[#ff9300] font-bold' : '']"
                            v-for="(item, index) in areas" :key="index">
                            {{ item.itemName }}
                        </div>
                    </div>
                </div>
            </van-dropdown-item>
            <van-dropdown-item title="更多">
                <div class="text-[#333] text-[12px] p-15 pl-25">
                    <div class="text-[14px] text-[#444]">楼层</div>
                    <div v-if="props.listType == 'newHouse' || props.listType=='oldHouse'" class="flex items-center mt-10">
                        <div @click="floor_select = item.itemId, doEmit()" class="bg-[#e4e4e4] mr-20 px-8 py-4 rounded"
                            :class="[floor_select == item.itemId ? 'text-[#ff9300] font-bold' : '']"
                            v-for="(item, index) in floorList" :key="index">
                            {{ item.itemName }}
                        </div>
                    </div>
                    <div v-if="props.listType == 'rentHouse'" class="flex items-center mt-10">
                        <div @click="floorType_select = item.itemId, doEmit()" class="bg-[#e4e4e4] mr-20 px-8 py-4 rounded"
                            :class="[floorType_select == item.itemId ? 'text-[#ff9300] font-bold' : '']"
                            v-for="(item, index) in houseFloorType" :key="index">
                            {{ item.itemName }}
                        </div>
                    </div>
                    <div class="text-[14px] text-[#444] mt-10">装修</div>
                    <div class="flex items-center mt-10">
                        <div @click="decoration_select = item.itemId, doEmit()"
                            class="bg-[#e4e4e4] mr-20 px-8 py-4 rounded"
                            :class="[decoration_select == item.itemId ? 'text-[#ff9300] font-bold' : '']"
                            v-for="(item, index) in decoration" :key="index">
                            {{ item.itemName }}
                        </div>
                    </div>
                    <div class="text-[14px] text-[#444] mt-10">房龄</div>
                    <div class="flex items-center justify-between flex-wrap">
                        <div @click="houseAge_select = item.itemId, doEmit()"
                            class="bg-[#e4e4e4] mt-10 px-8 py-4 rounded"
                            :class="[houseAge_select == item.itemId ? 'text-[#ff9300] font-bold' : '']"
                            v-for="(item, index) in houseAgeList" :key="index">
                            {{ item.itemName }}
                        </div>
                    </div>
                    <template v-if="props.listType == 'newHouse' || props.listType == 'oldHouse'">
                        <div class="text-[14px] text-[#444] mt-10">类型</div>
                        <div class="flex items-center justify-between flex-wrap">
                            <div @click="houseTypeId = item.itemId, doEmit()" class="bg-[#e4e4e4] mt-10 px-8 py-4 rounded"
                                :class="[houseTypeId == item.itemId ? 'text-[#ff9300] font-bold' : '']"
                                v-for="(item, index) in houseType" :key="index">
                                {{ item.itemName }}
                            </div>
                        </div>
                    </template>
                    <template v-if="props.listType == 'rentHouse'">
                        <div class="text-[14px] text-[#444] mt-10">类型</div>
                        <div class="flex items-center justify-between flex-wrap">
                            <div @click="rentType_select = item.itemId, doEmit()" class="bg-[#e4e4e4] mt-10 px-8 py-4 rounded"
                                :class="[rentType_select == item.itemId ? 'text-[#ff9300] font-bold' : '']"
                                v-for="(item, index) in houseRentType" :key="index">
                                {{ item.itemName }}
                            </div>
                        </div>
                    </template>

                </div>
            </van-dropdown-item>
            <van-dropdown-item
                v-if="props.listType!='rentHouse'"
                :title="sortRule_select == 0 ? '排序' : sortRuleList.filter(item => item.value == sortRule_select)[0].text"
                v-model="sortRule_select" :options="sortRuleList" @change="doEmit()" />
        </van-dropdown-menu>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const emit = defineEmits(['change'])
const props = defineProps({
    listType: { type: String, default: '' }
})

const dropDownMenuRef = ref(null)

const sortRule_select = ref(0)
const sortRuleList = [
    {
        text: '默认排序', value: 0
    },
    {
        text: '单价由低到高', value: 1
    },
    {
        text: '单价由高到低', value: 2
    },
    {
        text: '开盘时间升序', value: 3
    },
    {
        text: '开盘时间倒序', value: 4
    },
]

const areaList = ref([])
const selectedValues = ref([])//联机组件选中值
const customFieldName = {
    text: 'levelName',
    value: 'id',
};
// 房价
const price_select = ref(0)
const priceList = ref([
    {
        text: '全部',
        value: 0,
    },
    {
        text: '30万以下',
        value: 1,
        totalPriceEnd: 300000
    },
    {
        text: '30万-50万',
        value: 2,
        totalPriceStart: 300000,
        totalPriceEnd: 500000
    },
    {
        text: '50万-80万',
        value: 3,
        totalPriceStart: 500000,
        totalPriceEnd: 800000
    },
    {
        text: '80万-100万',
        value: 4,
        totalPriceStart: 800000,
        totalPriceEnd: 1000000
    },
    {
        text: '100万-120万',
        value: 5,
        totalPriceStart: 1000000,
        totalPriceEnd: 1200000
    },
    {
        text: '120万-150万',
        value: 6,
        totalPriceStart: 1200000,
        totalPriceEnd: 1500000
    },
    {
        text: '200万以上',
        value: 7,
        totalPriceStart: 2000000
    }
])
//厅室
const officeTypeId = ref(-1)
const officeType = ref([])

//朝向
const orientation_select = ref(-1) //
const orientation = ref([])

// 楼层(买房)
const floor_select = ref(0)
const floorList = ref([
    {
        itemName: '不限',
        itemId: 0
    },
    {
        itemName: '低层',
        itemId: 1,
        currentFloorStart: 1,
        currentFloorEnd: 10
    },
    {
        itemName: '中层',
        itemId: 2,
        currentFloorStart: 10,
        currentFloorEnd: 20
    },
    {
        itemName: '高层',
        itemId: 3,
        currentFloorStart: 20
    }
])
//装修类型
const decoration_select = ref(-1)
const decoration = ref([])

// 房龄
const houseAge_select = ref(0)
const houseAgeList = ref([
    {
        itemName: '不限',
        itemId: 0
    },
    {
        itemName: '2年以下',
        itemId: 1,
        houseAgeStart: 1,
        houseAgeEnd: 2
    },
    {
        itemName: '2年-5年',
        itemId: 2,
        houseAgeStart: 2,
        houseAgeEnd: 5
    },
    {
        itemName: '5年-10年',
        itemId: 3,
        houseAgeStart: 5,
        houseAgeEnd: 10
    },
    {
        itemName: '10年以上',
        itemId: 4,
        houseAgeStart: 10
    }
])

//房屋类型
const houseTypeId = ref(-1)
const houseType = ref([])

// 面积
const area_select = ref(0)
const areas = ref([
    {
        itemName: '不限',
        itemId: 0,
    },
    {
        itemName: '60m²以下',
        itemId: 1,
        areaEnd: 60
    },
    {
        itemName: '60m²-80m²',
        itemId: 2,
        areaStart: 60,
        areaEnd: 80
    },
    {
        itemName: '80m²-100m²',
        itemId: 3,
        areaStart: 80,
        areaEnd: 100
    },
    {
        itemName: '100m²-120m²',
        itemId: 4,
        areaStart: 100,
        areaEnd: 120
    },
    {
        itemName: '120m²-150m²',
        itemId: 5,
        areaStart: 120,
        areaEnd: 150
    },
    {
        itemName: '150m²-200m²',
        itemId: 6,
        areaStart: 150,
        areaEnd: 200
    },
    {
        itemName: '200m²以上',
        itemId: 7,
        areaStart: 200
    }
])

// 租房类型(合租整租等)
const rentType_select = ref(-1)
const houseRentType = ref([])

// 租房楼层
const floorType_select = ref(-1)
const houseFloorType = ref([])

const allCities = ref([])
// 获取过滤条件
async function getFilters() {
    let url = `/website/house/sale/viewHouseFilterLists`
    if (props.listType == 'rentHouse') {
        url = '/website/tourism/tourismHouseRent/viewHouseFilterLists'
    }
    const {
        data: { elseMap: eMap, houseMenuTree }
    } = await request(url)

    //   elseMap.value = eMap
    const {
        OfficeType,//厅室
        Decoration,//装修
        HouseType,//房型
        Orientation,//朝向
        HouseRentType,
        HouseFloorType
    } = eMap
    if (Array.isArray(Orientation)) {
        Orientation.unshift({ itemName: '不限', itemId: -1 })
        orientation.value = Orientation
    }
    if (Array.isArray(OfficeType)) {
        OfficeType.unshift({ itemName: '不限', itemId: -1 })
        officeType.value = OfficeType
    }
    if (Array.isArray(Decoration)) {
        Decoration.unshift({ itemName: '不限', itemId: -1 })
        decoration.value = Decoration
    }
    if (Array.isArray(HouseType)) {
        HouseType.unshift({ itemName: '不限', itemId: -1 })
        houseType.value = HouseType
    }
    if (Array.isArray(HouseRentType)) {
        HouseRentType.unshift({ itemName: '不限', itemId: -1 })
        houseRentType.value = HouseRentType
    }
    if (Array.isArray(HouseFloorType)) {
        HouseFloorType.unshift({ itemName: '不限', itemId: -1 })
        houseFloorType.value = HouseFloorType
    }
    let cities = []
    const list = houseMenuTree.map((item) => {
        item.children.unshift({ levelName: '全部', id: 0, children: [] })
        
        item.children.map((country) => {
            country.children.unshift({ levelName: '全部', id: 0 })
            country.areaId = item.id
            country.areaName = item.levelName
            
            country.children.map((city) => {
                delete city.children
                city.countryId = country.id
                city.countryName = country.levelName
                city.areaId = item.id
                city.areaName = item.levelName
                cities.push(city)
            })
        })
        
        return item
    })
    list.unshift({
        levelName: '全部', id: 0,
        children: [{ levelName: '全部', id: 0, children: [{ levelName: '全部', id: 0, }] }]
    })
    areaList.value = list
    allCities.value = cities
    doEmit()
}
const areaIds = ref('')
function onConfirmArea(value) {
    console.log('所有城市：',allCities.value)
    const { selectedOptions,selectedValues } = value
    console.log('value:',value)
    if (!Array.isArray(selectedOptions)) return
    const [areaId,countryId,cityId] = selectedValues
    let ids = []
    if(!countryId){
        let citieIds = allCities.value.filter(item=>item.areaId==areaId && item.id)
        console.log('citieIds:',citieIds)
        citieIds.map(item=>ids.push(item.id))
        
    }else if(!cityId){
        let citieIds = allCities.value.filter(item=>item.countryId==countryId && item.id)
        console.log('citieIds:',citieIds)
        citieIds.map(item=>ids.push(item.id))
    }else{
        // selectedOptions.map(item => {
        //     if (item.id) ids.push(item.id)
        // })
        ids.push(cityId)
    }
    
    areaIds.value = ids.join(',')

    dropDownMenuRef.value && dropDownMenuRef.value.close()

    doEmit()
}

getFilters()

function doEmit() {

    let str = ``
    if (areaIds.value) str += `&areaIds=${areaIds.value}`

    // 价格
    if (price_select.value) {
        const price = priceList.value.filter(item => item.value == price_select.value)[0] || {}
        if (price.totalPriceStart) {
            str += `&totalPriceStart=${price.totalPriceStart}`
        }
        if (price.totalPriceEnd) {
            str += `&totalPriceEnd=${price.totalPriceEnd}`
        }
    }

    // 厅室
    if (officeTypeId.value > -1) {
        str += `&officeType=${officeTypeId.value}`
    }

    // 类型(别墅、公寓等)
    if (houseTypeId.value > -1) {
        str += `&houseType=${houseTypeId.value}`
    }

    // 租房类型(整租合租等)
    if(rentType_select.value > -1){
        str+=`&rentType=${rentType_select.value}`
    }

    // 面积
    if (area_select.value) {
        const area = areas.value.filter(item => item.itemId == area_select.value)[0] || {}
        if (area.areaStart) {
            str += `&areaStart=${area.areaStart}`
        }
        if (area.areaEnd) {
            str += `&areaEnd=${area.areaEnd}`
        }
    }
    // 朝向
    if (orientation_select.value > -1) {
        str += `&orientation=${orientation_select.value}`
    }

    // 房龄
    if (houseAge_select.value) {
        const houseAge = houseAgeList.value.filter(item => item.itemId == houseAge_select.value)[0] || {}
        if (houseAge.houseAgeStart) {
            str += `&houseAgeStart=${houseAge.houseAgeStart}`
        }
        if (houseAge.houseAgeEnd) {
            str += `&houseAgeEnd=${houseAge.houseAgeEnd}`
        }
    }

    // 楼层
    if (floor_select.value) {
        const floor = floorList.value.filter(item => item.itemId == floor_select.value)[0] || {}
        if (floor.currentFloorStart) {
            str += `&currentFloorStart=${floor.currentFloorStart}`
        }
        if (floor.currentFloorEnd) {
            str += `&currentFloorEnd=${floor.currentFloorEnd}`
        }
    }

    // 楼层(租房)
    if(floorType_select.value > -1){
        str += `&floorType=${floorType_select.value}`
    }

    // 装修
    if (decoration_select.value > -1) {
        str += `&decoration=${decoration_select.value}`
    }

    // 排序
    if (sortRule_select.value) {
        str += `&sort=${sortRule_select.value}`
    }
    emit('change', str)
}
</script>
<style scoped lang="scss">
::v-deep .van-picker__confirm {
    color: #fd9a00;
}
::v-deep .van-dropdown-item__option--active{
    color: #fd9a00;
}
::v-deep .van-dropdown-item__icon::before{
    color: #fd9a00;
}
</style>