<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 seek-input">
                            <el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter="seachList" @blur="setHistoryShow" @focus="setHistoryShow" style="height: 40px; width: 460px; background: rgba(246, 246, 246, 1); border-radius: 8px;"></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 }">
                                <el-scrollbar height="375px">
                                    <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 }} <img src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" class="img" alt="" /></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>
                                </el-scrollbar>
                            </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" :class="{ 'mg-l-10': routePath === '/' }" style="position: relative;">
                            <img style="margin-right: 5px;" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
                            发布房源
                            <choosing-identity></choosing-identity>
                        </div>
                        <el-popover placement="bottom-end" popper-class="consult-popover flexcenter" :width="300" trigger="hover" :show-arrow="false" popper-style="background-color:transparent;border: none;box-shadow: none;padding:0;">
                            <template #reference>
                                <div class="tool-btn consult-btn flexcenter" v-if="routePath == '/needHousing'">
                                    <img class="consult-icon" src="@/assets/img/publicImage/consult-icon.png" />
                                    咨询方同学
                                </div>
                            </template>
                            <div class="consult-pop flexacenter">
                                <div class="consult-title flexacenter">
                                    欢迎联系 <b>{{ wechat["nickname"] }}</b> 咨询公寓
                                </div>
                                <div class="consult-QRcode flexcenter">
                                    <img class="consult-QRcode-img" :src="wechat['personalqrcode']" />
                                </div>
                                <div class="consult-hint">微信扫码添加好友</div>
                                <!-- <div class="consult-remark flexacenter">备注：<b>寄托租房</b></div> -->
                            </div>
                        </el-popover>

                        <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="" />
                            <div class="btn-qrcode">
                                <authentication-info :type="1"></authentication-info>
                            </div>
                        </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="" />
                            <div class="btn-qrcode">
                                <authentication-info :type="2"></authentication-info>
                            </div>
                        </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>
                    <!--  -->
                    <!-- {{ pitchValue }} -->

                    <div class="option-area flexflex" v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
                        <!-- <selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation"></selectTabBox> -->
                        <div class="option-left">
                            <!-- 地理位置时除 求房源 显示的 -->
                            <div class="option-item flexflex" v-if="routePath !== '/needHousing'">
                                <div class="option-title">地理位置</div>
                                <div class="option-box flexflex flex1" style="flex-direction: column;">
                                    <div class="geography-tab flexacenter">
                                        <div class="geography-item flexcenter" :class="{ 'pitch': geographicState == 'area' }" @click="setSelectPosition('area')">按区域</div>
                                        <div class="geography-item flexcenter" :class="{ 'pitch': geographicState == 'school' }" @click="setSelectPosition('school')">按学校</div>
                                    </div>
                                    <!-- 区域的内容 -->
                                    <div class="geography-box" v-if="geographicState == 'area'">
                                        <img class="geography-bj" src="@/assets/homeImage/checkBG.svg" />
                                        <div class="geography-list flexacenter">
                                            <div class="geography-item flexacenter" :class="{ pitch: 0 == selectDistrictPitchShow }" @click="selectOption('location', [])">不限</div>
                                            <div class="geography-item flexacenter" :class="{ pitch: selectDistrictPitchShow == index }" v-for="(item, index) in locationObj" :key="index" @click="selectOption('location', index)">
                                                {{ item.name }}
                                                <template v-if="districtUnlimited(index)">>&nbsp;不限</template>
                                                <template v-if="districtQuantity(index)">
                                                    >&nbsp;
                                                    <div class="select-num">{{ pitchValue["location"].length }}</div>
                                                </template>
                                                <img class="item-icon" src="@/assets/homeImage/selectInfoTabIcon.svg" />
                                                <img class="item-icon item-icon-pitch" src="@/assets/homeImage/selectImg.svg" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="district-pop" v-if="locationTemp.state" style="top: 120px;">
                                        <div class="district-unlimited flexacenter" :class="{ 'pitch': locationTemp.value.length == 0 }" @click="selectDistrict(0)">
                                            <img class="unlimited-yes" src="@/assets/homeImage/topTitleIcon.svg" />
                                            <div class="unlimited-no"></div>
                                            不限
                                        </div>
                                        <div class="district-option">
                                            <el-checkbox-group v-model="locationTemp.value">
                                                <el-checkbox :label="i" v-for="(item, i) in locationObj[locationTemp.key]?.children" :key="i">{{ item }}</el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                        <div class="district-btn-box flexacenter">
                                            <div class="district-btn flexcenter district-cancel" @click="selectDistrict(1)">取消</div>
                                            <div class="district-btn flexcenter district-ok" @click="selectDistrict()">选好了</div>
                                        </div>
                                    </div>
                                    <!-- 学校内容 -->
                                    <div class="school-info-box" v-show="geographicState === 'school'">
                                        <div class="lef-btn item-btn flexcenter" @click="prevSchoolData">
                                            <img v-if="schoolPages === 0" class="img" src="@/assets/homeImage/selectInfoTabIcon.svg" />
                                            <img v-else class="img" src="@/assets/homeImage/selectImg.svg" />
                                        </div>
                                        <div class="right-btn item-btn flexcenter" @click="nextSchoolData">
                                            <img v-if="schoolPages === shcoolData.length - 1" class="img" src="@/assets/homeImage/selectInfoTabIcon.svg" />
                                            <img v-else class="img" src="@/assets/homeImage/selectImg.svg" />
                                        </div>
                                        <el-carousel :autoplay="false" arrow="never" :loop="false" height="50px" indicator-position="none" class="s-w-100" ref="schoolData" :initial-index="schoolPages" :key="pitchValue.school">
                                            <el-carousel-item v-for="(item, i) in shcoolData" :key="i">
                                                <div class="school-carousel-box">
                                                    <div v-for="items in item" :key="items.id" @click="selectOption('school', items.id)" class="carousel-info-box" :class="{ 'pitch': pitchValue.school == items.id }">{{ items.name }}</div>
                                                </div>
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div>
                                </div>
                            </div>
                            <div class="option-item flexacenter" style="height: 96px;" v-else>
                                <div class="option-title">目标区域</div>
                                <div class="option-box flexflex flex1">
                                    <div class="item flexcenter" :class="{ pitch: 0 == selectDistrictPitchShow }" @click="selectOption('location', [])">不限</div>
                                    <div v-for="(item, index) in locationObj" :key="index" class="item flexcenter location-item" :class="{ pitch: selectDistrictPitchShow == index }" @click="selectOption('location', index)">
                                        {{ item.name }}
                                        <template v-if="districtUnlimited(index)">>&nbsp;不限</template>
                                        <template v-if="districtQuantity(index)">
                                            >&nbsp;
                                            <div class="select-num">{{ pitchValue["location"].length }}</div>
                                        </template>

                                        <img class="item-icon" src="@/assets/homeImage/selectInfoTabIcon.svg" />
                                        <img class="item-icon item-icon-pitch" src="@/assets/homeImage/dropDownIcon.svg" />
                                    </div>
                                    <div class="district-pop" v-if="locationTemp.state">
                                        <div class="district-unlimited flexacenter" :class="{ 'pitch': locationTemp.value.length == 0 }" @click="selectDistrict(0)">
                                            <img class="unlimited-yes" src="@/assets/homeImage/topTitleIcon.svg" />
                                            <div class="unlimited-no"></div>
                                            不限
                                        </div>
                                        <div class="district-option">
                                            <el-checkbox-group v-model="locationTemp.value">
                                                <el-checkbox :label="i" v-for="(item, i) in locationObj[locationTemp.key]?.children" :key="i">{{ item }}</el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                        <div class="district-btn-box flexacenter">
                                            <div class="district-btn flexcenter district-cancel" @click="selectDistrict(1)">取消</div>
                                            <div class="district-btn flexcenter district-ok" @click="selectDistrict()">选好了</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="option-item flexflex">
                                <div class="option-title flexacenter">{{ routePath !== "/needHousing" ? "出租" : "求租" }}方式</div>
                                <div class="option-box flexacenter flex1">
                                    <div class="item flexcenter" :class="{ pitch: 0 == pitchValue.types }" @click="selectType('')">不限</div>

                                    <template v-for="(item, index) in typeObj" :key="index">
                                        <el-dropdown popper-class="popover-sort" trigger="click">
                                            <div class="item flexcenter" :class="{ pitch: Math.floor(pitchValue.types) == index }" @click="selectType(index, true)">
                                                {{ item.name }}

                                                <div class="select-type-text" v-if="pitchValue.types">&nbsp; > &nbsp;{{ pitchValue.types == index ? "不限" : typeKey[pitchValue.types] }}</div>

                                                <img class="item-icon" src="@/assets/homeImage/selectInfoTabIcon.svg" />
                                                <img class="item-icon item-icon-pitch" style="margin-left: 30px;" src="@/assets/homeImage/dropDownIcon.svg" />
                                            </div>
                                            <template #dropdown>
                                                <el-dropdown-menu class="sort-box">
                                                    <el-dropdown-item class="sort-item" :class="{ pitch: index == pitchValue.types }" @click="selectType(index)">不限</el-dropdown-item>
                                                    <el-dropdown-item class="sort-item" :class="{ pitch: i == pitchValue.types }" @click="selectType(i)" v-for="(ite, i) in typeObj[Math.floor(pitchValue.types)]?.children" :key="i">{{ ite }}</el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </template>
                                </div>
                            </div>

                            <div class="option-item flexflex">
                                <div class="option-title flexacenter">租金{{ routePath !== "/needHousing" ? "" : "预算" }}</div>
                                <div class="option-box flexacenter flex1 option-input-box">
                                    <div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" placeholder="请输入" /><span style="font-size: 18px;">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" placeholder="请输入" />HK$/月</div>

                                    <div class="eliminate flexcenter" @click="clearingAmount" v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
                                        <img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg" />
                                        清除金额
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="option-right">
                            <div class="option-item flexflex">
                                <div class="option-title">租期</div>
                                <div class="option-box flexflex flex1">
                                    <div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['leaseterm'] }" v-for="item in leasetermList" @click="selectOption('leaseterm', item.id)" :key="item.id">{{ item["name"] }}</div>
                                </div>
                            </div>
                            <div class="option-item flexflex">
                                <div class="option-title">{{ routePath !== "/needHousing" ? "性别要求" : "求租者性别" }}</div>
                                <div class="option-box flexflex flex1" :key="pitchValue['gender']">
                                    <div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['gender'] }" v-for="item in genderList" @click="selectOption('gender', item.id)" :key="item.id">{{ item["name"] }}</div>
                                </div>
                            </div>
                            <div class="option-item flexflex">
                                <div class="option-title">发布时间</div>
                                <div class="option-box flexflex flex1" :key="pitchValue['publish']">
                                    <div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['publish'] }" v-for="item in publishList" @click="selectOption('publish', item.id)" :key="item.id">{{ item["name"] }}</div>
                                </div>
                            </div>
                            <div class="option-item flexflex">
                                <div class="option-title">其他</div>
                                <div class="option-box flexacenter flex1">
                                    <div class="item-checkbox flexacenter item-checkbox-housing" v-if="routePath == '/personHousing'" :class="{ pitch: pitchValue.isverified == 1 }" @click="selectCheckboxOption('isverified')">
                                        <span class="item-checkbox__inner"></span>
                                        认证房源
                                    </div>
                                    <div class="item-checkbox flexacenter" v-if="routePath == '/intermediaryHousing'" :class="{ pitch: pitchValue.isintermediary == 1 }" @click="selectCheckboxOption('isintermediary')">
                                        <span class="item-checkbox__inner"></span>
                                        认证中介
                                    </div>
                                    <div class="item-checkbox flexacenter" :class="{ pitch: pitchValue.iselevator == 1 }" @click="selectCheckboxOption('iselevator')">
                                        <span class="item-checkbox__inner"></span>
                                        有电梯
                                    </div>
                                    <div class="item-checkbox flexacenter" :class="{ pitch: pitchValue.issunshinearea == 1 }" @click="selectCheckboxOption('issunshinearea')">
                                        <span class="item-checkbox__inner"></span>
                                        有阳台
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="screen-footer flexacenter">
                        <div class="screen-footer-left flexacenter">
                            <div class="quantity flexacenter">
                                共 <b class="b">{{ count }}</b> 条{{ routePath === '/personHousing' ? '个人房源' : routePath === '/intermediaryHousing' ? '中介房源' : routePath === '/needHousing' ? '求房源' : '' }}
                            </div>
                            <template v-if="pitchValue['location'].length != 0">
                                <span style="color: rgb(170, 170, 170); margin: 0px 15px;">|</span>
                                <div class="screen-location flexacenter">
                                    <div class="screen-location-name">{{ locationKey[selectDistrictPitchShow || 1] }}:</div>
                                    <template v-if="pitchValue['location'][0] == selectDistrictPitchShow">
                                        <div class="screen-location-list flexacenter">
                                            <div class="screen-location-item flexacenter">
                                                不限
                                                <img class="screen-location-img" @click="closeLocationKey(0)" src="@/assets/homeImage/closeIcon.svg" />
                                            </div>
                                        </div>
                                    </template>
                                    <div v-else class="screen-location-list flexacenter">
                                        <div class="screen-location-item flexacenter" v-for="(item, index) in pitchValue['location']" :key="index">
                                            {{ locationKey[item] }}
                                            <img class="screen-location-img" @click="closeLocationKey(index)" src="@/assets/homeImage/closeIcon.svg" />
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="screen-footer-rigth">
                            <el-dropdown popper-class="popover-sort" trigger="click">
                                <div class="sort-btn flexacenter">
                                    <template v-for="item in orderbyList">{{ item.type == pitchValue.orderby ? item.name : "" }}</template>
                                    <img class="sort-icon" src="@/assets/homeImage/sortIcon.png" />
                                </div>
                                <template #dropdown>
                                    <el-dropdown-menu class="sort-box">
                                        <el-dropdown-item class="sort-item" @click="selectOption('orderby', item.type)" v-for="item in orderbyList" :key="item.type">
                                            <div :class="{ pitch: item.type === pitchValue.orderby }">{{ item.name }}</div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, toRefs, watchEffect, reactive, defineProps, inject, getCurrentInstance, watch, nextTick } from "vue"
