<template>
    <div class="dis-f jus-x al-item" style="position: relative;z-index: 333;">
        <div class="body-maxWidth">
            <div class="s-w-100 seach-box-bg">
                <div class="seach-box">
                    <div class="top-seach dis-f al-item">
                        <div style="position: absolute;left: -8px;top: 20px;">
                            <div class="location-box dis-f jus-x al-item">
                                <img src="../../assets/homeImage/addressImg.png" class="img" alt="">
                                香港
                            </div>
                            <div class="triangle"></div>
                        </div>
                        <div class="dis-f al-item pos-r">
                            <el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList'
                                @blur="setHistoryShow" @focus="setHistoryShow" style="height:48px;width:460px;"></el-input>
                            <div class="seach-btn dis-f al-item jus-x" @click="seachList">
                                <img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
                                搜索
                            </div>
                            <div class="seach-hiosory-box" :class="{ 'seach-history-h': historyShow }">
                                <div class="seach-history-info">
                                    <div>
                                        <div class="title">
                                            历史搜索
                                        </div>
                                        <div class="info-box">
                                            <div v-for="(item, i) in historyArr.data" :key="i" class="btn"
                                                @click="setSeachVal(item)">
                                                {{ item }}
                                            </div>
                                        </div>
                                    </div>
                                    <div style="margin-top:30px;">
                                        <div class="title">
                                            热门推荐
                                        </div>
                                        <div class="info-box">
                                            <div v-for="(item, i) in hotArr.data" :key="i" class="btn"
                                                @click="setHotSeach(item)">
                                                {{ item }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="tool-btn dis-f jus-x al-item map-btn">
                            <img src="../assets/homeImage/mapImg.png" class="img" alt="">
                            地图找房
                        </div> -->
                        <div class="tool-btn dis-f jus-x al-item add-btn">
                            <img src="../../assets/homeImage/addBtn.png" class="img" alt="">
                            发布房源
                        </div>
                        <div class=" dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'">
                            <img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
                            <img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
                            <img src="../../assets/homeImage/personAuthentication.svg" class="btn-qrcode" alt="">
                        </div>
                        <div class=" dis-f jus-x al-item authentication-btn intermediary-btn"
                            v-if="routePath === '/intermediaryHousing'">
                            <img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="">
                            <img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="">
                            <img src="../../assets/homeImage/intermediaryAuthentication.svg" class="btn-qrcode" alt="">
                        </div>
                    </div>
                    <div class="seach-info-box dis-f" v-if="routePath === '/'">
                        <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"
                            :checkBtn="checkBtn">
                        </seachInfo>
                        <seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"
                            :checkBtn="checkBtn"></seachInfo>
                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"
                            :checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"
                            :checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
                    </div>
                    <!--  -->
                    <div
                        v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
                        <selectTabBox :setSeachCondition="setSeachConditions"></selectTabBox>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref, watchEffect, reactive, defineProps } from 'vue';
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import { useRouter } from 'vue-router';
import store from '../../store/index';
import api from "../../utils/api";

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

let getDataList = props.getDataList

//搜索框
let historyShow = ref(false);
let setHistoryShow = () => {
    if (historyShow.value) {
        setTimeout(() => {
            historyShow.value = !historyShow.value
        }, 500);
        return
    }
    historyShow.value = !historyShow.value
}
let seachSchoolBtn = reactive({ data: [] });//学校地区
let hireType = {};//整租
let allHireType = {};//合租
let seachArea = {};//区域找房
let historyArr = reactive({ data: [] })//历史查找记录
let hotArr = reactive({ data: [] })
let seachAllType = reactive({
    keyword: '',
    location: []
})


//获取区域下列数据
let getLocationData = (data) => {
    for (let item in data) {
        if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
        if (item.length > 1) {
            seachArea.data[item.substring(0, 1) - 1].data.push({
                title: data[item],
                id: item
            })
        }
    }
}

//监听路由
const route = useRouter()
let routePath = ref('')
routePath.value = route.currentRoute.value.path
// console.log(route)

watchEffect(() => {
    seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
    hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
    allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
    seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
    if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location)
    hotArr.data = store.state.indexData.hotSearcheWords
})

//获取历史搜索记录
historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []

//搜索数据
let seachList = (item) => {
    // console.log(123)
    let string = seachAllType.keyword
    if (!string.replace(/\s/g, "")) return
    if (historyArr.data.indexOf(seachAllType.keyword) === -1) {
        historyArr.data.push(seachAllType.keyword)
    }
    localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
    route.push({
        path: '/seachPage',
        query: {
            keyword: seachAllType.keyword,
            isNeedHousing:routePath.value === '/needHousing'
        }
    })
    // if (routePath.value === '/') {
    //     route.push({
    //         path: '/seachPage',
    //         query: {
    //             keyword: seachAllType.keyword
    //         }
    //     })
    // }else{
    //     setSeachConditions()
    // }

    // getDataList(seachAllType)
}

