<template>
    <div class="dis-f jus-x">
        <div class="body-maxWidth ">
            <div class="input-box dis-f al-item jus-bet body-maxWidth">
                <div class="dis-f al-item">
                    <el-input v-model="seachVal" class="input-s" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList'>
                        <template #suffix>
                            <img src="../../assets/homeImage/seachIcon.svg" class="icon" alt="" @click="seachList">
                        </template>
                    </el-input>
                    <!-- 地图找房的入口 暂时隐藏 -->
                    <!-- <div class="map-box dis-f jus-x al-item">
                        <img src="../../assets/homeImage/mapImg.png" class="img" alt="">
                    </div> -->
                </div>
                <div class="dis-f al-item">
                    <div class="tool-btn dis-f al-item jus-x" @click="gouser('fav')">
                        <img src="../../assets/homeImage/Mycollect.png" class="img" alt="">
                        我的收藏
                    </div>
                    <div class="tool-btn dis-f al-item jus-x mg-l-10" @click="gouser('fav')">
                        <img src="../../assets/homeImage/informationO.png" class="img" alt="">
                        我的发布
                    </div>
                </div>
            </div>
            <div class="seach-info-box body-maxWidth">
                <div class="top-box dis-f al-item">
                    <div class="top-btn dis-f jus-x al-item first" v-if="!isNeedHousing" @click="selectPage('person')"
                        :class="{ 'select-top-btn-bg': tabType === 'person' }">
                        <div class="top-btn" :class="[tabType === 'person' ? 'select-top-btn' : 'first-no-select']"
                            v-show="tabType === 'person'">
                            个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
                        </div>
                        个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
                        <div class="second-select" v-show="tabType === 'intermediary'">
                            <div class="box">

                            </div>
                        </div>
                    </div>
                    <div class="top-btn dis-f jus-x al-item first" v-if="isNeedHousing"
                        :class="{ 'select-top-btn-bg': tabType === 'need' }">
                        <div class="top-btn" :class="[tabType === 'need' ? 'select-top-btn' : 'first-no-select']"
                            v-show="tabType === 'need'">
                            求房源
                        </div>
                        求房源{{ tabType }}
                    </div>
                    <div class="top-btn dis-f jus-x al-item second" v-if="isNeedHousing" @click="selectPage('intermediary')"
                        :class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
                        <div class="first-select">
                            <div class="box">

                            </div>
                        </div>
                    </div>
                    <div class="top-btn dis-f jus-x al-item second" v-if="!isNeedHousing&&houseingPageType!=6"
                        @click="selectPage('intermediary')" :class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
                        <div class="first-select" v-show="tabType === 'person'">
                            <div class="box">

                            </div>
                        </div>
                        <div class="third-select" v-show="tabType === 'apartment'">
                            <div class="box">

                            </div>
                        </div>
                        <div class="top-btn" :class="[tabType === 'intermediary' ? 'select-top-btn' : 'first-no-select']"
                            v-show="tabType === 'intermediary'">
                            中介房源 {{ seachKey.key && seachKey.key.intermediary && seachKey.key.intermediary.count }}
                        </div>
                        中介房源 {{ seachKey.key && seachKey.key.intermediary && seachKey.key.intermediary.count }}
                    </div>
                    <div class="top-btn dis-f jus-x al-item third" @click="selectPage('apartment')"
                        :class="{ 'select-top-btn-bg': tabType === 'apartment' }" v-if="!isNeedHousing&&houseingPageType!=6">
                        <div class="second-select-third-box" v-show="tabType === 'intermediary'">
                            <div class="box">

                            </div>
                        </div>
                        <div class="top-btn" :class="[tabType === 'apartment' ? 'select-top-btn' : 'first-no-select']"
                            v-show="tabType === 'apartment'">
                            品牌公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
                        </div>
                        品牌公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
                    </div>
                    <div class="top-btn dis-f jus-x al-item four" v-if="!isNeedHousing">
                        <div class="second-select-third-box" v-show="tabType === 'apartment'">
                            <div class="box">

                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="tabType === 'apartment'" :class="{ 'show-box-pd': !showSelectModule }">
                    <apartmentSelect @handleTransfer="setSeachConditions" :seachPage="false" ref="apartmentSelectInfo">
                    </apartmentSelect>
                </div>
                <div class="seach-select-info" v-show="tabType !== 'apartment'">
                    <div class="select-box" :class="{ 'seach-select-h': showSelectModule }"
                        :style="{ 'overflow': showSelectModule ? 'visible' : 'hidden' }">
                        <selectTabBox :setSeachCondition="setSeachConditions" ref="selectTabBoxInfo"></selectTabBox>
                    </div>
                    <div :class="{ 'show-box-pd': !showSelectModule }">
                        <div class="box" :class="{ 'show-box': showSelectModule }">
                            <div class="dis-f jus-x al-item" :style="{ 'height': !showSelectModule ? '60px' : '40px' }"
                                @click="showSelectModule = !showSelectModule">
                                <div class="dis-f al-item">
                                    <span v-show="showSelectModule">收起筛选条件</span>
                                    <span class="text-tps" v-show="!showSelectModule">筛选</span> <span
                                        v-show="!showSelectModule">&nbsp:&nbsp</span>
                                    <div v-show="!showSelectModule">
                                        <span v-for="(item, i) in typeText" :key="item">
                                            {{ item }}
                                            <span v-show="i !== typeText.length - 1" class="text-icon">&nbsp|&nbsp </span>
                                        </span>
                                    </div>
                                    <img src="../../assets/homeImage/listMore.svg" class="icon-img"
                                        :class="{ 'down-icon': showSelectModule }" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="btm-list" :class="{ 'apartment-btm': tabType === 'apartment' }">
                        <div class="dis-f al-item">
                            共<span class="count">{{ count || 0 }}</span>条
                            {{ tabType === 'person' ?
                                '个人房源' : tabType === 'intermediary' ?
                                    '中介房源' : tabType === 'apartment' ?
                                        '品牌公寓' : '' }} <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 v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
                                    {{ item.title }}
                                    <img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img"
                                        alt="">
                                </div>
                            </div>
                        </div>
                        <span class="dis-f al-item sort-text" v-show="tabType !== 'apartment'">
                            <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>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, shallowReactive, defineProps, watchEffect, defineExpose } from 'vue'
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import apartmentSelect from '../apartment/seachModule.vue'
import store from '../../store/index';
import api from '@/utils/api';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'