import { useStore } from "vuex"

import seachInfo from "../indexSeachInfo/indexSeachInfo.vue"
import selectTabBox from "../selectTabBox/selectTabBox.vue"
import choosingIdentity from "@/components/edit/choosingIdentity.vue"
import { useRouter } from "vue-router"
import store from "../../store/index"
import api from "../../utils/api"
import authenticationInfo from "./authenticationInfo.vue"
const usestore = useStore()

const { wechat } = toRefs(usestore.state)

const { proxy } = getCurrentInstance()

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: [],
    orderby: "timestamp",
})

// const pitchValue = inject("pitchValue") || {}

let pitchValue = reactive({
    location: [],
    school: "",
    rent_min: "",
    rent_max: "",
    leaseterm: "",
    roomtype: 0,
    gender: 0,
    iselevator: 0,
    issunshinearea: 0,
    orderby: "timestamp",
    publish: "",
    types: "",
})

onMounted(() => {
    if (routePath.value === "/personHousing") {
        pitchValue = { ...pitchValue, ...store.state.personPitchValue }
        const queryParams = getQueryParams()
        if (queryParams["location"]) {
            pitchValue["school"] = ""
            const arr = queryParams["location"].split(",")
            pitchValue["location"] = arr
            // selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
        } else pitchValue = Object.assign({}, pitchValue, queryParams)
    } else if (routePath.value === "/intermediaryHousing") pitchValue = { ...pitchValue, ...store.state.intermediaryPitchValue }
    else pitchValue = { ...pitchValue, ...store.state.needPitchValue }

    if (routePath.value !== "/needHousing" && pitchValue["school"]) {
        pitchValue["location"] = []
        geographicState.value = "school"
    }

    if (pitchValue["location"].length > 0) selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)

    getDataList(pitchValue)
})