//设置搜索数据
let setSeachConditions = (type, data) => {
    if (type === 'rent') {
        seachAllType['rent_min'] = data.min
        seachAllType['rent_max'] = data.max
    } else if (type !== '') {
        seachAllType[type] = data
    } else if (type === '') {
        data.indexOf('isverified') !== -1 ? seachAllType['isverified'] = 1 : seachAllType['isverified'] = 0
        data.indexOf('iselevator') !== -1 ? seachAllType['iselevator'] = 1 : seachAllType['iselevator'] = 0
        data.indexOf('issunshinearea') !== -1 ? seachAllType['issunshinearea'] = 1 : seachAllType['issunshinearea'] = 0
    }
    if (type === 'school') {
        seachAllType.location = []
    }
    if (type === 'location') {
        seachAllType.school = ''
    }
    console.log('seachAllType', seachAllType)
    getDataList(seachAllType)
}

//点击历史搜索记录
let setSeachVal = (item) => {
    seachAllType.keyword = item
    seachList()
    // getDataList(seachAllType)
}

//点击热门地区
let setHotSeach = (item) => {
    seachAllType.keyword = item
    if (historyArr.data.indexOf(item) === -1) historyArr.data.push(item)
    localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
    getDataList(seachAllType)
}

//点击选项
let checkBtn = (data, type, areaItem) => {
    console.log(data, type, areaItem)
    getDataList(type, data, areaItem)
}


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

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

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

.pos-r {
    position: relative;
}

.body-maxWidth {
    width: 1200px;
    min-width: 1200px;
}

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

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

.authentication-btn:hover .btn-qrcode {
    display: block;
}

.btn-qrcode {
    width: 390px;
    height: 612px;
    position: absolute;
    right: -14px;
    top: 45px;
    z-index: 333;
    display: none;
}

.seach-box-bg {
    background: #d7d7d7 !important;
    background: inherit;
    border: none;
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    font-size: 14px;
    margin-top: 20px;

    .seach-box {
        background: #FFFFFF;
        transform: translate(0, 5px);
        border-radius: 16px;

        .top-seach {
            padding: 20px;
            position: relative;
            justify-content: end;
            border-bottom: 1px solid #ebebeb;

            .intermediary-btn {
                background: rgba(241, 245, 247, 1);
            }

            .authentication-btn {
                width: 160px;
                height: 48px;
                background: inherit;
                background-color: rgba(244, 243, 255, 1);
                border: none;
                border-radius: 8px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                margin-left: 20px;
                cursor: pointer;
                position: relative;

                .text-img {
                    width: 100px;
                    height: 26px;
                }

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

            .seach-history-h {
                max-height: 375px !important;
                transition: max-height 0.5s ease-in-out;
            }

            .seach-hiosory-box {
                position: absolute;
                top: 55px;
                z-index: 99;
                max-height: 0;
                overflow: hidden;
            }

            .seach-history-info {
                width: 560px;
                background: inherit;
                background-color: rgba(255, 255, 255, 1);
                box-sizing: border-box;
                border-width: 1px;
                border-style: solid;
                border-color: rgba(235, 235, 235, 1);
                border-radius: 16px;
                -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);
                padding: 20px 25px;

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

                .info-box {
                    display: flex;
                    flex-wrap: wrap;
                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 15px;
                    color: #555555;
                    text-align: left;

                    .btn {
                        margin: 20px 30px 0 0;
                        cursor: pointer;
                    }
                }
            }

            .location-box {
                width: 80px;
                height: 40px;
                background: inherit;
                background-color: rgba(68, 68, 68, 1);
                border: none;
                border-radius: 8px;
                border-top-left-radius: 0px;
                border-bottom-left-radius: 0px;
                -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                font-weight: 650;
                font-style: normal;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 48px;
                position: absolute;
                z-index: 666;
            }

            .triangle {
                border: 7px solid;
                border-color: transparent #000 transparent transparent;
                width: 0;
                height: 0;
                position: absolute;
                bottom: -47px;
                left: -7px;
            }

            .seach-btn {
                width: 100px;
                height: 48px;
                background: inherit;
                background-color: rgba(98, 177, 255, 1);
                border: none;
                border-right: 0px;
                border-radius: 0 8px 8px 0;
                line-height: 48px;
                cursor: pointer;
                transform: translateX(-3px);
            }

            .img {
                width: 20px;
                height: 20px;
                object-fit: contain;
                margin-right: 5px;
            }

            .map-btn {
                background: rgba(80, 227, 194, 1);
                margin-left: 20px;
            }

            .add-btn {
                background: rgba(253, 218, 85, 1);
                margin-left: 20px;
                cursor: pointer;
            }

            .tool-btn {
                width: 160px;
                height: 48px;
                border: none;
                border-radius: 8px;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 16px;
                color: #000000;
                line-height: 48px;
            }
        }

        .seach-info-box {
            padding: 20px 10px;
            justify-content: space-around;
            flex-wrap: wrap;
        }
    }
}
</style>
  