//路由
const route = useRouter()

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

//选项卡
let tabType = ref('person')
let selectTabBoxInfo = ref(null)//个人/中介筛选实例
let apartmentSelectInfo = ref(null)//公寓筛选实例
//设置请求数据
let selectPage = (type) => {
    if (type === seachAllType['tabType']||houseingPageType==6) return
    if (type === 'apartment') {
        selectTabBoxInfo.value.cleanSelect()//清空筛选数据
    } else {
        apartmentSelectInfo.value.cleanSelect && apartmentSelectInfo.value.cleanSelect()
    }
    //清空数据
    if (type === 'apartment')
        seachAllType = reactive({
            keyword: seachAllType['keyword'],
            location: [],
            intermediary: ''
        })
    tabType.value = type
    seachAllType['tabType'] = type
    seachAllType['searchid'] = setPageKey()
    if (type === 'person') {
        seachAllType['intermediary'] = 0
        houseingPageType='0'
        sessionStorage.setItem('houseingPageType',0)
        selectTabBoxInfo.value.routerQuerySet()
    } else if (type === 'intermediary') {
        seachAllType['intermediary'] = 1
        houseingPageType='1'
        sessionStorage.setItem('houseingPageType',1)
        // route.currentRoute.value.query.houseingPageType='1'
        selectTabBoxInfo.value.routerQuerySet()
    } else {
        seachAllType['intermediary'] = ''
    }
    getDataList(seachAllType)
}

let getDataList = props.getDataList

//搜索内容
let seachVal = ref('')
let isNeedHousing = ref(false)
seachVal.value = route.currentRoute.value.query.keyword&&route.currentRoute.value.query.keyword.replace(/\s/g, "")

//判断是否从求房源页面跳转
isNeedHousing.value = route.currentRoute.value.query.isNeedHousing === 'true'

//判断当前是什么页面
let houseingPageType = sessionStorage.getItem('houseingPageType')
console.log('houseingPageType',houseingPageType)
let type = houseingPageType === '0' ? 'person' : houseingPageType === '1' ? 'intermediary' : houseingPageType === '6' ? 'need' : 'apartment'
tabType.value = type

if(isNeedHousing.value)tabType.value = '6'

//页面判断
let checkPageType = () => {
    // houseingPageType 0个人 1中介 6求房源
    let type = houseingPageType === '0' ? 'person' : houseingPageType === '1' ? 'intermediary' : houseingPageType === '6' ? 'need' : 'apartment'
    tabType.value = type
    seachAllType['tabType'] = type
    if (type === 'person') {
        seachAllType['intermediary'] = 0
    } else if (type === 'intermediary') {
        seachAllType['intermediary'] = 1
    } else if (type === 'need') {
        seachAllType['intermediary'] = 6
        seachAllType['keyword'] = seachVal.value
    } else {
        seachAllType['intermediary'] = ''
    }
    getDataList(seachAllType)
}