// 获取URL中的查询参数
const getQueryParams = () => {
    const queryParams = {}
    const urlParams = new URLSearchParams(window.location.search)

    for (const [key, value] of urlParams) {
        if (value) queryParams[key] = value
    }

    return queryParams
}

//获取区域下列数据
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.meta.path

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 => {
    let string = seachAllType.keyword
    if (!string.replace(/\s/g, "")) return
    if (historyArr.data.indexOf(seachAllType.keyword) === -1) {
        historyArr.data.unshift(seachAllType.keyword)
    }
    if (historyArr.data.length > 10) historyArr.data.splice(historyArr.data.length - 1, 1)
    localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
    sessionStorage.setItem("houseingPageType", routePath.value === "/needHousing" ? "6" : routePath.value === "/intermediaryHousing" ? "1" : routePath.value === "/personHousing" ? "0" : "0")
    route.push({
        path: "/seachPage",
        query: {
            keyword: seachAllType.keyword,
            isNeedHousing: routePath.value === "/needHousing",
        },
    })
}

//设置点击一级区域  特殊的 选中区域的不限  需要修改值 并且去掉学校值
let setLocation = (type, data, isupdate = true) => {
    seachAllType[type] = data
    seachAllType["school"] = ""
    if (isupdate) getDataList(seachAllType)
}

