<template>
    <div class="dis-f s-w-100" :style="[routePath === '/seachPage' ? '' : 'border-bottom:1px solid #ebebeb;']">
        <div class="select-box s-w-50 bor-r">
            <div class="dis-f bor-b-das" :class="{ 'al-item housing-pd': routePath === '/needHousing' }">
                <div class="tab-title">{{ routePath === '/needHousing' ? '目标区域' : '地理位置' }}</div>
                <!-- 中介/个人房源页面 -->
                <div class="tab-text" v-if="routePath !== '/needHousing'">
                    <div class="dis-f">
                        <div class="btn  jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
                            @click="setSelectPosition('region')">按区域</div>
                        <div class="btn  jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'school' }"
                            @click="setSelectPosition('school')">按学校</div>
                    </div>
                    <div class="select-tab-info">
                        <img :src="selectPosition === 'school' ? require('../../assets/homeImage/schoolRegionBg.svg') : require('../../assets/homeImage/checkBG.svg')"
                            class="img" alt="">
                        <div class="info-box" v-show="selectPosition === 'region'">
                            <div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }"
                                @click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
                                <div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
                                        v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp
                                        <div
                                            :class="{ 'check-data': selectData.data && selectData.data.length > 0 && selectData.data.length !== selectTabCheck.data.length }">
                                            {{
                                                selectData.data && selectData.data.length ===
                                                0 || selectData.data.length === selectTabCheck.data.length ? '不限' :
                                                selectData.data && selectData.data.length
                                            }}
                                        </div>
                                    </div>
                                </div>
                                <img src="../../assets/homeImage/selectInfoTabIcon.svg"
                                    v-show="selectTabCheck.id !== item.id" class="img" alt="">
                                <img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id"
                                    class="img" alt="">
                            </div>
                            <div class="hid-box">
                                <checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
                                    :closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data"
                                    ref="checkBoxGroupInfo">
                                </checkBoxGroup>
                            </div>
                        </div>
                        <div class="school-info-box" v-show="selectPosition === 'school'">
                            <div class="lef-btn" @click="prevSchoolData">
                                <img :src="schoolPages === 0 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
                                    class="img" alt="">
                            </div>
                            <div class="right-btn" @click="nextSchoolData">
                                <img :src="schoolPages === shcoolData.length - 1 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
                                    class="img" alt="">
                            </div>
                            <el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
                                indicator-position="none" class="s-w-100" ref="schoolData">
                                <el-carousel-item v-for="(item, i) in shcoolData" :key="i">
                                    <div class="school-carousel-box">
                                        <div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)"
                                            class="carousel-info-box"
                                            :class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
                                            {{ items.name }}
                                        </div>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                </div>
                <!-- 求房源 -->
                <div class="need-housing-box dis-f al-item" v-if="routePath === '/needHousing'">
                    <div class="select-tab-info" style="margin-top:0;">
                        <div class="housing-info-box info-box" v-show="selectPosition === 'region'"
                            style="position: relative;padding: 0;height:30px;width: 420px;">
                            <div class="check-none dis-f al-item btn"
                                :class="[{ 'btn-check': selectTabCheck.id === item.id }]" style="margin-right:10px;"
                                @click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
                                <div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
                                        v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp
                                        <div :class="{ 'select-num': selectData.data && selectData.data.length }">
                                            {{
                                                selectData.data && selectData.data.length ===
                                                0 || selectData.data.length === selectTabCheck.data.length ? '不限' :
                                                selectData.data && selectData.data.length
                                            }}
                                        </div>
                                    </div>
                                </div>
                                <img :src="selectTabCheck.id === item.id ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
                                    class="img" :class="{ 'mg-l-30': selectTabCheck.id === item.id }" alt=""
                                    v-show="i !== 0">
                            </div>
                            <div class="hid-box">
                                <checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
                                    :closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data"
                                    ref="checkBoxGroupInfo">
                                </checkBoxGroup>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dis-f pad-t-b-15 bor-b-das" :class="{ 'housing-pd pd-t-25': routePath === '/needHousing' }">
                <div class="tab-title">{{ routePath === '/needHousing' ? '求租方式' : '出租方式' }}</div>
                <div class="tab-text dis-f al-item" style="padding-bottom:0;">
                    <div class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
                        <div v-if="item.title !== '不限'">
                            <el-dropdown trigger="click">
                                <span class="dropdown-btn jus-x dis-f al-item"
                                    :class="{ 'btn-check': hireTypeObj.hireId === item.title }" @click="setHireId(item)">
                                    {{ item.title }}<span v-show="hireTypeObj.hireId === item.title"> > {{
                                        hireTypeObj.title || '不限' }}</span>
                                    <img :src="hireTypeObj.hireId === item.title ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
                                        class="img" :class="{ 'mg-l-30': hireTypeObj.hireId === item.title }" alt="">
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu class="pd-10 el-dropdown-menu">
                                        <el-dropdown-item v-for="(items, j) in item.hireType" :key="j">
                                            <div class="dropdown-text" @click="dropdownCommand(items)"
                                                :class="{ 'dropdown-check-text': hireTypeObj.id === items.id }">{{
                                                    items.title
                                                }}
                                                <div class="type-icon" v-show="hireTypeObj.id === items.id"></div>
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                        <div class="btn  jus-x al-item dis-f" :class="{ 'btn-check': hireTypeObj.hireId === item.title }"
                            v-if="item.title === '不限'" @click="setHireId(item)">{{
                                item.title }}</div>
                    </div>
                </div>
            </div>
            <div class="dis-f al-item" style="padding:30px 0;">
                <div class="tab-title">{{ routePath === '/needHousing' ? '租金预算' : '租金' }}</div>
                <div class="dis-f al-item rent-box jus-bet">
                    <div class="dis-f al-item">
                        <input type="text" class="input" v-model="rentObj.min" @blur="setRent">
                        <span class="tab-icon">~</span>
                        <input type="text" class="input" v-model="rentObj.max" @blur="setRent">
                        <span class="unit-box">HK$/月</span>
                    </div>
                    <div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min || rentObj.max" @click="cleanRent">
                        <div class="dis-f jus-x al-item">
                            <img class="img-box" src="@/assets/img/publicImage/round-fork.svg" alt="">
                        </div>
                        清除金额
                    </div>
                </div>
            </div>
        </div>
        <div class="select-box s-w-50">
            <div class="dis-f bor-b-das">
                <div class="tab-title">租期</div>
                <div class="select-btn-box">
                    <div class="dis-f">
                        <div class="btn  jus-x al-item dis-f" v-for="(item, i) in hireData" :key="i"
                            :class="{ 'btn-check': hireDate.id === item.id }" @click="setHireDate(item)">{{ item.title
                            }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dis-f bor-b-das pd-t-20">
                <div class="tab-title">{{ routePath === '/needHousing' ? '求租者性别' : '性别' }}</div>
                <div class="select-btn-box">
                    <div class="dis-f">
                        <div class="btn  jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i"
                            :class="{ 'btn-check': gender.id === item.id }" @click="setGender(item)">{{ item.title }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dis-f bor-b-das pd-t-20">
                <div class="tab-title">发布时间</div>
                <div class="select-btn-box">
                    <div class="dis-f">
                        <div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in releaseTime" :key="i"
                            :class="{ 'btn-check': releaseObj.id === item.id }" @click="setReleaseObj(item)">{{
                                item.title }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dis-f pd-t-20">
                <div class="tab-title">其他</div>
                <div class="select-btn-box" style="margin-left:-11px;">
                    <div class="dis-f">
                        <div class="dropdown-btn min-btn jus-x al-item dis-f" style="border:1px solid #fff;" v-for="(item, i) in otherData" :key="i">
                            <el-checkbox-group v-model="otherCheck.list" @change="setOtherCheck">
                                <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="btm-list" v-if="routePath !== '/seachPage'">
        <div class="dis-f al-item">
            共<span class="count">{{ count || 0 }}</span>条
            {{ routePath === '/personHousing' ?
                '个人房源' : routePath === '/intermediaryHousing' ?
                    '中介房源' : routePath === '/needHousing' ?
                        '求房源' : '' }} <span v-show="selectTabCheck.title && selectTabCheck.id">
                &nbsp
                |
                &nbsp</span>
            <div class="dis-f al-item">
                <div v-show="selectTabCheck.id && selectTabCheck.title">{{ selectTabCheck.title }}:</div>
                <div class="dis-f" style="flex-wrap: wrap;width:800px;">
                    <div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
                        {{ item.title }}
                        <img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i,item.id)" class="img" alt="">
                    </div>
                </div>
            </div>
        </div>
        <span class="dis-f al-item sort-text">
            <el-dropdown trigger="click">
                <span class="dis-f al-item sort-text">
                    {{ listSort.check }}<img class="img" src="../../assets/homeImage/sortIcon.png" alt="">
                </span>
                <template #dropdown>
                    <el-dropdown-menu class="pd-10 el-dropdown-menu">
                        <el-dropdown-item v-for="(items, j) in listSort.type" :key="j">
                            <div class="dropdown-text" :class="{ 'dropdown-check-text': listSort.checkType === items.type }"
                                @click="listSortCheck(items)">{{
                                    items.title
                                }}
                                <div class="type-icon" v-show="listSort.checkType === items.type"></div>
                            </div>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span>
    </div>
</template>
  
<script setup>
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
import store from '../../store/index';


//数据包
let configData = reactive({ data: {} })

//保存筛选参数
// let setStoreSelectData=(obj,data,type)=>{
//     console.log(store.state.seachSelect)
//     // otherCheck['list']
//     // releaseObj.id
//     // gender.id 
//     // hireDate.id 
//     // hireDate.title 
//     // hireTypeObj.id
//     // hireTypeObj.title
//     // hireTypeObj.hireId 
//     // selectTabCheck.id
//     // selectTabCheck.title 
//     // selectTabCheck.data
//     // selectData.data
//     // schoolSelectObj.id
//     // schoolSelectObj.title
// }

//监听路由
const route = useRouter()
let routePath = ref('')
let routeQuery = reactive({ data: {} })
routePath.value = route.currentRoute.value.meta.path
routeQuery.data = route.currentRoute.value.query
const { proxy } = getCurrentInstance()

const props = defineProps({
    setSeachCondition: {
        type: Function
    }
})

let setSeachCondition = props.setSeachCondition

//最新发布选项
let listSort = shallowReactive({
    type: [
        { title: '最新发布', type: 'timestamp' },
        { title: '热门', type: 'hotnum' },
        { title: '价格从低到高', type: 'rentasc' },
        { title: '价格从高到低', type: 'rentdesc' }
    ],
    checkType: 'timestamp',
    check: '最新发布'
})

//列表总数
const count = inject('count')


let list = shallowReactive([{
    name: '不限',
    id: ''
}, {
    name: '港岛',
    id: 1,
    data: []  //{title: '上环',id: 1}, {title: '铜锣湾',id: 2}, { title: '天后',id: 3}, {title: '北角',id: 4}
}, {
    name: '九龙',
    id: 2,
    data: []
}])
//设置区域数据
let setRegionList = () => {
    let arr = store.state.seachTypeData[1] ? JSON.parse(JSON.stringify(store.state.seachTypeData[1].where)) : []
    arr.map((res, i) => {
        list[i] = res
    })
    list.unshift({
        name: '不限',
        id: ''
    })
    // console.log('arr', JSON.stringify(list))
    routerQuerySet()
    // console.log(store.state.seachTypeData)
}

//按区域/学校选择的地区
let selectData = reactive({ data: [] })
let selectTabCheck = reactive({
    id: '',
    title: '',
    data: []
})

//区域状态
let selectPosition = ref('region')
let showSelect = ref(false)

//学校区域状态
let schoolSelectObj = reactive({ id: '', title: '不限' })
let schoolPages = ref(0) //页数
let shcoolData = shallowReactive([])
let setSchoolData = () => {
    let arr = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
    arr.unshift({name:'不限',id:''})
    let num = 0
    for (let i = 0; i < arr.length; i++) {
        if (!shcoolData[num]) {
            shcoolData[num] = []
        }
        if (shcoolData[num].length < 9) shcoolData[num].push(arr[i])

        if (shcoolData[num].length === 9) {
            num++
        }
    }
}

//选择学校区域属性
let setSchoolObj = (obj) => {
    schoolSelectObj.id = obj.id
    schoolSelectObj.title = obj.title
    selectTabCheck.id = '';
    selectTabCheck.title = '不限'
    selectTabCheck.data = [];
    selectData.data = []
    setSeachCondition('school', obj.id)
}

//学校轮播组件
let prevSchoolData = () => {
    if (schoolPages.value === 0) return
    const schoolData = proxy.$refs.schoolData
    schoolPages.value--
    schoolData.prev()
}

let nextSchoolData = () => {
    if (schoolPages.value === shcoolData.length - 1) return
    const schoolData = proxy.$refs.schoolData
    schoolPages.value++
    schoolData.next()
}

//设置状态
let setSelectPosition = (type) => {
    selectPosition.value = type
}

//点击区域/学校选项
let clearSelectTabCheck = ref(true)
let setSelectData = (id, data = [], title) => {
    showSelect.value = true
    if (id === selectTabCheck.id) {
        clearSelectTabCheck.value = false
        return
    }
    clearSelectTabCheck.value = true
    selectTabCheck.id = id;
    selectTabCheck.title = title
    selectTabCheck.data = data;
    selectData.data = []
    schoolSelectObj.id = ''
    schoolSelectObj.title = ''
    if (id === '') {
        setSeachCondition('location', [])
    }
}
//取消按钮
let closeSeach = () => {
    // console.log(selectTabCheck,selectData)
    showSelect.value = false
    clearSelectTabCheck.value = false
}
//根据地区id查找地区
let seachAreaId = (data) => {
    let arr = []
    data.map(res => {
        selectTabCheck.data.map(item => {
            if (res === item.id) {
                arr.push(item)
            }
        })
    })
    return arr
}

//设置当前地区选项
let checkBoxGroupInfo = ref(null)
let setCheckBoxData = (data) => {
    checkBoxGroupInfo.value && checkBoxGroupInfo.value.setCheckData(data)
}

//确认按钮
let selectSeach = (data = []) => {
    selectData.data = seachAreaId(data)
    showSelect.value = false
    if (data.length === 0 && selectTabCheck.id) {
        data.push(selectTabCheck.id)
        selectData.data=[{title:'不限',id:''}]
    }
    schoolSelectObj.id = ''
    schoolSelectObj.title = ''
    // console.log(selectData,selectTabCheck)
    // store.state.routeList['hireTypeObj']=JSON.parse(JSON.stringify(hireTypeObj))
    // return
    setSeachCondition('location', data)
}

//底部删除按钮
let deleteSelect = (i,id) => {
    
    let data = []
    selectData.data.splice(i, 1)
    if(!id){
        setSelectData('',[],'不限')
    }
    selectData.data.map(res => {
        data.push(res.id)
    })
    checkBoxGroupInfo.value.setCheckData(data)
    if (data.length === 0&&id) {
        setSeachCondition('location', [selectTabCheck.id + ''])
        selectData.data=[{title:'不限',id:''}]
    } else if(id){
        setSeachCondition('location', data)
    }
}

//搜索列表排序
let listSortCheck = (item) => {
    listSort.checkType = item.type
    listSort.check = item.title
    setSeachCondition('orderby', item.type)
}



//出租方式
let hireTypeArr = shallowReactive([{ hireType: [], title: '不限' }, { title: '合租', id: 1, hireType: [] }, { hireType: [], id: 2, title: '整租' }])

//设置出租方式
let setHireTypeArr = (type, id) => {
    let arr = []
    type.map((item, index) => {
        arr.push({
            id: item.id,
            title: item.name
        })
    })
    return arr
}


let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选

let setHireId = (item) => {
    if (hireTypeObj.hireId != item.title) {
        hireTypeObj.id = ''
        hireTypeObj.title = ''
    }
    if (item.hireType.length === 0) {
        setSeachCondition('types', '')
    }
    hireTypeObj.hireId = item.title
}

let dropdownCommand = (obj) => {
    hireTypeObj.id = obj.id
    hireTypeObj.title = obj.title
    // store.state.routeList['hireTypeObj'] = JSON.parse(JSON.stringify(hireTypeObj))
    setSeachCondition('types', obj.id)
}

//租金
let rentObj = reactive({ min: '', max: '' })

let setRent = () => {
    setSeachCondition('rent', rentObj)
}

//清空租金
let cleanRent = () => {
    rentObj.min = ''
    rentObj.max = ''
    setSeachCondition('rent', rentObj)
}

//租期
let hireData = reactive([{ title: '不限', id: 0 }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
let hireDate = reactive({ id: 0, title: '' })
//设置租期
let setHireDate = (item) => {
    hireDate.id = item.id
    setSeachCondition('rentalduration', item.id)
}

//性别
let genderData = reactive([{ title: '不限', id: 0 }, { title: '女', id: 1 }, { title: '男', id: 2 }])
let gender = reactive({ id: 0 })
//设置性别
let setGender = (item) => {
    gender.id = item.id
    setSeachCondition('gender', item.id)
}

//发布时间
let releaseTime = reactive([{ title: '不限', id: 0 }, { title: '三天', id: 'triduum' }, { title: '一周', id: 'hebdomad' }, { title: '一个月内', id: 'onemonth' }, { title: '两个月内', id: 'twomonth' }, { title: '三个月内', id: 'trimester' }])
let releaseObj = reactive({ id: 0 })

//设置发布时间
let setReleaseObj = (item) => {
    releaseObj.id = item.id
    setSeachCondition('publish', item.id)
}

//其他
let otherData = ref([{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }])
let otherCheck = reactive({ list: [] })

//设置其他
let setOtherCheck = (data) => {
    setSeachCondition('', data)
}

//清除筛选
let cleanSelect = () => {
    // cleanRent()
    otherCheck['list'] = []
    releaseObj.id = 0
    gender.id = 0
    hireDate.id = 0
    hireDate.title = ''
    hireTypeObj.id = 0
    hireTypeObj.title = ''
    hireTypeObj.hireId = '不限'
    selectTabCheck.id = '';
    selectTabCheck.title = '不限'
    selectTabCheck.data = [];
    selectData.data = []
    schoolSelectObj.id = ''
    schoolSelectObj.title = '不限'
    rentObj.min = ''
    rentObj.max = ''
    // setCheckData([])
}

//查找数据
let getAddressListId = (id, type) => {
    let data = null
    let checkList = type === 'location' ? list : type === 'types' ? hireTypeArr : type === 'school' ? store.state.seachTypeData[0].where : ''
    let dataId = type === 'types' ? id.substring(0, 1) : id
    checkList.map(res => {
        if (res.id == dataId) {
            if (type === 'types') {
                data = getHireType(res.hireType, id)
            } else {
                data = res
            }
        }
    })
    return data
}

//查找出租类型
let getHireType = (data, id) => {
    // console.log(data)
    let obj = null
    data.map(res => {
        if (res.id == id) obj = res
    })
    return obj
}

//解数据
let deconstructionData = (data = {}) => {
    //第一个为type  
    //type第一个参数为一级区域  第二个参数为二级区域
    let seachData = {}
    let key = Object.keys(data)
    key.map((res, index) => {
        if (index === 0) {//类型
            seachData['type'] = res
            seachData['selectData'] = seachData['type'] === 'location' ? data[res].split(',') : seachData['type'] === 'types' ? getAddressListId(data[res], 'types') : seachData['type'] === 'school' ? getAddressListId(data[res], 'school') : ''
        }
        if (index === 1) {//类型参数
            if (seachData['type'] === 'location') {
                let address = getAddressListId(data[res], 'location')
                seachData['areaItem'] = {}
                seachData['areaItem'].id = address.id
                seachData['areaItem'].name = address.name
                seachData['areaItem'].data = address.data
            }
        }
        if (index === 2) {
            seachData['cotenancy'] = res
            seachData['cotenancyData'] = getAddressListId(data[res], 'types')
        }
    })
    return seachData
}

let deconstructionSeachData = null

//根据路由设置参数
let setRouterQuerySet = ref(true)
let routerQuerySet = () => {
    if (routePath.value === '/seachPage') {
        deconstructionSeachData = routeQuery.data
        deconstructionSeachData.houseingPageType = sessionStorage.getItem('houseingPageType')
    } else {
        deconstructionSeachData = deconstructionData(routeQuery.data)
    }
    //路由参数设置
    if ((deconstructionSeachData.houseingPageType == '1') || (routePath.value === '/intermediaryHousing')) {
        otherData.value = [{ title: '认证中介', id: 'isintermediary' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]
    } else if ((routeQuery.data && routeQuery.data.houseingPageType === '6') || (routePath.value === '/needHousing')) {
        otherData.value = [{ title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]
    } else {
        otherData.value = [{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]
    }
    if (Object.keys(routeQuery.data).length > 0) {
        if (Object.keys(deconstructionSeachData).length === 0) return
        // let data = deconstructionSeachData.areaItem
        if (deconstructionSeachData.type === 'school') {

            selectPosition.value = 'school'
            schoolSelectObj.id = deconstructionSeachData.selectData.id
            schoolSelectObj.title = deconstructionSeachData.selectData.name
            setSeachCondition('school', schoolSelectObj.id)

        } else if (deconstructionSeachData.type === 'types') {

            let type = deconstructionSeachData.selectData.id.toString().substring(0, 1)
            hireTypeObj.id = deconstructionSeachData.selectData.id
            hireTypeObj.title = deconstructionSeachData.selectData.title
            hireTypeObj.hireId = type == 1 ? '合租' : type == 2 ? '整租' : '不限'
            setSeachCondition('types', hireTypeObj.id)

        } else if (deconstructionSeachData.type === 'location') {
            selectTabCheck.id = deconstructionSeachData.areaItem.id;
            selectTabCheck.title = deconstructionSeachData.areaItem.name;
            selectTabCheck.data = deconstructionSeachData.areaItem.data;
            selectData.data = seachAreaId(deconstructionSeachData.selectData)

            if (deconstructionSeachData.cotenancy) {
                let type = deconstructionSeachData.cotenancyData.id.toString().substring(0, 1)
                hireTypeObj.id = deconstructionSeachData.cotenancyData.id
                hireTypeObj.title = deconstructionSeachData.cotenancyData.title
                hireTypeObj.hireId = type == 1 ? '合租' : type == 2 ? '整租' : '不限'
            }

            setSeachCondition('location', deconstructionSeachData.selectData[0] ? deconstructionSeachData.selectData : [deconstructionSeachData.areaItem.id], { type: 'types', id: hireTypeObj.id })
            if (deconstructionSeachData.selectData[0])
                nextTick(() => {
                    setCheckBoxData(deconstructionSeachData.selectData)//设置地区选项

                })
        }
    }
    setRouterQuerySet.value = false
}

watchEffect(() => {
    configData.data = store.state.indexData.config
    if (configData.data) {
        hireTypeArr[1].hireType = setHireTypeArr(store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : [], 1)
        hireTypeArr[2].hireType = setHireTypeArr(store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : [], 2)
        // console.log('route', route)
        if (setRouterQuerySet.value) {
            setRegionList()//设置地区数据
            setSchoolData()//设置学校数据
        }
    }
})

defineExpose({
    cleanSelect,
    routerQuerySet
})
</script>
<script>
export default {
    props: {

    }
}
</script>
<style scoped>
.dis-f {
    display: flex;
}

.jus-x {
    justify-content: center;
}

.al-item {
    align-items: center;
}

.s-w-100 {
    width: 100%;
}

.bor-r {
    border-right: 1px dashed #ebebeb;
}

.s-w-50 {
    width: 50%;
}

img {
    object-fit: contain;
}

.pad-t-b-15 {
    padding: 15px 0;
}

.pd-10 {
    padding: 10px;
}

.bor-b-das {
    border-bottom: 1px dashed #ebebeb;
}

.housing-pd {
    padding: 5px 0 25px 0;
}

.pd-t-25 {
    padding-top: 25px;
}

.housing-pd-25 {
    padding: 0 25px;
}

.jus-bet {
    justify-content: space-between;
}

.dropdown-text {
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #7F7F7F;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;

    .type-icon {
        width: 6px;
        height: 14px;
        background: inherit;
        background-color: rgba(80, 227, 194, 1);
        border: none;
        border-radius: 3px;
    }
}

.el-dropdown-menu {
    width: 150px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-color: rgba(235, 235, 235, 1);
    border-radius: 10px;
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}

.dropdown-check-text {
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 14px;
    color: #000000;
}

.select-box {
    padding: 20px 24px 0px 25px;

    .needHousing-box {
        height: 50px;
    }

    .select-tab-info {
        position: relative;
        margin-top: 5px;

        .school-info-box {
            position: absolute;
            top: 5px;
            left: 0;
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            padding: 5px 0px;

            .school-carousel-box {
                height: 100%;
                padding: 0 40px;
                display: flex;
                align-items: center;

                .mg-r-15 {
                    margin-right: 15px;
                }

                .carousel-info-box {
                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 14px;
                    color: #7F7F7F;
                    line-height: 20px;
                    cursor: pointer;
                }

                .info-box-check {
                    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                    font-weight: 650;
                    font-style: normal;
                    font-size: 14px;
                    color: #000000;
                }
            }

            .lef-btn {
                width: 30px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-right: 1px dashed #ebebeb;
                border-left: 1px solid #ebebeb;
                border-top: 1px solid #ebebeb;
                border-bottom: 1px solid #ebebeb;
                background: #fff;
                border-radius: 10px 0 0 10px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 66;

                .img {
                    width: 10px;
                    height: 10px;
                    transform: rotate(90deg);
                }
            }

            .right-btn {
                border-left: 1px dashed #ebebeb;
                border-right: 1px solid #ebebeb;
                border-top: 1px solid #ebebeb;
                border-bottom: 1px solid #ebebeb;
                background: #fff;
                border-radius: 0 10px 10px 0;
                position: absolute;
                right: 0;
                top: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 30px;
                height: 50px;
                z-index: 66;

                .img {
                    width: 10px;
                    height: 10px;
                    transform: rotate(270deg);
                }
            }
        }

        .housing-info-box {
            display: flex;
            align-items: center;
            height: 30px;
            position: relative;
            top: 0 !important;
        }

        .info-box {
            position: absolute;
            top: 5px;
            left: 0;
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            padding: 20px;

            .hid-box {
                position: absolute;
                z-index: 666;
                left: 0;
                top: 56px;
                width: 100%;
            }

            .check-text {
                font-family: 'ArialMT', 'Arial', sans-serif;
                font-weight: 600 !important;
                font-style: normal;
                font-size: 13px;
                letter-spacing: normal;
                color: #000 !important;
                vertical-align: none;
                text-align: center;
            }

            .check-none {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                color: #7F7F7F;
                line-height: 20px;
                vertical-align: none;
                text-align: center;
                line-height: normal;
                text-transform: none;
                margin-right: 30px;
                cursor: pointer;

                .check-data {
                    width: 24px;
                    height: 16px;
                    background: inherit;
                    background-color: rgba(0, 0, 0, 1);
                    border: none;
                    border-radius: 13px;
                    -moz-box-shadow: none;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                    color: #FFFFFF;
                    line-height: 16px;
                    padding: 0 5px;
                }

                .img {
                    width: 10px;
                    height: 10px;
                    margin-left: 10px;
                }
            }
        }

        .img {
            width: 459px;
            height: 55px;
        }
    }

    .tab-title {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #B5B5B5;
        text-align: left;
        height: 30px;
        line-height: 30px;
        margin-right: 20px;
        width: 70px;
    }

    .info-bor-b {
        border-bottom: 1px dashed #ebebeb;
    }

    .need-housing-box {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #7F7F7F;
        text-align: center;
        height: 50px;
    }

    .tab-text {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #7F7F7F;
        text-align: center;
        padding-bottom: 15px;
    }

    .pd-t-20 {
        padding-top: 20px;
    }

    .select-btn-box {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #7F7F7F;
        text-align: center;
        padding-bottom: 20px;
    }

    .btn {
        padding: 5px 10px;
        height: 30px;
        display: flex;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        border-radius: 10px;
        margin-right: 10px;
        text-align: center;
        cursor: pointer;
        border: 1px solid transparent;
    }

    .btn:hover {
        border: 1px solid rgba(235, 235, 235, 1)
    }

    .dropdown-btn:hover {
        border: 1px solid rgba(235, 235, 235, 1);
    }

    .dropdown-btn {
        height: 30px;
        display: flex;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        border-radius: 10px;
        margin-right: 10px;
        text-align: center;
        padding: 5px 10px;
        cursor: pointer;
        border: 1px solid transparent;

        .mg-l-30 {
            margin-left: 30px !important;
        }

        .img {
            width: 10px;
            height: 10px;
            margin-left: 10px;
        }
    }

    .min-btn {
        padding: 5px 10px;
    }

    .btn-check {
        color: #50E3C2 !important;
        border: 1px solid #50E3C2 !important;
        background: #eefcf9;
    }

    .select-num {
        padding: 0px 10px;
        background: inherit;
        background-color: rgba(80, 227, 194, 1);
        border: none;
        border-radius: 13px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #FFFFFF;
    }
}

.rent-box {
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #555555;
    width: 455px;

    .clean-btn {
        width: 96px;
        height: 30px;
        background: inherit;
        background-color: rgba(246, 246, 246, 1);
        border: none;
        border-radius: 50px;
        font-family: 'ArialMT', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        letter-spacing: normal;
        color: #333333;
        cursor: pointer;

        .img-box {
            width: 14px;
            height: 14px;
            margin-right: 5px;
            border-radius: 50%;
            position: relative;
        }
    }

    .tab-icon {
        margin: 0 10px;
    }

    .unit-box {
        margin-left: 10px;
    }

    .input {
        width: 100px;
        height: 40px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(179, 179, 179, 1);
        border-radius: 10px;
        padding: 0 10px;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #000000;
    }
}

.btm-list {
    padding: 25px 20px;
    display: flex;
    justify-content: space-between;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    color: #555555;
    font-size: 15px;

    .btm-btn {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #333333;
        margin-left: 15px;

        .img {
            width: 8px;
            height: 8px;
            margin-left: 8px;
            cursor: pointer;
        }
    }

    .count {
        font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
        font-weight: 700;
        color: #000000;
        margin: 0 5px;
    }

    .sort-text {
        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
        font-weight: 650;
        font-style: normal;
        font-size: 14px;
        color: #000000;
        text-align: center;
        cursor: pointer;
    }

    .img {
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }
}

/deep/ .el-dropdown-menu__item {
    --el-dropdown-menuItem-hover-color: #7F7F7F;
    --el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
}

/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 14px;
    color: #000000;
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background: #50e3c2;
    border-color: #50e3c2;
}
</style>
  