//搜索key
let seachKey = reactive({
    key: {
        personal: {},
        intermediary: {},
        studentapartment: {}
    }
})

//搜索数据
let seachAllType = reactive({
    keyword: '',
    location: [],
    searchid: '',
    intermediary: 0
})
//设置搜索数据
let setSeachConditions = (type, data) => {
    console.log(1,seachAllType)
    console.log(type.value)
    if (seachAllType['tabType'] !== 'apartment') {
        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 = ''
        }
    } else {
        seachAllType = {
            tabType:'apartment',
            ...type.value
        }
    }
    if (!seachVal.value) {
        seachAllType.searchid = ''
    }
    // console.log('seachAllType', seachAllType)
    // return
    getDataList(seachAllType)
}

//设置当前搜索key
let setPageKey = () => {
    return tabType.value === 'person' ? seachKey.key.personal.searchid : tabType.value === 'intermediary' ? seachKey.key.intermediary.searchid : tabType.value === 'apartment' ? seachKey.key.studentapartment.searchid : ''
}

//搜索初始化
let searchInit = (data) => {
    api.search({ keyword: data }).then(res => {
        if (res.code === 200) {
            seachKey.key = res.data
            seachAllType.searchid = setPageKey()
            getDataList(seachAllType)
        } else {
            ElMessage({
                message: res.message,
                center: true,
            })
        }
    })
}
//搜索数据
let seachList = (item) => {
    let routeInfo = route.currentRoute.value
    if (!seachVal.value.replace(/\s/g, "")) return
    if (!seachVal.value) {
        return
    }
    if (seachAllType['intermediary'] === 6) {
        seachAllType['keyword'] = seachVal.value
        getDataList(seachAllType)
    } else {
        searchInit(seachVal.value)
    }
    route.push({
        path:routeInfo.path,
        query:{
            keyword:seachVal.value,
            isNeedHousing:routeInfo.query.isNeedHousing
        }
    })
}

//筛选词条
let typeText = ['地理位置', '出租方式', '租金', '租期', '性别要求', '发布时间', '其他']

//显示筛选组件
let showSelectModule = ref(false)

//选中地区
let selectData = reactive({ data: [] })
let selectTabCheck = reactive({
    id: '',
    title: '',
    data: []
})

//最新发布选项
let listSort = shallowReactive({
    type: [
        { title: '最新发布', type: 'timestamp' },
        { title: '热门', type: 'hotnum' },
        { title: '价格从低到高', type: 'rentasc' },
        { title: '价格从高到低', type: 'rentdesc' }
    ],
    checkType: 'timestamp',
    check: '最新发布'
})
//搜索列表排序
let listSortCheck = (item) => {
    listSort.checkType = item.type
    listSort.check = item.title
    setSeachConditions('orderby', item.type)
}

let seachArea = {};//区域找房
//获取区域下列数据
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
            })
        }
    }
}

//更新当前数据数量
let setListCount = (item, num) => {
    // console.log(item, num)
    // console.log(seachKey.key)
    if (item.tabType === "intermediary") {
        seachKey.key['intermediary']['count'] = num
    } else if (item.tabType === "person") {
        seachKey.key['personal']['count'] = num
    } else if (item.tabType === "apartment") {
        seachKey.key['studentapartment']['count'] = num
    }
}


watchEffect(() => {
    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)
})
defineExpose({
    searchInit,
    setListCount,
    checkPageType
})

// 跳转我的页面
const gouser = tab => route.push(`/user?tab=${tab}`)

</script>
<style scoped>
img {
    object-fit: contain;
}

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

.mg-t-35 {
    margin-top: 35px;
}

.seach-select-h {
    max-height: 500px !important;
}

.select-box {
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
}

.show-box-pd {
    padding: 0 20px;
    transition: all 0.1s linear;
}