//设置搜索数据  type: 类型  data: 数据  second: 二级数据
let setSeachConditions = (type, data, second = null) => {
    console.log("赋值前的数据：", seachAllType)
    if (type === "rent") {
        seachAllType["rent_min"] = data.min
        seachAllType["rent_max"] = data.max
    } else if (type !== "") {
        // 这里是正常的数据 直接赋值
        seachAllType[type] = data
    } else if (type === "") {
        // 电梯 阳台 认证 那些是传数组的
        data.indexOf("isintermediary") !== -1 ? (seachAllType["isintermediary"] = 1) : (seachAllType["isintermediary"] = 0)
        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 = ""

    if (second) {
        seachAllType[second.type] = second.id
    }
    console.log(type, data, second)
    console.log("保存前的处理数据：", seachAllType)

    getDataList(seachAllType)
}

//点击历史搜索记录
let setSeachVal = item => {
    seachAllType.keyword = item
    seachList()
    // getDataList(seachAllType)
}
//删除历史记录
let deleteSeachVal = i => {
    historyArr.data.splice(i, 1)
    localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
}

//点击热门地区
let setHotSeach = item => {
    seachAllType.keyword = item
    if (historyArr.data.indexOf(item) === -1) historyArr.data.unshift(item)
    if (historyArr.data.length > 10) historyArr.data.slice(historyArr.data.length - 1, 1)
    localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
    seachList()
}

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

let locationObj = reactive({}) // 位置配置信息
let locationKey = reactive({}) // 位置配置信息 键值对
let typeObj = reactive({}) // 方式配置信息
let typeKey = reactive({}) // 方式配置信息 键值对

onMounted(() => {
    locationObj = store.state.locationObj
    locationKey = store.state.locationKey
    typeObj = store.state.typeObj
    typeKey = store.state.typeKey
    setSchoolData()
})

//设置区域状态
let setSelectPosition = type => {
    geographicState.value = type

    if (type !== "school") return
    locationTemp.key = 0
    locationTemp.value = []
    locationTemp.state = false
}

//学校区域状态
let schoolSelectObj = reactive({ id: "", title: "不限", page: 0 })
let schoolPages = ref(0) //页数
let shcoolData = reactive([]) // 学校数据

let geographicState = ref("area") // 地理位置tab状态  区域 area 学校 school

let setSchoolData = () => {
    // let arr = routePath.value === "/" ? store.state.seachTypeData[0] && store.state.seachTypeData[0].where : store.state.schoolList
    // if (arr[0] && arr[0].id) arr.unshift({ name: "不限", id: "" })
    let arr = JSON.parse(JSON.stringify(store.state.schoolList)) || []
    arr.unshift({ name: "不限", id: "" })

    let num = 0
    let accumulationWidth = 0
    for (let i = 0; i < arr.length; i++) {
        let width = accumulationWidth + getStrWidth(arr[i].name) + 20
        if (width > 380) {
            num++
            accumulationWidth = getStrWidth(arr[i].name) + 20
        } else accumulationWidth = width

        if (!shcoolData[num]) shcoolData[num] = []
        shcoolData[num].push(arr[i])
    }

    // 判断一下值有没有学校 ，如果有看一下ID是不是在第一页
    if (pitchValue.school) {
        for (let i = 0; i < shcoolData.length; i++) {
            for (let j = 0; j < shcoolData[i].length; j++) {
                if (shcoolData[i][j].id == pitchValue.school) {
                    schoolPages.value = i
                    break
                }
            }
        }
    }
}

// 计算字符串在屏幕的显示宽度
let getStrWidth = str => {
    let width = 0
    let fontSize = 14
    let font = fontSize + "px Arial"
    let canvas = document.createElement("canvas")
    let context = canvas.getContext("2d")
    context.font = font
    width = context.measureText(str).width
    return width
}

//学校轮播组件
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 locationTemp = reactive({
    key: 0,
    value: [],
    state: false,
})

// 目标区域的 选择  type 0 不限 1 取消 2 选择
const selectDistrict = type => {
    // 不限
    if (type == 0) locationTemp.value = []
    else if (type == 1) {
        locationTemp.value = []
        selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)

        locationTemp.key = 0
        locationTemp.state = false
        pitchValue["school"] = ""
    } else {
        // 点击选好了 数组为空代表 选择不限
        if (locationTemp.value.length == 0) locationTemp.value = [selectDistrictPitchShow.value]

        pitchValue["location"] = locationTemp.value
        locationTemp.value = []
        selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)

        pitchValue["school"] = ""
        locationTemp.key = 0
        locationTemp.state = false
        getDataList(pitchValue)
        proxy.$forceUpdate()
    }
}

// 目标区域的选中
let selectDistrictPitchShow = ref("")

// 处理输入筛选金额后
const rentBlur = () => {
    getDataList(pitchValue)
    proxy.$forceUpdate()
}

// 清除筛选的金额
const clearingAmount = () => {
    pitchValue["rent_min"] = ""
    pitchValue["rent_max"] = ""
    getDataList(pitchValue)
    proxy.$forceUpdate()
}

// 租期配置数据
let leasetermList = reactive([
    { name: "不限", id: 0 },
    { name: "一年以上", id: 1 },
    { name: "低于一年", id: 2 },
])

// //性别配置数据
let genderList = reactive([
    { name: "不限", id: 0 },
    { name: "女", id: 1 },
    { name: "男", id: 2 },
])

//发布时间配置数据
let publishList = reactive([
    { name: "不限", id: 0 },
    { name: "三天", id: "triduum" },
    { name: "一周", id: "hebdomad" },
    { name: "一个月内", id: "onemonth" },
    { name: "两个月内", id: "twomonth" },
    { name: "三个月内", id: "trimester" },
])

// 排序的选项
let orderbyList = reactive([
    { name: "最新发布", type: "timestamp" },
    { name: "热门", type: "hotnum" },
    { name: "价格从低到高", type: "rentasc" },
    { name: "价格从高到低", type: "rentdesc" },
])

// 排序弹窗的状态
let orderbyPopoverState = ref(false)

const itemText = ref(null)

// 筛选选中的中转
const selectOption = (key, value) => {
    // 特殊处理 目标区域不等于 0 时  弹窗区域选择框
    if (key == "location" && value != 0) {
        // 再次同一个分区选中  通过 选中的值来判断
        if (Math.floor(pitchValue["location"][0] || 0) == value) {
            // 判断本来就是选择不限的 需要value等于空 不让会乱
            if (pitchValue["location"][0] == value) {
                locationTemp.value = []
            } else {
                locationTemp.value = [...new Set(pitchValue["location"])]
            }
        } else locationTemp.value = [] // 选择其他分区

        locationTemp.key = value
        locationTemp.state = true
        selectDistrictPitchShow.value = value
        return
    } else if (key == "location" && value == 0) {
        // 这里时直接点击 区域的不限的
        locationTemp.state = false
        selectDistrictPitchShow.value = 0
    }

    // 特殊的 学校和区域只能二选一
    if (key == "school") pitchValue["location"] = []
    else if (key == "location") pitchValue["school"] = ""

    nextTick(() => {
        pitchValue[key] = value
        getDataList(pitchValue)
        proxy.$forceUpdate()
    })
}

const selectCheckboxOption = key => {
    pitchValue[key] = pitchValue[key] == 1 ? 0 : 1
    getDataList(pitchValue)
    proxy.$forceUpdate()
}

// 特殊的 方式选中
const selectType = (value, isFirstFloor) => {
    // if (isFirstFloor && Math.floor(pitchValue["types"]) == value) return

    pitchValue.types = value
    if (isFirstFloor) getDataList(pitchValue, true)
    // 请求不要蒙版
    else getDataList(pitchValue)

    proxy.$forceUpdate()
}