.seach-info-box {
    background: #fff;
    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);

    .seach-select-info {
        padding: 25px 0px;

        .show-box {
            width: 100% !important;
            height: 40px !important;
            min-height: 40px !important;
            border-radius: 0 !important;
            border-bottom: 1px solid #ebebeb !important;
        }

        .box {
            width: 1160px;
            min-height: 60px;
            background: inherit;
            background-color: rgba(246, 246, 246, 1);
            border: none;
            border-radius: 10px;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            color: #555555;
            font-size: 15px;
            cursor: pointer;

            .icon-img {
                width: 6px;
                transform: rotate(90deg);
                margin-left: 20px;
            }

            .down-icon {
                transform: rotate(270deg);
                transition: all 0.3s ease-in-out;
            }

            .text-tps {
                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                font-weight: 650;
                color: #000000;
            }

            .text-icon {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                color: #D7D7D7;
            }
        }
    }

    .top-box {
        height: 45px;
        width: 100%;
        background: #62b1ff;
        position: relative;
        border-radius: 16px 16px 0 0;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 17px;
        color: #FFFFFF;

        .select-top-bos-show {
            -moz-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
            -webkit-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
            box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
        }

        .select-top-btn-bg {
            background: #fff !important;
            height: 50px !important;
            width: 200px;
            border-radius: 16px 16px 0 0;
            -moz-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
            -webkit-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
            box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
        }

        .select-top-btn {
            height: 45px;
            width: 180px !important;
            line-height: 50px;
            background: #fff !important;
            border-radius: 16px 16px 0 0;
            font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
            font-weight: 650;
            font-style: normal;
            font-size: 17px;
            color: #000000;
            text-align: center;
            bottom: 0;
            z-index: 66;
        }

        .bg-f {
            background: #fff !important;
        }

        .first {
            bottom: 0;
            left: 0;
            background: #62b1ff;

            .second-select {
                position: absolute;
                background: #fff;
                top: 0;
                right: -4px;
                height: 45px;
                width: 30px;
                z-index: 88;

                .box {
                    border-radius: 0 0 16px 0;
                    background: #62b1ff;
                    height: 45px;
                    width: 30px;
                }
            }
        }

        .first-no-select {
            border-radius: 0px 0px 16px 0 !important;
            width: 180px;
            left: 14px;
            z-index: 88;
        }

        .second {
            left: 200px;
            bottom: 0;
            background: #62b1ff;

            .first-select {
                position: absolute;
                background: #fff;
                top: 0;
                left: -4px;
                height: 45px;
                width: 30px;

                .box {
                    border-radius: 0 0 0 16px;
                    background: #62b1ff;
                    height: 45px;
                    width: 30px;
                }
            }

            .third-select {
                position: absolute;
                background: #fff;
                top: 0;
                right: -4px;
                height: 45px;
                width: 30px;
                z-index: 88;

                .box {
                    border-radius: 0 0 16px 0;
                    background: #62b1ff;
                    height: 45px;
                    width: 30px;
                }
            }
        }

        .third {
            left: 400px;
            bottom: 0;
            background: #62b1ff;

            .second-select-third-box {
                position: absolute;
                background: #fff;
                top: 0;
                left: -4px;
                height: 45px;
                width: 30px;
                z-index: 88;

                .box {
                    border-radius: 0 0 0 16px;
                    background: #62b1ff;
                    height: 45px;
                    width: 30px;
                }
            }
        }

        .four {
            left: 600px;
            bottom: 0;
            background: #62b1ff;

            .second-select-third-box {
                position: absolute;
                background: #fff;
                top: 0;
                left: -4px;
                height: 45px;
                width: 30px;
                z-index: 88;

                .box {
                    border-radius: 0 0 0 16px;
                    background: #62b1ff;
                    height: 45px;
                    width: 30px;
                    position: absolute;
                    left: 0;
                }
            }
        }

        .top-btn {
            width: 200px;
            height: 45px;
            position: absolute;
            border-radius: 16px 16px 0 0;
            cursor: pointer;
        }
    }
}

.apartment-btm {
    padding: 25px 20px !important;
}

.btm-list {
    padding: 0 20px 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: 10px;

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

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


.input-box {
    height: 92px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(246, 246, 246, 1);
    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);
    transform: translateY(-35px);
    padding: 20px;

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

    .tool-btn {
        width: 150px;
        height: 48px;
        background: inherit;
        background-color: rgba(246, 246, 246, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(235, 235, 235, 1);
        border-radius: 8px;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #000000;
        cursor: pointer;

        .img {
            width: 20px;
            height: 20px;
            margin-right: 6px;
        }
    }

    .input-s {
        width: 560px;
        height: 48px;
        background: inherit;
        background-color: rgba(246, 246, 246, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(235, 235, 235, 1);
        border-radius: 8px;
        overflow: hidden;

        .el-input__wrapper {
            border-radius: 8px;
            box-shadow: 0px 0px 0px !important;
        }
    }

    .map-box {
        width: 48px;
        height: 48px;
        background: inherit;
        background-color: rgba(246, 246, 246, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(235, 235, 235, 1);
        border-radius: 155px;
        margin-left: 10px;
        cursor: pointer;

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

    .icon {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
}

.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);
    padding:10px;
}

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

::v-deep .el-input__wrapper {
    color: #333333 !important;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px !important;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0px 0px 0px !important;
    background-color: rgba(246, 246, 246, 1);
}

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