// 区域判断不限
const districtUnlimited = index => {
    if (selectDistrictPitchShow.value != index || pitchValue["location"].length == 0) return false
    if (pitchValue["location"].length == 1 && pitchValue["location"][0] == index) return true
}

// 区域判断 显示数量
const districtQuantity = index => {
    if (selectDistrictPitchShow.value != index && pitchValue["location"].length != 0) return false
    // 排除 不限
    if (selectDistrictPitchShow.value == pitchValue["location"][0]) return false
    // 获取 location 值 判断和index 是否相等
    if (Math.floor(pitchValue["location"][0]) == index) return true
    return false
}

// 删除地区底部的选中
const closeLocationKey = index => {
    if (pitchValue.location.length == 1 && pitchValue.location[0] != selectDistrictPitchShow.value) pitchValue.location = [selectDistrictPitchShow.value]
    else pitchValue.location.splice(index, 1)

    getDataList(pitchValue)
    proxy.$forceUpdate()
}

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

defineExpose({
    historyShow,
})
</script>
<style scoped lang="less">
.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 {
    height: 365px;
    position: absolute;
    right: 0;
    top: 58px;
    z-index: 333;
    display: none;
}

.btn-qrcode .bj {
    height: 100%;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2784313725490196);
    border-radius: 10px;
}

.btn-qrcode .QR-code {
    position: absolute;
    width: 100px;
    height: 110px;
    border-radius: 50%;
    bottom: 86px;
    left: 50%;
    transform: translateX(-50%);
}

.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;
    padding-top: 5px;

    .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:hover {
                background: #f4f7f9 !important;
            }
            .intermediary-btn {
                background: rgba(241, 245, 247, 1) !important;
            }

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

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

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

            .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;
                overflow-y: auto;

                .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 :hover .img {
                    display: block;
                }

                .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;

                    .img {
                        width: 8px;
                        height: 8px;
                        position: absolute;
                        top: 6px;
                        right: -8px;
                        cursor: pointer;
                        display: none;
                    }

                    .btn {
                        margin: 10px 30px 0 0;
                        padding: 0 10px 0 0;
                        cursor: pointer;
                        word-wrap: break-word;
                        max-width: 100%;
                        position: relative;
                        flex-wrap: wrap;
                    }
                }
            }

            .location-box {
                width: 64px;
                height: 32px;
                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: -39px;
                left: -7px;
            }

            .seach-btn:hover {
                background: #81c1ff !important;
            }
            .seach-btn {
                width: 32px;
                height: 32px;
                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);
                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 16px;
                color: #000000;
            }

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

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

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

            .mg-l-10 {
                margin-left: 10px;
            }

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

                img {
                    width: 15px;
                    margin-right: 5px;
                }

                &.consult-btn {
                    background: rgba(144, 216, 72, 1);
                    margin-left: 20px;

                    &:hover {
                        opacity: 0.8;
                    }

                    .consult-icon {
                        width: 22px;
                        height: 22px;
                        margin-right: 5px;
                    }
                }
            }
        }

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

::v-deep .el-input__wrapper {
    background: rgba(246, 246, 246, 1);
    border-radius: 8px 0 0 8px;
}

.seek-input {
    border-radius: 65px;
    overflow: hidden;
    background-color: #f6f6f6;
    border: solid 1px var(--el-input-border-color, var(--el-border-color));
    .seach-btn {
        border-radius: 50% !important;
        img {
            width: 18px !important;
        }
    }
    ::v-deep .el-input__wrapper {
        box-shadow: none;
        background: none;
    }
}

.el-popover.el-popper.consult-popover {
    .consult-pop {
        width: 300px;
        height: 300px;
        border-radius: 10px;
        padding-top: 45px;
        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
        background-color: #fff;
        flex-direction: column;

        .consult-title {
            font-size: 15px;
            color: #555555;
            margin-bottom: 24px;

            b {
                color: #000;
                font-weight: 650;
                margin: 0 5px;
            }
        }

        .consult-QRcode {
            width: 120px;
            height: 120px;
            border-radius: 20px;
            -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
            -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
            margin-bottom: 20px;
            background: #fff;

            .consult-QRcode-img {
                width: 100px;
                height: 100px;
            }
        }

        .consult-hint {
            margin-bottom: 6px;
        }

        .consult-hint,
        .consult-remark {
            font-size: 13px;
            color: #555555;
            line-height: 18px;
        }

        .consult-remark {
            b {
                font-weight: 650;
                color: #000000;
            }
        }
    }
}

.option-area {
    flex-wrap: wrap;
    transition: height 0.25s linear 0s;
    border-bottom: 1px solid rgb(235, 235, 235);

    .option-left,
    .option-right {
        width: 600px;

        &:not(:last-of-type) {
            border-right: 1px #ebebeb dotted;
        }

        .option-item {
            // padding-top: 24px;
            padding-top: 20px;
            padding-bottom: 20px;
            margin: 0 30px 0 20px;
            position: relative;

            &:not(:last-of-type) {
                border-bottom: 1px #ebebeb dotted;
            }

            .option-title {
                font-size: 14px;
                color: #b5b5b5;
                width: 90px;
                line-height: 30px;
            }

            .option-box {
                flex-wrap: wrap;

                .item {
                    padding: 5px 10px;
                    height: 30px;
                    display: flex;
                    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                    font-weight: 400;
                    font-size: 14px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 10px;
                    margin-right: 10px;
                    // margin-bottom: 10px;
                    cursor: pointer;
                    color: #7f7f7f;
                    border: 1px solid transparent;

                    &:hover {
                        border: 1px solid rgba(235, 235, 235, 1);
                    }

                    &.pitch {
                        color: #50e3c2;
                        border: 1px solid #50e3c2;
                        background: #eefcf9;

                        .item-icon {
                            display: none;
                        }
                        .item-icon-pitch {
                            display: block;
                        }
                        .select-type-text {
                            display: block;
                        }
                    }
                    .item-icon {
                        width: 10px;
                        height: 10px;
                        margin-left: 10px;
                    }
                    .item-icon-pitch {
                        display: none;
                    }

                    .select-type-text {
                        display: none;
                    }

                    .select-num {
                        padding: 0 10px;
                        background-color: #50e3c2;
                        border-radius: 13px;
                        color: #fff;
                        font-size: 14px;
                        height: 16px;
                        line-height: 16px;
                        margin-left: 5px;
                    }
                }

                &.option-input-box {
                    font-weight: 400;
                    font-size: 14px;
                    color: #555555;
                    line-height: 20px;

                    .eliminate {
                        width: 96px;
                        height: 30px;
                        background-color: rgba(246, 246, 246, 1);
                        border-radius: 50px;
                        font-size: 14px;
                        color: #7f7f7f;
                        cursor: pointer;

                        .eliminate-icon {
                            width: 14px;
                            height: 14px;
                            margin-right: 3px;
                        }
                    }

                    .option-input {
                        width: 100px;
                        height: 40px;
                        border: 1px solid rgba(179, 179, 179, 1);
                        border-radius: 10px;
                        // outline: none;
                        font-size: 14px;
                        margin: 0 10px;
                        padding: 10px;

                        &:first-of-type {
                            margin-left: 0;
                        }
                    }
                }

                .district-pop {
                    position: absolute;
                    top: 80px;
                    width: 459px;
                    background-color: #fff;
                    border: 1px solid #ebebeb;
                    border-radius: 16px;
                    z-index: 1;

                    .district-unlimited {
                        font-size: 14px;
                        color: #7f7f7f;
                        line-height: 20px;
                        margin: 25px 20px 0;
                        padding-bottom: 20px;
                        border-bottom: 1px dotted #ebebeb;
                        line-height: 20px;
                        cursor: pointer;

                        &.pitch {
                            color: #000;
                            font-weight: 650;
                            .unlimited-no {
                                display: none;
                            }
                            .unlimited-yes {
                                display: block;
                            }
                        }

                        .unlimited-no {
                            width: 14px;
                            height: 14px;
                            border: 1px solid #d9d9d9;
                            border-radius: 50%;
                            margin-right: 10px;
                        }

                        .unlimited-yes {
                            width: 14px;
                            height: 14px;
                            margin-right: 10px;
                            display: none;
                        }
                    }

                    .district-option {
                        /deep/ .el-checkbox-group {
                            padding: 15px 20px 20px;
                        }
                        border-bottom: 1px solid #ebebeb;
                    }

                    .district-btn-box {
                        justify-content: flex-end;
                        padding: 20px 20px 25px 0;

                        .district-btn {
                            width: 100px;
                            height: 40px;
                            border-radius: 150px;
                            cursor: pointer;

                            &.district-ok {
                                background-color: #62b1ff;
                                border: 1px solid #62b1ff;
                                color: #fff;
                                margin-left: 10px;
                            }

                            &.district-cancel {
                                border: 1px solid #aaa;
                                color: #555;
                            }
                        }
                    }
                }

                .geography-tab {
                    font-size: 14px;
                    text-align: center;
                    color: #7f7f7f;

                    .geography-item {
                        padding: 5px 10px;
                        height: 30px;
                        line-height: 30px;
                        border-radius: 10px;
                        margin-right: 10px;
                        cursor: pointer;
                        border: 1px solid transparent;
                        &:hover {
                            border: 1px solid #ebebeb;
                        }
                        &.pitch {
                            color: #50e3c2 !important;
                            border: 1px solid #50e3c2 !important;
                            background: #eefcf9;
                        }
                    }
                }

                .geography-box {
                    position: relative;
                    margin-top: 5px;
                    z-index: 1;
                    .geography-bj {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 459px;
                        height: 55px;
                        z-index: -1;
                    }
                    .geography-list {
                        // position: absolute;
                        // z-index: 1;
                        margin-top: 5px;
                        top: 5px;
                        left: 0;
                        width: 100%;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        padding: 20px;

                        .geography-item {
                            font-size: 14px;
                            color: #7f7f7f;
                            line-height: 20px;
                            text-align: center;
                            margin-right: 30px;
                            cursor: pointer;

                            &.pitch {
                                color: #000;
                                font-weight: 650;
                                .item-icon {
                                    display: none;
                                }
                                .item-icon-pitch {
                                    display: block;
                                }
                            }

                            .geography-item-icon {
                                width: 10px;
                                height: 10px;
                                margin-left: 10px;
                            }

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

                            .item-icon-pitch {
                                display: none;
                            }

                            .select-num {
                                width: 24px;
                                height: 16px;
                                background: inherit;
                                background-color: #000;
                                border: none;
                                border-radius: 13px;
                                box-shadow: none;
                                color: #fff;
                                line-height: 16px;
                                padding: 0 5px;
                            }
                        }
                    }
                }

                .item-checkbox {
                    cursor: pointer;
                    margin-right: 20px;
                    color: #606266;

                    &.item-checkbox-housing {
                        color: #f95d5d;
                    }

                    &.pitch {
                        color: #000;
                        font-weight: 650;
                        .item-checkbox__inner {
                            background: #50e3c2;
                            border-color: #50e3c2;
                            &:after {
                                transform: rotate(45deg) scaleY(1);
                            }
                        }
                    }

                    .item-checkbox__inner {
                        display: inline-block;
                        position: relative;
                        border: 1px solid #dcdfe6;
                        border-radius: 2px;
                        box-sizing: border-box;
                        width: 14px;
                        height: 14px;
                        background-color: #fff;
                        transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
                        margin-right: 8px;

                        &::after {
                            box-sizing: content-box;
                            content: "";
                            border: 1px solid #fff;
                            border-left: 0;
                            border-top: 0;
                            height: 7px;
                            left: 4px;
                            position: absolute;
                            top: 1px;
                            transform: rotate(45deg) scaleY(0);
                            width: 3px;
                            transition: transform 0.15s ease-in 50ms;
                            transform-origin: center;
                        }
                    }
                }
            }
        }
    }
}

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

/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: #000;
}

/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
    background-color: initial;
    color: initial;
}

.screen-footer {
    justify-content: space-between;
    padding: 0 16px;

    .screen-footer-left {
        .quantity {
            color: #555555;
            font-size: 15px;
            height: 72px;
            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;

            .b {
                font-weight: 700;
                color: #000000;
                margin: 0 5px;
            }
        }

        .screen-location {
            .screen-location-name {
                font-weight: 650;
                font-size: 14px;
                color: #000;
            }
            .screen-location-list {
                flex-wrap: wrap;
                width: 800px;
                .screen-location-item {
                    font-size: 14px;
                    color: #333;
                    margin-left: 20px;

                    .screen-location-img {
                        width: 8px;
                        height: 8px;
                        margin-left: 8px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .screen-footer-rigth {
        .sort-btn {
            cursor: pointer;
            color: #000;
            line-height: 24px;
            font-size: 14px;
            font-weight: 650;

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

.school-info-box {
    // position: absolute;
    position: relative;
    margin-top: 10px;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 5px 0px;
    z-index: 1;

    &::after {
        content: "";
        width: 7px;
        height: 7px;
        border-left: 1px solid #ebebeb;
        border-top: 1px solid #ebebeb;
        position: absolute;
        top: -4px;
        left: 99px;
        z-index: 1111;
        transform: rotate(45deg);
        background: #fff;
    }

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

        .mg-l-10 {
            margin-left: 10px;
        }

        .mg-l-20 {
            margin-left: 20px;
        }

        .carousel-info-box {
            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
            font-weight: 400;
            font-size: 14px;
            color: #7f7f7f;
            line-height: 20px;
            cursor: pointer;
            &:first-of-type {
                margin-left: 10px;
            }
            &:not(:first-of-type) {
                margin-left: 20px;
            }
            &.pitch {
                font-weight: 650;
                color: #000000;
            }
        }
    }

    /deep/ .el-carousel__container {
        height: 50px;
        border: 1px solid #ebebeb;
        border-radius: 10px;
        overflow: hidden;
    }

    .item-btn {
        width: 30px;
        height: 48px;
        z-index: 66;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        background: #fff;

        .img {
            width: 10px;
            height: 10px;
        }

        &.lef-btn {
            border-right: 1px dashed #ebebeb;
            border-radius: 10px 0 0 10px;
            left: 1px;

            .img {
                transform: rotate(90deg);
            }
        }

        .middle-btn {
            background-color: #000000;
        }

        &.right-btn {
            border-left: 1px dashed #ebebeb;
            border-radius: 0 10px 10px 0;
            right: 1px;

            .img {
                transform: rotate(270deg);
            }
        }
    }
}
</style>
<style lang="less">
.el-popper.popover-sort {
    width: 150px;
    padding: 0;
    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);

    .sort-box {
        padding: 26px 20px 2px;
        font-size: 14px;
        color: #7f7f7f;
        border-radius: 10px;

        .sort-item {
            margin-bottom: 30px;
            cursor: pointer;
            padding: 0;
            .pitch {
                width: 100%;
                color: #000;
                font-weight: 650;
                position: relative;
                &::before {
                    content: "";
                    width: 6px;
                    height: 14px;
                    background-color: rgba(80, 227, 194, 1);
                    border-radius: 3px;
                    display: block;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                }
            }
        }
    }
}
</style>
