<template>
    <div style="min-width:1200px;overflow-x: scroll;overflow-y: visible;">
        <pageTopBar></pageTopBar>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
                <breadcrumb :data="housingInfo['data']" :operation='setOperation'></breadcrumb>
                <div class="dis-f jus-bet" style="margin-top: -15px;">
                    <div class="info-box">
                        <div style="position:absolute;top:0;left:0">
                            <el-affix :offset="0" @change="changeTitleType" z-index="1002" style="width: 1200px">
                                <div class="top-bar-box dis-f jus-x" v-if="titleType">
                                    <div class="top-bar dis-f al-item jus-bet">
                                        <div class="dis-f al-item">
                                            <img src="../assets/img/detail/authenticationHousing.png"
                                                class="authentication-housing" v-if="pageType == 1 &&
                                                    housingInfo['data'] &&
                                                    housingInfo['data'].info.verified" alt="">
                                            <img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo"
                                                style="margin-right:10px;" v-if="pageType == 2 &&
                                                    housingInfo['data'] &&
                                                    housingInfo['data'].isintermediary == 1" alt="">
                                            <div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified
                                                || pageType == 2 &&
                                                housingInfo['data'] &&
                                                housingInfo['data'].isintermediary == 1"></div>
                                            <span class="need-houing-type" v-if="pageType == 3">预算</span>
                                            <span class="unit">HK$</span>
                                            <span class="rent" v-if="pageType != 3">{{ housingInfo['data'] &&
                                                housingInfo['data'].info.rent }}</span>
                                            <span class="rent" v-if="pageType == 3">
                                                {{
                                                    housingInfo['data'] && housingInfo['data'].info.rent[0]
                                                }}~
                                                {{
                                                    housingInfo['data'] && housingInfo['data'].info.rent[1]
                                                }}
                                            </span>
                                            <span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
                                            <div class="line"></div>
                                            <div class="dis-f al-item">
                                                {{ indexData['data'] &&
                                                    indexData['data']['config'] &&
                                                    indexData['data']['config']['type'][housingInfo['data'] &&
                                                    housingInfo['data'].info.type.substring(0, 1)]
                                                }}
                                                <img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="">
                                                {{ indexData['data'] &&
                                                    indexData['data']['config'] &&
                                                    indexData['data']['config']['type'][housingInfo['data'] &&
                                                        housingInfo['data'].info.type]
                                                }}
                                            </div>
                                        </div>
                                        <div class="dis-f al-item">
                                            <div class="tool-btn dis-f al-item jus-x">
                                                <div class="dis-f al-item" @click="setOperation">
                                                    <img src="../assets/img/detail/collect.png"
                                                        v-show="housingInfo['data'] && !housingInfo['data'].isfav"
                                                        class="tool-icon" alt="">
                                                    <img src="../assets/img/detail/collectT.png"
                                                        v-show="housingInfo['data'] && housingInfo['data'].isfav"
                                                        class="tool-icon" alt="">
                                                    <span>
                                                        {{ housingInfo['data'] && housingInfo['data'].isfav ?
                                                            housingInfo['data'] && housingInfo['data']['info'].count_fav : '收藏'
                                                        }}
                                                    </span>
                                                </div>
                                                <div class="line" style="margin:0 20px;"></div>
                                                <div class="dis-f al-item">
                                                    <img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
                                                    <span>
                                                        转发
                                                    </span>
                                                    <transmit-btn v-if="housingInfo.data" :concatType="concatType" 
                                                        :qrcode="housingInfo.data['qrcode']"
                                                        :title="housingInfo.data.info['subject']" type="housingTop"></transmit-btn>
                                                </div>
                                            </div>
                                            <div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
                                                <div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;"
                                                    @click="getConcatData">
                                                    联系方式
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-affix>
                        </div>
                        <div class="detail-price-box dis-f" style="align-items: end;">
                            <span class="need-houing-type" v-if="pageType == 3">预算</span>
                            <span class="unit" :class="{ 'line-h-17': pageType == 3 }"
                                :style="{ 'font-size': pageType === 3 ? '20px' : '' }">HK$</span><span class="rent"
                                v-if="pageType != 3">{{
                                    housingInfo['data'] && housingInfo['data'].info.rent }}</span>
                            <span class="rent" v-if="pageType == 3">
                                {{
                                    housingInfo['data'] && housingInfo['data'].info.rent[0]
                                }}~
                                {{
                                    housingInfo['data'] && housingInfo['data'].info.rent[1]
                                }}
                            </span>
                            <span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
                        </div>
                        <div class="dis-f al-item detail-condition-box">
                            <div class="condition condition-border">
                                <div class="dis-f al-item">
                                    <div class="icon">

                                    </div>
                                    {{ indexData['data'] &&
                                        indexData['data']['config'] &&
                                        indexData['data']['config']['type'][housingInfo['data'] &&
                                        housingInfo['data'].info.type.substring(0, 1)]
                                    }}
                                </div>
                                <div class="type-text">
                                    {{ indexData['data'] &&
                                        indexData['data']['config'] &&
                                        indexData['data']['config']['type'][housingInfo['data'] &&
                                        housingInfo['data'].info.type]
                                    }}
                                </div>
                            </div>
                            <div class="condition condition-border">
                                <div class="dis-f al-item">
                                    <div class="icon">

                                    </div>
                                    租期
                                </div>
                                <div class="type-text">
                                    {{ !housingInfo['data'] || housingInfo['data'] &&
                                        housingInfo['data'].info && housingInfo['data'].info.rentalduration
                                        === '0' ?
                                        '不限' : `${indexData['data'] && indexData['data']['config'] &&
                                        indexData['data']['config']['rentalduration'][housingInfo['data']
                                        && housingInfo['data'].info.rentalduration]}` }}
                                </div>
                            </div>
                            <div class="condition">
                                <div class="dis-f al-item">
                                    <div class="icon">

                                    </div>
                                    起租日期
                                </div>
                                <div class="type-text">
                                    {{ housingInfo['data'] && housingInfo['data'].info.leasetime || '随时' }}
                                </div>
                            </div>
                        </div>
                        <div class="image-box"
                            v-if="(housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.video) ||
                                (housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.picturegroup)">
                            <div class="dis-f al-item">
                                <img src="../assets/img/detail/videoIcon.png" v-if="housingInfo['data'] &&
                                    housingInfo['data'].info.video &&
                                    housingInfo['data'].info.video.length > 0" class="img-video" alt="">
                                <div class="num-box" v-if="housingInfo['data'] &&
                                    housingInfo['data'].info.video &&
                                    housingInfo['data'].info.video.length">
                                    {{ housingInfo['data'] && housingInfo['data'].info.video ?
                                        housingInfo['data'] && housingInfo['data'].info.video.length : 0 }}</div>
                                <img src="../assets/img/detail/imageIcon.png" v-if="housingInfo['data'] &&
                                    housingInfo['data'].info.picturegroup &&
                                    housingInfo['data'].info.picturegroup.length" class="img-icon" alt="">
                                <div class="num-box" v-if="housingInfo['data'] &&
                                    housingInfo['data'].info.picturegroup &&
                                    housingInfo['data'].info.picturegroup.length">
                                    {{ housingInfo['data'] &&
                                        housingInfo['data'].info.picturegroup && housingInfo['data'].info.picturegroup.length
                                        || 0 }}
                                </div>
                            </div>
                            <div class="img-list-box dis-f jus-x al-item" v-show="imgList.length > 0">
                                <img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
                                    v-show="imgListTab === 0 && scrollWidth > clientWidth">
                                <img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
                                    style="transform: rotate(180deg);" @click.stop="moveImageList('left')"
                                    v-show="imgListTab > 0 && scrollWidth > clientWidth">
                                <img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
                                    @click.stop="moveImageList('right')" v-show="imgList.length - 1 !== imgListTab &&
                                        scrollWidth > clientWidth &&
                                        imageLIstLeft[imgListTab] + clientWidth < scrollWidth">
                                <img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
                                    style="transform: rotate(180deg);" v-show="scrollWidth > clientWidth &&
                                        imageLIstLeft[imgListTab] + clientWidth >= scrollWidth">
                                <div class="dis-f al-item list-box s-w-100" ref="imageList" v-if="imgList.length > 0">
                                    <div v-for="(item, i) in imgList" :key="i"
                                        @click.stop="imageIndex = i, imageShow = true" ref="imgData">
                                        <div class="video" v-if="item && !item.thumbnail">
                                            <div class="icon-box dis-f jus-x al-item">
                                                <img src="../assets/img/detail/videoStop.svg" class="icon" alt="">
                                            </div>
                                            <img class="video" :src="item.image" @load="setImageWidth(i)"
                                                @error="setImageWidth(i)" alt="">
                                        </div>
                                        <div class="img dis-f" v-if="item && item.thumbnail">
                                            <img class="img" style="margin:0;" :src="item.thumbnail"
                                                @load="setImageWidth(i)" @error="setImageWidth(i)" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="housing-info">
                            <div class="title dis-f al-item">
                                <img src="../assets/img/detail/infoIcon.png" class="img" alt="">
                                <span>
                                    {{ pageType != 3 ? '基本信息' : '基本要求' }}
                                </span>
                            </div>
                            <!--  -->
                            <div class="need-housing-info" v-if="pageType == 3">
                                <div class="info dis-f al-item"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.property">
                                    <div class="title-box">
                                        房屋类型
                                    </div>
                                    <div class="text mg-l-30">
                                        <span v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.property"
                                            :key="i">
                                            <span v-show="i != 0">/</span>
                                            {{
                                                item == 0 ? '不限' :
                                                indexData['data'] &&
                                                indexData['data']['config'] &&
                                                indexData['data']['config']['property'][item]
                                            }}
                                        </span>
                                    </div>
                                </div>
                                <div class="info dis-f al-item"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.floor">
                                    <div class="title-box">
                                        所在楼层
                                    </div>
                                    <div class="text mg-l-30">
                                        <span v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.floor"
                                            :key="i" :class="[i === 0 ? '' : 'mg-l-10']">
                                            {{
                                                item == 0 ? '不限' :
                                                indexData['data'] &&
                                                indexData['data']['config'] &&
                                                indexData['data']['config']['floor'][item]
                                            }}
                                        </span>
                                        <!-- {{ housingInfo['data'] && housingInfo['data'].info.floor }} -->
                                    </div>
                                </div>
                                <div class="info dis-f al-item"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.elevator">
                                    <div class="title-box">
                                        电梯
                                    </div>
                                    <div class="text mg-l-30">
                                        {{
                                            indexData['data'] &&
                                            indexData['data']['config'] &&
                                            indexData['data']['config']['elevator'][housingInfo['data'] &&
                                                housingInfo['data'].info.elevator]
                                        }}
                                    </div>
                                </div>
                                <div class="info dis-f al-item"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.sunshinearea">
                                    <div class="title-box">
                                        晾晒区
                                    </div>
                                    <div class="text mg-l-30">
                                        <span
                                            v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea"
                                            :key="i" :class="[i === 0 ? '' : 'mg-l-10']">
                                            {{
                                                item == 0 ? '不限' :
                                                indexData['data'] &&
                                                indexData['data']['config'] &&
                                                indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
                                                    housingInfo['data'].info.sunshinearea]
                                            }}
                                        </span>
                                    </div>
                                </div>
                                <div class="info dis-f al-item"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.acreage[0]">
                                    <div class="title-box">
                                        面积
                                    </div>
                                    <div class="text mg-l-30">
                                        <span>
                                            {{
                                                housingInfo['data'] && housingInfo['data'].info.acreage[0] ? housingInfo['data']
                                            &&
                                            housingInfo['data'].info.acreage[0] : 0
                                            }}
                                        </span>~
                                        <span>
                                            {{
                                                housingInfo['data'] && housingInfo['data'].info.acreage[1] ? housingInfo['data']
                                            &&
                                            housingInfo['data'].info.acreage[1] : 0
                                            }}
                                        </span>
                                        平方呎
                                    </div>
                                </div>
                                <div class="info dis-f al-item"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.publishergender">
                                    <div class="title-box">
                                        同住人性别要求
                                    </div>
                                    <div class="text mg-l-30">
                                        {{
                                            indexData['data'] &&
                                            indexData['data']['config'] &&
                                            indexData['data']['config']['gender'][housingInfo['data'] &&
                                                housingInfo['data'].info.publishergender]
                                        }}
                                    </div>
                                </div>
                                <div class="info dis-f al-item"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.gender">
                                    <div class="title-box">
                                        发布者性别
                                    </div>
                                    <div class="text mg-l-30">
                                        {{
                                            housingInfo['data'] && housingInfo['data'].info.gender ?
                                            indexData['data'] &&
                                            indexData['data']['config'] &&
                                            indexData['data']['config']['gender'][housingInfo['data'] &&
                                            housingInfo['data'].info.gender] :
                                            '不限'
                                        }}
                                    </div>
                                </div>
                            </div>
                            <!--  -->
                            <div class="info-box-s" v-if="pageType != 3">
                                <div class="info dis-f al-item"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.property">
                                    <div class="title-box">
                                        房屋类型
                                    </div>
                                    <span class="text">
                                        {{
                                            indexData['data'] &&
                                            indexData['data']['config'] &&
                                            indexData['data']['config']['property'][housingInfo['data'] &&
                                                housingInfo['data'].info.property]
                                        }}
                                    </span>
                                </div>
                                <div class="info dis-f al-item"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.elevator">
                                    <div class="title-box">
                                        所在楼层
                                    </div>
                                    <span class="text">
                                        {{ housingInfo['data'] && housingInfo['data'].info.floor }}&nbsp
                                    </span>

                                    <span class="text" style="margin-left:0;"
                                        v-if="housingInfo['data'] && housingInfo['data'].info.elevator && housingInfo['data'].info.elevator != -1">
                                        <span style="color: #D7D7D7;">|</span>
                                        {{
                                            indexData['data'] &&
                                            indexData['data']['config'] &&
                                            indexData['data']['config']['elevator'][housingInfo['data'] &&
                                                housingInfo['data'].info.elevator]
                                        }}
                                    </span>
                                </div>
                                <div class="info dis-f al-item"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.sunshinearea">
                                    <div class="title-box">
                                        晾晒区
                                    </div>
                                    <span class="text">
                                        {{
                                            indexData['data'] &&
                                            housingInfo['data'] &&
                                            housingInfo['data'].info.sunshinearea
                                            !== -1 ?
                                            indexData['data']['config'] &&
                                            indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
                                            housingInfo['data'].info.sunshinearea] : ''
                                        }}
                                    </span>
                                </div>
                                <div class="info dis-f al-item" style="margin-top:30px;"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.acreage">
                                    <div class="title-box">
                                        面积
                                    </div>
                                    <span class="text">
                                        {{
                                            housingInfo['data'] && housingInfo['data'].info.acreage ? housingInfo['data'] &&
                                        housingInfo['data'].info.acreage : 0
                                        }} 平方呎
                                    </span>
                                </div>
                                <div class="info dis-f al-item" style="margin-top:30px;"
                                    v-if="housingInfo['data'] && housingInfo['data'].info.gender">
                                    <div class="title-box">
                                        性别要求
                                    </div>
                                    <span class="text">
                                        {{
                                            indexData['data'] &&
                                            indexData['data']['config'] &&
                                            indexData['data']['config']['gender'][housingInfo['data'] &&
                                                housingInfo['data'].info.gender]
                                        }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!-- 求房源-目标区域 -->
                        <div class="housing-info" v-if="pageType == 3">
                            <div class="title dis-f al-item">
                                <img src="../assets/img/detail/mapIcon.png" class="img" alt="">
                                <span>
                                    目标区域
                                </span>
                            </div>
                            <div class="need-housing-location">
                                <div class="dis-f al-item" :class="{ 'mg-t-15': i != 0 }"
                                    v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.location" :key="i">
                                    <span>
                                        {{
                                            location && location[item.substring(0, 1)]
                                        }}
                                    </span>
                                    <div class="icon dis-f jus-x al-item">
                                        <img src="../assets/img/detail/moreAllow.svg" class="icon-img" alt="">
                                    </div>
                                    <div class="text-box">
                                        {{
                                            item.length == 1 ? '不限' : location && location[item]
                                        }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  -->

                        <div class="map-box"
                            v-if="pageType != 3 && housingInfo['data'] && housingInfo['data'].info.location">
                            <div class="dis-f al-item title-box">
                                <img src="../assets/img/detail/mapIcon.png" class="img" alt="">
                                <span class="title">{{
                                    location && location[housingInfo['data'] &&
                                    housingInfo['data']['info'].location.substring(0, 1)]
                                }} >
                                    {{
                                        location && location[housingInfo['data'] && housingInfo['data']['info'].location]
                                    }}</span>
                            </div>
                            <div class="dis-f jus-x" style="margin-top:15px;"
                                v-if="housingInfo['data'] && housingInfo['data'].info.latitude">
                                <div>
                                    <mapInfo :latlng="{
                                        longitude: housingInfo['data'].info.longitude * 1,
                                        latitude: housingInfo['data'].info.latitude * 1
                                    }" :name="housingInfo['data'].info.address"></mapInfo>
                                </div>
                            </div>
                        </div>
                        <div class="dis-f jus-x pos-r"
                            v-if="distanceList[0] && distanceList[0].name && pageType != 3 && distanceList.length > 1">
                            <div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
                                :style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
                                <div class="top-box"></div>
                                <div class="title-box dis-f al-item jus-x">
                                    <span class="title">房源距离院校</span>
                                    <img src="../assets/img/detail/close.png" class="close-icon"
                                        @click="showDistance = false" alt="">
                                </div>
                                <div class="distance-box-s" v-if="distanceList.length > 0">
                                    <div class="distance-info-data dis-f">
                                        <div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
                                            :key="index" :class="{ 'mg-t-50': index > 0 }">
                                            <div class="icon-box dis-f al-item jus-x"
                                                :class="{ 'home-icon': item && item.address }">
                                                <div class="line" v-show="index > 0"></div>
                                                <img src="../assets/img/detail/school.png" class="icon"
                                                    v-show="item && !item.address" alt="">
                                                <img src="../assets/img/detail/home.png" class="icon"
                                                    v-show="item && item.address" alt="">
                                            </div>
                                            <div style="width:200px">
                                                {{ item && item.name }}
                                            </div>
                                            <div class="dis-f" style="flex-wrap: wrap;width:480px">
                                                <div v-for="(items, i) in item && item.point" :key="i">
                                                    <span class="address-info">
                                                        {{ items.title }}
                                                    </span>
                                                    <span v-html="setDistanceList(items && `${items.distance}`)">
                                                    </span>
                                                    <!-- <span class="distance-text">
                                                    1.1公里
                                                </span> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="distance-box dis-f jus-bet">
                                <div class="dis-f al-item" style="position:relative;" @click="setShowDistance">
                                    <!-- <img src="../assets/img/detail/line.svg" class="line-img" alt=""> -->
                                    <div class="dis-f al-item s-w-100" style="position:absolute;">
                                        <div class="line-school-box dis-f al-item" style="justify-content:space-around;">
                                            <div v-for="(item, i) in distanceList" class="box-text" :key="item && item.id"
                                                v-show="i < 9 && item.id">
                                                <div :class="{ 'far-s': item && item.recently_distance > 4 }"
                                                    v-if="item && !item.address" class="text-c">
                                                    {{ item && item.recently_distance }}km
                                                </div>
                                                <div class="dis-f jus-x" v-if="item && !item.address">
                                                    <img src="../assets/img/detail/markIcon.svg"
                                                        v-if="item && item.recently_distance <= 4" class="marker-icon"
                                                        alt="">
                                                    <img src="../assets/img/detail/markIconNot.svg"
                                                        v-if="item && item.recently_distance > 4" class="marker-icon"
                                                        alt="">
                                                </div>
                                                <div :class="{ 'far-s': item && item.recently_distance > 4 }" class="text-c"
                                                    v-if="item && !item.address">{{
                                                        item && item.alias }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line-img"></div>
                                </div>
                                <div class="info-btn-bg" @click="setShowDistance">
                                    <div class="info-btn-s dis-f al-item">
                                        详情
                                        <img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="">
                                    </div>
                                    <img src="../assets/img/detail/infoBtnBg.svg" class="info-btn-bg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="map-box">
                            <div class="dis-f al-item title-box">
                                <img src="../assets/img/detail/moreBoxIcon.png" class="more-icon" alt="">
                                <span class="title">更多介绍</span>
                            </div>
                            <div class="introduce-text"
                                v-html="housingInfo['data'] && housingInfo['data'].info.introduction">
                            </div>
                        </div>
                        <div class="houseing-info-box dis-f al-item jus-bet">
                            <div class="dis-f al-item">
                                房源ID : &nbsp<span class="houseing-id" @click="clone(housingInfo['data'] &&
                                    housingInfo['data'].info.id)">{{ housingInfo['data'] && housingInfo['data'].info.id}}</span>
                                <span class="browse-box">
                                    浏览 :<span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view
                                    }}</span>
                                </span>
                            </div>
                            <div class="houseing-info-box-s"></div>
                            <div class="dis-f al-item">
                                <span>
                                    收藏 : &nbsp<span class="text">
                                        {{ housingInfo['data'] && housingInfo['data'].info.count_fav }}
                                    </span>
                                </span>
                            </div>
                            <div class="houseing-info-box-s"></div>
                            <div class="dis-f al-item">
                                <span>
                                    发布 : &nbsp<span class="text">
                                        {{ housingInfo['data'] && housingInfo['data'].info.timestamp }}
                                    </span>
                                </span>
                            </div>
                            <div class="houseing-info-box-s"></div>
                            <div class="dis-f al-item" style="border-right:0px">
                                <span>
                                    更新 : &nbsp<span class="text">
                                        {{ housingInfo['data'] && housingInfo['data'].info.updatetime }}
                                    </span>
                                </span>
                            </div>
                        </div>
                        <div class="statement-box">
                            <div class="title">
                                免责声明
                            </div>
                            <div class="mg-t-15 line-h-30">
                                发布者对房源信息的真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。
                                <div>
                                    如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
                                    <el-dropdown>
                                        <span class="text-line line-h-30"
                                            @click="clone(concatInfo.data && concatInfo.data.wechat)">{{
                                                concatInfo.data && concatInfo.data.wechat }}</span>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item>
                                                    <div class="wx-qrcode-s">
                                                        <img :src="concatInfo.data && concatInfo.data.wechatqrcode"
                                                            style="width:130px;height:130px" alt="">
                                                    </div>
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                    ），我们会及时处理。谢谢！
                                </div>
                            </div>
                            <div class="mg-t-30">
                                公寓/酒店/中介房源推广合作请联系：<span class="text-line" @click="clone('ad@gter.net')">ad@gter.net</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="right-tool-box">
                            <div class="dis-f jus-x">
                                <img :src="housingInfo['data'] && housingInfo['data'].info.avatar" class="user-img" alt="">
                            </div>
                            <div class="user-name">
                                {{ housingInfo['data'] && housingInfo['data'].info.author }}
                            </div>
                            <div class="dis-f jus-x"
                                v-if="pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1">
                                <img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" alt="">
                            </div>
                            <div class="dis-f jus-x"
                                v-if="pageType != 2 || (pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary != 1)">
                                <div class="user-type">
                                    {{
                                        indexData['data'] &&
                                        indexData['data']['config'] &&
                                        indexData['data']['config']['intermediary'][
                                        housingInfo['data'] &&
                                        housingInfo['data'].info.intermediary]
                                    }}
                                </div>
                            </div>
                            <div class="dis-f al-item jus-x time-box">
                                <img src="../assets/img/detail/timeIcon.svg" class="icon" alt="">
                                <span>
                                    {{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
                                    }}更新 </span>
                            </div>
                            <div v-if="checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)">
                                <div class="dis-f al-item jus-x time-box" v-if="housingInfo['data'] &&
                                    housingInfo['data'].intermediarylistingcount > 0 &&
                                    housingInfo['data']['info']['intermediary'] == 1 &&
                                    housingInfo['data'].isintermediary == 1">
                                    <img src="../assets/img/detail/presonNumIcon.png" class="icon" alt="">
                                    <span>房源 x{{ housingInfo['data'] && housingInfo['data'].intermediarylistingcount
                                    }}</span>
                                </div>
                                <div class="dis-f al-item jus-x time-box"
                                    v-if="housingInfo['data'] && housingInfo['data'].verifiedlistingcount">
                                    <img src="../assets/img/detail/presonNumIcon.png" class="icon" alt="">
                                    <div class="dis-f al-item">认证房源 x {{ housingInfo['data'] &&
                                        housingInfo['data'].verifiedlistingcount }}</div>
                                </div>
                            </div>
                            <div class="intermediary-info-box" v-if="housingInfo['data'] && housingInfo['data'].contacts">
                                <div v-if="contacts['data'].proxynumber">
                                    <span>
                                        代理人牌照号：
                                    </span>
                                    <span>
                                        {{ contacts['data'].proxynumber }}
                                    </span>
                                </div>
                                <div class="mg-t-10" v-if="contacts['data'].companyname">
                                    <span>
                                        代理人牌照号：
                                    </span>
                                    <span>
                                        {{ contacts['data'].companyname }}
                                    </span>
                                </div>
                                <div class="mg-t-10" v-if="contacts['data'].companyaddress">
                                    <span>
                                        公司地址：
                                    </span>
                                    <span>
                                        {{ contacts['data'].companyaddress }}
                                    </span>
                                </div>
                                <div class="mg-t-10" v-if="contacts['data'].companylicensenumber">
                                    <span>
                                        公司牌照号：
                                    </span>
                                    <span>
                                        {{ contacts['data'].companylicensenumber }}
                                    </span>
                                </div>
                                <div class="dis-f jus-x" v-if="contacts['data'].businesscard">
                                    <div class="business-card-btn dis-f jus-x al-item" @click="showBusinessCard = true">
                                        <img src="../assets/img/detail/businessCard.png" class="logo" alt="">
                                        查看名片
                                    </div>
                                </div>
                            </div>
                            <div class="dis-f jus-x ">
                                <div class="contact-btn" @click="getConcatData">
                                    联系方式
                                </div>
                            </div>
                        </div>
                        <el-affix position="top" :offset="0" @change="changeConcatType">
                        </el-affix>
                        <phoneqrcode class="mg-t-20" type="housing"
                            :qrcode="housingInfo['data'] && housingInfo['data'].qrcode">
                        </phoneqrcode>
                        <groupqrcode></groupqrcode>

                        <!-- <div class="right-tool-box mg-t-20 dis-f al-item jus-x" style="flex-wrap:wrap;">
                            <div class="dis-f jus-x ">
                                <img src="../assets/img/detail/wxTitle.png" class="wx-title" alt="">
                            </div>
                            <div class="dis-f jus-x ">
                                <div class="wx-qrcode-box dis-f jus-x al-item">
                                    <img :src="housingInfo['data'] && housingInfo['data'].qrcode" class="wx-qrcode" alt="">
                                </div>
                            </div>
                            <div class="dis-f jus-x s-w-100">
                                <div class="wx-qrcode-tps-box dis-f al-item">
                                    <img src="../assets/img/detail/qrCodeIcon.png" class="icon" alt="">
                                    手机查看该房源
                                </div>
                            </div>
                        </div> -->
                        <!-- <div class="right-tool-box mg-t-20 dis-f al-item jus-x" style="flex-wrap:wrap;">
                            <div class="dis-f jus-x ">
                                <img src="../assets/img/detail/crowdTitle.png" class="wx-title" alt="">
                            </div>
                            <div class="dis-f jus-x ">
                                <div class="crowd-box dis-f jus-x al-item">
                                    <img :src="concatInfo.data && concatInfo.data.wechatqrcode" class="img" alt="">
                                </div>
                            </div>
                            <div class="dis-f jus-x s-w-100">
                                <div class="wx-qrcode-tps-box dis-f al-item crowd-text">
                                    <img src="../assets/img/detail/qrCodeIcon.png" class="icon" alt="">
                                    入群请添加
                                    <span class="name-text">方同学的小助手</span>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 中介名片弹窗 -->
        <div class="dis-f jus-x al-item business-card-img-pop" v-show="showBusinessCard">
            <img src="../assets/img/detail/imageClose.svg" @click="showBusinessCard = false" class="close-img" alt="">
            <img :src="contacts['data'].businesscard && contacts['data'].businesscard[0].image" class="img" alt="">
        </div>
        <!-- 推荐 -->
        <div class="dis-f jus-x" v-if="pageType != 3 && (recommendListData.length > 0 || publisherList.length > 0)">
            <div class="body-maxWidth housing-title" style="margin-top:50px;">
                {{ pageType == 2 && housingInfo['data'].isintermediary ? `发布者的其他房源（${publisherList.length}）` :
                    pageType == 1 && housingInfo['data'] && housingInfo['data']['info'].verified ?
                        `发布者的其他认证房源（${publisherList.length}）` : '附近房源' }}
            </div>
        </div>
        <div class="dis-f  jus-x al-item" style="position: relative;" v-if="pageType != 3">
            <div class="body-maxWidth" v-show="recommendListData.length > 0">
                <div ref="gridContainer"
                    style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
                    <indexWaterfallBox v-for="(items, i) in recommendListData" :data="items" :key="items.id">
                    </indexWaterfallBox>
                </div>
            </div>
            <div class="body-maxWidth" v-if="publisherList.length > 0">
                <div style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
                    <biserialItem v-for="(item, i) in publisherList" :detailShow="true" :key="i" :item="item">
                    </biserialItem>
                </div>
            </div>
        </div>

        <div class="dis-f jus-x bottom-tps"
            v-if="(pageType === 1 && recommendListData.length > 0) || (pageType === 2 && recommendListData.length > 0 && housingInfo['data'] && housingInfo['data'].isintermediary)">
            - {{ loadText }} -
        </div>
        <footerTool class="mg-t-60"></footerTool>
        <div class="pop-mask" v-show="showConcat">
            <div class="pop-box">
                <!-- 多种信息 -->
                <!-- third-concat -->
                <div class="pop-big-box" v-show="concatData.data && concatData.data.count > 1"
                    :class="{ 'third-concat': concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3 }">
                    <div class="pop-info-box dis-f jus-x al-item"
                        :class="{ 'third-concat': concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3 }">
                        <div class="pop-big-bg dis-f jus-x al-item"
                            :class="{ 'third-concat': concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3 }">
                            <div class="user-liner-box dis-f al-item"
                                :class="{ 'jus-bet': concatData.data && concatData.data.count > 2 }">
                                <!-- class='s-w-100' -->
                                <div class="s-w-100">
                                    <div class="liner-title"
                                        :class="{ 'mg-b-50': concatData.data && concatData.data.count == 2 && concatData.data.wechatdata.url }">
                                        联系方式
                                    </div>
                                    <div class="dis-f jus-bet s-w-100">
                                        <div
                                            v-if="concatData.data && (concatData.data.count > 2 || (!concatData.data.wechatdata.url && concatData.data.count == 2))">
                                            <div class="mg-b-30"
                                                v-if="concatData.data && concatData.data.wechat && concatData.data.count >= 2">
                                                <div class="dis-f al-item">
                                                    <img src="../assets/img/detail/wxIcon.png" class="whatsapp-icon" alt="">
                                                    微信
                                                </div>
                                                <div class="dis-f al-item box-text mg-l-35">
                                                    <div class="num-text">
                                                        {{ concatData.data && concatData.data.wechat }}
                                                    </div>
                                                    <div class="clone-btn dis-f al-item jus-x mg-l-50"
                                                        @click.stop="clone(concatData.data.wechat)">
                                                        <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
                                                        复制
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mg-b-30" v-if="concatData.data && concatData.data.count >= 2">
                                                <div class="dis-f al-item">
                                                    <img src="../assets/img/detail/WhatsAppIcon.png" class="whatsapp-icon"
                                                        alt="">
                                                    WhatsApp
                                                </div>
                                                <div class="dis-f al-item box-text mg-l-35">
                                                    <div class="num-text">
                                                        {{ concatData.data && concatData.data.whatsapp }}
                                                    </div>
                                                    <div class="clone-btn dis-f al-item jus-x mg-l-50"
                                                        @click.stop="clone(concatData.data.whatsapp)">
                                                        <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
                                                        复制
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mg-b-30"
                                                v-if="concatData.data && concatData.data.tel && concatData.data.count >= 2">
                                                <div class="dis-f al-item">
                                                    <img src="../assets/img/detail/phoneIcon.png" class="whatsapp-icon"
                                                        alt="">
                                                    电话号码
                                                </div>
                                                <div class="dis-f al-item box-text mg-l-35">
                                                    <div class="num-text">
                                                        {{ concatData.data && concatData.data.tel }}
                                                    </div>
                                                    <div class="clone-btn dis-f al-item jus-x mg-l-50"
                                                        @click.stop="clone(concatData.data.tel)">
                                                        <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
                                                        复制
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                            v-if="concatData.data && concatData.data.count > 2 && concatData.data.wechatdata.url">
                                            <div class="wx-qrcode-s dis-f jus-x al-item">
                                                <img :src="concatData.data && concatData.data.wechatdata.url"
                                                    class="user-img" alt="">
                                            </div>
                                            <div style="margin-top:15px;font-size:14px;text-align: center;">
                                                <div>
                                                    微信扫码添加好友
                                                </div>
                                                <div style="margin-top:5px;font-size:14px;">
                                                    备注：寄托租房
                                                </div>
                                            </div>
                                        </div>
                                        <div class="round dis-f jus-x al-item"
                                            :class="{ 'mg-t-20': concatData.data && concatData.data.count > 2 && !concatData.data.wechatdata.url }"
                                            v-if="concatData.data && concatData.data.count >= 2 && !concatData.data.wechatdata.url">
                                            <div class="deepen dis-f jus-x al-item">
                                                <div class="center-box dis-f jus-x al-item">
                                                    <div class="center-s dis-f jus-x al-item">
                                                        <div class="drop">

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="dis-f al-item whatsapp-wx-box s-w-100 jus-sp"
                                        v-if="concatData.data && concatData.data.count === 2 && concatData.data.wechatdata.aid !== 0 && concatData.data.wechatdata.url">
                                        <div>
                                            <div>
                                                <div v-if="concatData.data.whatsapp">
                                                    WhatsApp
                                                </div>
                                                <div v-if="concatData.data.tel">
                                                    电话
                                                </div>
                                                <div v-if="concatData.data.wechat">
                                                    微信
                                                </div>
                                            </div>
                                            <div class="text-s">
                                                {{ concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat
                                                    ||
                                                    '' }}
                                            </div>
                                            <div class="dis-f jus-x al-item mg-t-60">
                                                <div class="clone-btn dis-f al-item jus-x"
                                                    @click.stop="clone(concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || '')">
                                                    <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
                                                    复制
                                                </div>
                                            </div>
                                        </div>
                                        <div class="liner" v-if="concatData.data && concatData.data.wechatdata.url"></div>
                                        <div v-if="concatData.data && concatData.data.wechatdata.url">
                                            <div class="wx-qrcode-s dis-f jus-x al-item">
                                                <img :src="concatData.data && concatData.data.wechatdata.url"
                                                    class="user-img" alt="">
                                            </div>
                                            <div style="margin-top:15px;font-size:14px;text-align: center;">
                                                <div>
                                                    微信扫码添加好友
                                                </div>
                                                <div style="margin-top:5px;font-size:14px;">
                                                    备注：寄托租房
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="round dis-f jus-x al-item"
                                            v-if="concatData.data && !concatData.data.wechatdata.url">
                                            <div class="deepen dis-f jus-x al-item">
                                                <div class="center-box dis-f jus-x al-item">
                                                    <div class="center-s dis-f jus-x al-item">
                                                        <div class="drop">

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                            <img src="../assets/img/detail/threePopBigBg.svg" class="pop-bg third-bg" style="width:700px;"
                                alt=""
                                v-if="concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3">
                            <img src="../assets/img/detail/threePopbigMap.svg" style="width:700px;"
                                v-if="concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3"
                                class="map third-bg" alt="">
                            <img src="../assets/img/detail/popBigBg.svg"
                                v-if="concatData.data && concatData.data.count === 3 ? concatData.data.wechatdata.url : concatData.data && concatData.data.count < 3"
                                class="pop-bg third-bg" alt="">
                            <img src="../assets/img/detail/popBigBgMap.svg"
                                v-if="concatData.data && concatData.data.count === 3 ? concatData.data.wechatdata.url : concatData.data && concatData.data.count < 3"
                                class="map third-bg" alt="">
                        </div>
                    </div>
                    <img src="../assets/img/detail/bigPopBg.svg"
                        v-if="concatData.data && concatData.data.count === 3 ? concatData.data.wechatdata.url : concatData.data && concatData.data.count < 3"
                        class="pop-big-bg" alt="">
                    <img src="../assets/img/detail/threeConcatbgImg.svg"
                        v-if="concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3"
                        class="third-concat" alt="">
                    <img src="../assets/img/detail/close.png" class="close-img" @click="showConcat = false" alt="">
                </div>
                <!-- 一种信息 -->
                <div class="pop" v-show="concatData.data && concatData.data.count === 1">
                    <div class="pop-bg-s-box dis-f jus-x al-item">
                        <div class="pop-bg-s">
                            <div class="pos-a pop-bg-s" style="z-index:666;">
                                <div class="title s-w-100">
                                    联系方式
                                </div>
                                <div class="s-w-100 mg-t-35" v-if="concatData.data && concatData.data.wechatdata.aid != 0">
                                    <div class="wx-qrcode s-w-100 dis-f al-item jus-x">
                                        <img :src="concatData.data && concatData.data.wechatdata.url" class="img" alt="">
                                    </div>
                                    <div style="margin-top:15px">
                                        <div>
                                            微信扫码添加好友
                                        </div>
                                        <div style="margin-top:5px">
                                            备注：寄托租房
                                        </div>
                                    </div>
                                </div>
                                <div class="s-w-100"
                                    v-if="concatData.data && (concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat)">
                                    <div class="whatsapp-title" v-if="concatData.data.whatsapp">
                                        WhatsApp
                                    </div>
                                    <div class="whatsapp-title" v-if="concatData.data.tel">
                                        电话
                                    </div>
                                    <div class="whatsapp-title" v-if="concatData.data.wechat">
                                        微信
                                    </div>
                                    <div class="whatsapp-text">
                                        {{ concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || ''
                                        }}
                                    </div>
                                </div>
                                <div class="s-w-100 dis-f jus-x al-item mg-t-35">
                                    <div class="clone-btn dis-f al-item jus-x"
                                        v-if="concatData.data && (concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat)"
                                        @click.stop="clone(concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat)">
                                        <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
                                        复制
                                    </div>
                                </div>
                            </div>
                            <img src="../assets/img/detail/popSBg.svg" class="pop-bg-s pos-a" alt="">
                            <img src="../assets/img/detail/popSbgMap.svg" class="pop-bg-s" alt="">
                        </div>
                    </div>
                    <img src="../assets/img/detail/close.png" @click="showConcat = false" class="close-img" alt="">
                    <img src="../assets/img/detail/popBg.svg" class="img" alt="">
                </div>
            </div>
        </div>


    </div>
    <watchImage :show="imageShow" :index="imageIndex" :close="cloaseImageShow" :list="imgList"></watchImage>
    <back-to-top></back-to-top>
    <!-- 举报 -->
    <report :id="uniqid"></report>
</template>
  
<script setup>
import { reactive, onMounted, ref, nextTick, onBeforeUnmount, watch } from 'vue'
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import api from "../utils/api";
import footerTool from '@/components/footer/footer.vue'
import watchImage from '../components/detail/imageWatch.vue'
import breadcrumb from '../components/detail/breadcrumb.vue'
import mapInfo from '../components/public/viewMap.vue'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
import Masonry from 'masonry-layout';
import transmitBtn from '@/components/public/transmitBtn.vue'
import biserialItem from '../components/biserialListItem/biserialListItem.vue'
import backToTop from '@/components/public/backToTop.vue'
import phoneqrcode from '@/components/public/phoneQRcode.vue';
import groupqrcode from '@/components/public/group-QRcode.vue';
import report from '@/components/public/report.vue'

import store from '@/store';

//页面类型
let pageType = ref('')

//加载状态
let loadMore = ref(true)
//推荐列表页数
let pages = ref(1)
let uniqid = ref('')

//显示中介名片
let showBusinessCard = ref(false)
//查看图片
let imageShow = ref(false)
let imageIndex = ref(0)
let cloaseImageShow = () => {
    imageShow.value = false
}

//图片组实例
let imageList = ref(null)
//图片数组
let imgList = ref([])

//图片距离
let imageLIstLeft = ref([])

let imgListTab = ref(0)
//计时器
let interval = ''
let clientWidth = ref(null)
let scrollWidth = ref(null)
//点击方向按钮
let moveImageList = (type) => {
    if (type === 'right' && imgScrollBottom()) return
    if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIstLeft.value.length - 1 && type === 'right')) return
    type === 'left' ? imgListTab.value-- : imgListTab.value++
    setOffsetWidth(imageLIstLeft.value[imgListTab.value], type)
}
//设置滚动
let setOffsetWidth = (num, type) => {
    let scroll = 0
    interval = setInterval(() => {
        if (!imageList.value) {
            clearInterval(interval)
            return
        }
        scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
        if ((type === 'left' ? num >= scroll : num <= scroll) || scroll + clientWidth.value >= scrollWidth.value) {
            clearInterval(interval)
        }
    })
}

//判断是否触底
let imgScrollBottom = () => {
    let clientWidth = imageList.value.clientWidth
    let scrollWidth = imageList.value.scrollWidth
    return imageLIstLeft.value[imgListTab.value] + clientWidth >= scrollWidth
}

let imgData = ref(null)
//获取图片宽度
let setImageWidth = (num) => {
    imageLIstLeft.value[num] = imgData.value[num] && imgData.value[num].offsetLeft - 20
    if (imageLIstLeft.value.length === imgList.value.length) {
        clientWidth.value = imageList.value.clientWidth
        scrollWidth.value = imageList.value.scrollWidth
    }
}

//学校地址数据
let distanceList = ref([])

//地址数字高亮
let setDistanceList = (text = '') => {
    if (!text) return text
    let oRegExp = new RegExp(/\d+(\.\d+)?/, "g");
    text = text.replace(/\d+(\.\d+)?/g, `<span style="font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                            font-weight: 400;font-style: normal;
                            font-size: 14px;
                            color: #62B1FF;
                            margin-left: 5px;">${text.match(oRegExp) ? text.match(oRegExp)[0] : ''}公里</span>`)
    return text
}

//显示详情
let showDistance = ref(false)
//学校地址详情
let setShowDistance = () => {
    showDistance.value = !showDistance.value
}

let titleType = ref(false)
//标题
let changeTitleType = () => {
    titleType.value = !titleType.value
}

let concatType = ref(false)
//联系方式顶部显示
let changeConcatType = () => {
    concatType.value = !concatType.value
}

//复制
let clone = (text) => {
    const textareaEle = document.createElement("textarea");
    document.body.appendChild(textareaEle);
    // 2. 将需要复制的文本传入输入框, 并调用 select 方法, 选中输入框中文本
    textareaEle.value = text;
    textareaEle.select();
    textareaEle.readOnly = 'readOnly';
    // 3. 调用复制选中文本的方法
    document.execCommand('copy');
    // 4. 销毁输入框
    document.body.removeChild(textareaEle);
    ElMessage({
        message: '复制成功',
        center: true,
        offset: 320,
        duration: 1000,
        customClass: 'message-info'
    })
}

//显示联系方式
let showConcat = ref(false)

//数据包
let indexData = reactive({})
//房源详情
let housingInfo = reactive({})
//联系
let concatInfo = reactive({})

let setHousingArr = () => {
    // let arr = []
    // arr = housingInfo['data'].info.video ? arr.concat(housingInfo['data'] && housingInfo['data'].info.video) : []
    // arr = housingInfo['data'].info.picturegroup ? arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup) : []
    // imgList.value = imgList.value.concat(arr)

    if (housingInfo['data'].info.video) {
        housingInfo['data'].info.video.forEach(element => {
            element['type'] = 'videos'
        })

        imgList.value = [...imgList.value, ...housingInfo['data'].info.video]
    }
    if (housingInfo['data'].info.picturegroup) {
        housingInfo['data'].info.picturegroup.forEach(element => {
            element['type'] = 'attachment'
        })
        imgList.value = [...imgList.value, ...housingInfo['data'].info.picturegroup]
    }


}

let location = store.state.indexData.config && store.state.indexData.config.location
//设置顶部导航
// intermediary 1中介 2-5个人 6求房源
let setNavigation = () => {
    let type = store.state.indexData.config && store.state.indexData.config.type
    indexData['data'] = store.state.indexData
    if (!location) return
    if (pageType.value == 1 || pageType.value == 2) {
        // location=3.8,3.13&areaItem=3
        store.state.routeList['secondaryIndex'] = {
            path: pageType.value === 2 ? '/intermediaryHousing' :
                pageType.value === 3 ? '/needHousing' : '/personHousing',
            title: pageType.value === 2 ? '中介房源' :
                pageType.value === 3 ? '求房源' : '个人房源'
        }
        store.state.routeList['thirdIndex'] = {
            path: `${store.state.routeList['secondaryIndex'].path}`,
            query: {
                location: '',
                areaItem: housingInfo['data']['info'].location.substring(0, 1),
                types: housingInfo['data']['info'].type.substring(0, 1)
            },
            title: `${location[housingInfo['data']['info'].location.substring(0, 1)]}${type[housingInfo['data']['info'].type.substring(0, 1)]}房源`
        }
        if (housingInfo['data']['info'].location.length > 0)
            store.state.routeList['fourthIndex'] = {
                query: {
                    location: housingInfo['data']['info'].location.substring(0, 3),
                    areaItem: housingInfo['data']['info'].location.substring(0, 1),
                    types: housingInfo['data']['info'].type
                },
                path: `${store.state.routeList['secondaryIndex'].path}`,

                title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
            }
    } else {
        store.state.routeList = {
            index: {
                path: '/',
                title: '港校租房'
            },
            secondaryIndex: {
                path: '/needHousing',
                title: '求房源'
            }
        }
    }
    // console.log(111, store.state.routeList)
}
//中介数据
let contacts = reactive({
    data: {
    }
})

//获取房源详情
let getHousingInfo = () => {
    api.details({
        uniqid: uniqid.value
    }).then(res => {
        console.log(res)
        if (res.code === 200) {
            housingInfo['data'] = res.data
            pageType.value = housingInfo['data']['info'].intermediary === 1 ? 2 : housingInfo['data']['info'].intermediary === 6 ? 3 : 1   //1个人  2中介  3求房源
            setHousingArr()
            setNavigation()
            distanceList.value = housingInfo['data']['info'].pointData || []
            distanceList.value.unshift({
                address: true,
                name: housingInfo['data']['info'].address,
            })
            concatInfo['data'] = store.state.indexData.wechat
            if (res.data.contacts) contacts['data'] = res.data.contacts
            if ((pageType.value == 2 && housingInfo['data'].isintermediary) || (pageType.value == 1 && housingInfo['data']['info'].verified)) {
                getPublisherList()
            } else if (pageType.value != 3) {
                recommendList()
            } else {
                loadMore.value = false
            }

        } else {
            ElMessage({
                message: res.message
            })
        }
    })
}

//收藏
let setOperation = () => {
    api.operation({
        token: housingInfo['data'].token
    }).then(res => {
        console.log(res)
        if (res.code === 200) {
            housingInfo['data'].info.count_fav = res.data.count
            housingInfo['data'].isfav = res.data.status
        } else {
            ElMessage({
                message: res.message
            })
        }
    })
}

//获取联系方式
let concatData = reactive({})
let getConcatData = () => {
    if (concatData['data']) {
        showConcat.value = true
        return
    }
    api.contactData({
        token: housingInfo['data'].token
    }).then(res => {
        if (res.code === 200) {
            showConcat.value = true
            concatData['data'] = res.data
            let dataCount = 0
            Object.keys(concatData['data']).map(res => {
                if ((concatData['data'][res] && res != 'wechatdata') || (res === 'wechatdata' && concatData['data'][res].aid != 0)) {
                    dataCount++
                }
            })
            concatData['data']['count'] = dataCount
        }
    })
}

//判断更新时间
let checkUpdateTime = (Time) => {
    const now = new Date();
    let time = new Date(Time)
    const diff = now - time;
    const seconds = Math.floor(diff / 1000);
    const minutes = Math.floor(seconds / 60);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    if (seconds < 60) return `${seconds}秒前`;
    else if (minutes < 60) return `${minutes}分钟前`;
    else if (hours < 24) return `${hours}小时前`;
    else if (days < 7) return `${days}天前`;
    else return Time;
}

//监听滚动条
const onPageSrcoll = (e) => {
    let body = document.documentElement ? document.documentElement : document.body ?
        document.body :
        document.querySelector('.element');
    let scrollTop = body.scrollTop
    let clientHeight = body.clientHeight
    let offsetHeight = body.offsetHeight
    if (scrollTop + clientHeight === offsetHeight) {
        if (loadMore.value) {
            loadMore.value = false
            pages.value += 1
            if (housingInfo['data'] && housingInfo['data'].isintermediary) {
                getPublisherList()
            } else {
                recommendList()
            }
        }
    }
}

//瀑布流列表
let recommendListData = ref([])
//广告参数
let pagevalue = ref(0)
//加载提示
let loadText = ref('下拉加载更多')
//获取瀑布流数据
let recommendList = () => {
    loadText.value = '加载中.....'
    api.recommendList({
        page: pages.value,
        limit: 30,
        type: 'nearby',
        pagevalue: pagevalue.value,
        token: housingInfo['data'].token
    }).then(res => {
        console.log(res)
        if (res.code === 200) {
            if (res.data.data && res.data.data.length >= 30) {
                loadMore.value = true
                loadText.value = '下拉加载更多'
            } else {
                loadMore.value = false
                loadText.value = '到底了'
            }
            if (res.data.length === 0) return
            if (res.data.pagevalue) {
                recommendListData.value = recommendListData.value.concat(res.data.data)
                pagevalue.value = res.data.pagevalue
            }
            nextTick(() => {
                masonryInstance.reloadItems();
                masonryInstance.layout();

                setTimeout(() => {
                    masonryInstance.reloadItems();
                    masonryInstance.layout();
                }, 3000)
            })
        } else {
            ElMessage({
                message: res.message,
                center: true,
            })
        }
    })
}

//发布者其他房源
let publisherList = ref([])
//获取发布者其他房源
let getPublisherList = () => {
    api.publisherList({
        page: pages.value,
        limit: 30,
        token: housingInfo['data'].token
    }).then(res => {
        console.log(res)
        if (res.code === 200) {
            if (res.data.length >= 30) {
                loadMore.value = true
            } else {
                loadMore.value = false
                loadText.value = '到底了'
            }
            publisherList.value = publisherList.value.concat(res.data)
        } else {
            ElMessage({
                message: res.message,
            })
        }
    })
}

//瀑布流模块
const gridContainer = ref(null);
let masonryInstance = null

let router = useRouter()
let route = useRoute()

watch(route, () => {
    let { id } = router.currentRoute.value.query
    uniqid.value = id
    pageType.value = housingInfo['data']['info'].intermediary === 1 ? 2 : housingInfo['data']['info'].intermediary === 6 ? 3 : 1  //1个人  2中介  3求房源
    publisherList.value = []
    recommendListData.value = []
    getHousingInfo()
})

onMounted(() => {
    let { id } = router.currentRoute.value.query
    uniqid.value = id
    getHousingInfo()
    masonryInstance = new Masonry(gridContainer.value, {
        itemSelector: '.item',
        gutter: 10
    });
    if (pageType.value != 3) {
        window.addEventListener('scroll', onPageSrcoll);
        document.body.scrollTop = 0
    }
})

onBeforeUnmount(() => {
    window.removeEventListener('scroll', onPageSrcoll);
})

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

.dis-f {
    display: flex;
}

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

.jus-sp {
    justify-content: space-around;
}

.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-20 {
    margin-top: 20px;
}

.text-line {
    text-decoration: underline;
    cursor: pointer;
    margin-left: 5px;
}

.pos-a {
    position: absolute;
}

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

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

.bottom-tps {
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #555555;
    text-align: center;
    padding: 30px 0;
}

.need-houing-type {
    background-color: rgba(80, 227, 194, 1);
    border: none;
    border-radius: 6px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #FFFFFF;
    text-align: center;
    padding: 0px 5px;
    font-size: 14px;
    margin-right: 10px;
    height: 24px;
    line-height: 24px;
}

.clone-btn {
    width: 100px;
    height: 32px;
    background: inherit;
    background-color: rgba(97, 177, 252, 1);
    border: none;
    border-radius: 46px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;

    .icon {
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }
}

.business-card-img-pop {
    width: 100vw;
    height: 100vh;
    background: #4c4c4c;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .close-img {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
    }

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

.pop-box {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .third-concat {
        height: 560px !important;
    }

    .third-bg {
        height: 480px !important;
    }

    .pop-big-box {
        width: 800px;
        height: 460px;
        background: -webkit-linear-gradient(55.7576382179894deg, rgba(255, 255, 255, 1) 33%, rgba(253, 223, 109, 1) 100%);
        background: -moz-linear-gradient(34.2423617820106deg, rgba(255, 255, 255, 1) 33%, rgba(253, 223, 109, 1) 100%);
        background: linear-gradient(34.2423617820106deg, rgba(255, 255, 255, 1) 33%, rgba(253, 223, 109, 1) 100%);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(230, 221, 185, 1);
        border-radius: 0px;
        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
        position: relative;

        .pop-info-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            .pop-big-bg {
                width: 700px;
                height: 368px;
                font-family: 'ArialMT', 'Arial', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 13px;
                letter-spacing: normal;
                color: #333333;

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

                .round {
                    width: 180px;
                    height: 180px;
                    background: rgba(218, 246, 241, 0.5);
                    border-radius: 50%;

                    .deepen {
                        width: 130px;
                        height: 130px;
                        border-radius: 50%;
                        background: rgba(192, 239, 236, 0.4);

                        .center-box {
                            width: 80px;
                            height: 80px;
                            border-radius: 50%;
                            background: rgba(155, 236, 220, 0.6);

                            .center-s {
                                width: 30px;
                                height: 30px;
                                border-radius: 50%;
                                background: rgba(80, 227, 194, 0.7);

                                .drop {
                                    width: 8px;
                                    height: 8px;
                                    border-radius: 50%;
                                    background: rgba(253, 223, 109, 1);
                                }
                            }
                        }
                    }
                }

                .user-liner-box {
                    width: 700px;
                    height: 368px;
                    position: absolute;
                    z-index: 333;
                    padding: 0px 80px 0 45px;
                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 16px;

                    .wx-qrcode-s {
                        width: 130px;
                        height: 130px;
                        border-radius: 8px;
                        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
                        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
                        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
                        background: #fff;

                        .user-img {
                            width: 125px;
                            height: 125px;
                        }
                    }

                    .whatsapp-wx-box {
                        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 16px;
                        text-align: center;

                        .text-s {
                            font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                            font-weight: 650;
                            font-style: normal;
                            font-size: 24px;
                            color: #000000;
                            margin-top: 50px;
                        }

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

                        .liner {
                            width: 1px;
                            height: 190px;
                            border: 1px solid #e2e7ec;
                            margin: 0 30px 0 30px
                        }
                    }

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

                    .mg-b-50 {
                        margin-bottom: 50px;
                    }

                    .mg-b-30 {
                        margin-bottom: 30px;
                    }

                    .box-text {
                        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                        font-weight: 650;
                        font-style: normal;
                        font-size: 18px;
                        color: #000000;
                        margin-top: 20px;

                        .num-text {
                            width: 180px;
                            word-wrap: break-word;
                        }
                    }

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

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

                    .whatsapp-box {
                        margin-top: 30px;
                    }

                    .whatsapp-icon {
                        width: 25px;
                        height: 24px;
                        margin-right: 10px;
                    }
                }

                .pop-bg {
                    width: 690px;
                    height: 358px;
                    position: absolute;
                    z-index: 222;
                }

                .map {
                    width: 700px;
                    height: 368px;
                }
            }
        }
    }

    .close-img {
        width: 16px;
        height: 16px;
        position: absolute;
        right: 15px;
        top: 15px;
        cursor: pointer;
    }

    .pop-bg-s-box {
        width: 400px;
        height: 400px;
        position: absolute;

        .pop-bg-s {
            width: 320px;
            height: 320px;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            text-align: center;
            color: #333;
            font-size: 14px;

            .whatsapp-title {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 16px;
                margin-top: 60px;
            }

            .whatsapp-text {
                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                font-weight: 650;
                font-style: normal;
                font-size: 24px;
                color: #000000;
                margin-top: 25px;
            }

            .wx-qrcode {
                width: 146px;
                height: 146px;
                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: 8px;
                -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);
                margin: 0 auto;

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

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

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

            .title {
                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                font-weight: 650;
                font-style: normal;
                font-size: 20px;
                color: #000000;
                text-align: center;
                margin-top: 25px;
            }
        }
    }


    .pop {
        width: 400px;
        height: 400px;
        background: -webkit-linear-gradient(68.6007191374175deg, rgba(255, 255, 255, 1) 17%, rgba(253, 223, 109, 1) 100%);
        background: -moz-linear-gradient(21.3992808625825deg, rgba(255, 255, 255, 1) 17%, rgba(253, 223, 109, 1) 100%);
        background: linear-gradient(21.3992808625825deg, rgba(255, 255, 255, 1) 17%, rgba(253, 223, 109, 1) 100%);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(230, 221, 185, 1);
        border-radius: 0px;
        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
        position: relative;

        .bg-img {
            height: 400px;
            width: 400px;
        }
    }
}

.top-contact-btn {
    width: 200px !important;
}

.contact-btn {
    width: 260px;
    height: 48px;
    background: -webkit-linear-gradient(89.9999999999999deg, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
    background: -moz-linear-gradient(1.27897692436818E-13deg, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
    background: linear-gradient(1.27897692436818E-13deg, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(204, 230, 255, 1);
    border-radius: 46px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
    color: #3B6C99;
    text-align: center;
    line-height: 48px;
    margin-top: 35px;
    cursor: pointer;
}

.top-bar-box {
    width: 100%;

    .line {
        width: 1px;
        height: 19px;
        margin: 0 20px;
        background: #ebebeb;
    }

    .authentication-housing {
        width: 88px;
        height: 16px;
    }

    .intermediary-logo {
        width: 85px;
        height: 20px;
    }

    .top-bar {
        width: 1200px;
        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 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;
        padding: 15px 35px;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #333333;

        .unit {
            font-family: 'Arial-Black', 'Arial Black', sans-serif;
            font-weight: 900;
            color: #000000;
        }

        .rent {
            font-family: 'Arial-Black', 'Arial Black', sans-serif;
            font-weight: 900;
            color: #F95D5D;
            margin: 0 5px;
        }

        .icon {
            width: 12px;
            height: 12px;
            margin: 0 8px;
        }

        .concat-btn-box {
            width: 0px;
            overflow: hidden;
            transition: all 0.2s linear;
        }

        .concat-btn-show {
            width: 210px;
        }

        .tool-btn {
            width: 199px;
            height: 48px;
            background: inherit;
            background-color: rgba(246, 246, 246, 0);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(235, 235, 235, 1);
            border-radius: 122px;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 14px;
            cursor: pointer;

            .tool-icon {
                width: 20px;
                height: 20px;
                margin-right: 8px;
            }
        }
    }
}


.right-tool-box {
    width: 304px;
    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 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;
    padding: 35px 25px;

    .intermediary-info-box {
        width: 100%;
        background: inherit;
        background-color: rgba(246, 246, 246, 0.603921568627451);
        border: none;
        border-radius: 8px;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        color: #7F7F7F;
        padding: 20px 10px;
        margin-top: 30px;
        box-sizing: border-box;
        line-height: 20px;
        word-wrap: break-word;

        .business-card-btn {
            width: 100px;
            height: 30px;
            background: inherit;
            background-color: rgba(246, 246, 246, 0);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(215, 215, 215, 1);
            border-radius: 4px;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            margin-top: 15px;

            .logo {
                width: 22px;
                height: 22px;
                margin-right: 8px;
            }
        }

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

    .intermediary-logo {
        width: 85px;
        height: 20px;
        margin-top: 15px;
    }

    .wx-title {
        width: 201px;
        height: 24px;
    }

    .crowd-text {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif !important;
        font-weight: 400 !important;
        color: #555555 !important;
    }

    .wx-qrcode-tps-box {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #000000;
        margin-top: 30px;

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

    .crowd-box {
        width: 120px;
        height: 120px;
        margin-top: 30px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 15px;
        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);

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

    .name-text {
        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
        font-weight: 650;
        color: #000000;
        font-size: 14px;
        margin-left: 8px;
    }

    .wx-qrcode-box {
        width: 120px;
        height: 120px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 70px;
        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        margin-top: 30px;

        .wx-qrcode {
            width: 103px;
            height: 103px;
            border-radius: 50%;
        }
    }

    .user-img {
        width: 74px;
        height: 74px;
        border-radius: 50%;
    }

    .user-name {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        text-align: center;
        color: #333;
        margin-top: 8px;
    }

    .user-type {
        margin-top: 15px;
        background: inherit;
        background-color: rgba(98, 177, 255, 1);
        border: none;
        border-radius: 42px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #FFFFFF;
        text-align: center;
        line-height: 24px;
        padding: 0px 6px;
    }

    .time-box {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #555555;
        margin-top: 25px;

        .icon {
            width: 16px;
            height: 16px;
            margin-right: 8px;
        }
    }
}

.info-box {
    width: 876px;
    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 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;
    padding: 30px 20px;
    position: relative;
    /* z-index: 333; */

    .detail-price-box {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #555555;
        line-height: 16px;

        .rent {
            font-family: 'Arial-Black', 'Arial Black', sans-serif;
            font-weight: 900;
            font-size: 28px;
            color: #F95D5D;
            margin: 0 5px;
            line-height: 22px;
        }

        .unit {
            font-family: 'Arial-Black', 'Arial Black', sans-serif;
            font-weight: 900;
            color: #000000;
            line-height: 13px;
        }

        .line-h-17 {
            line-height: 17px;
        }
    }

    .detail-condition-box {
        width: 816px;
        height: 80px;
        background: inherit;
        background-color: rgba(246, 246, 246, 1);
        border: none;
        border-radius: 12px;
        margin-top: 30px;

        .condition-border {
            border-right: 1px solid #ebebeb;
        }

        .condition {
            padding: 15px 0;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #7F7F7F;
            width: 272px;

            .icon {
                border: 6px solid #61b1fc;
                border-top: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 6px solid transparent;
                margin-right: 10px;
            }

            .type-text {
                margin-top: 8px;
                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                font-weight: 650;
                font-style: normal;
                font-size: 17px;
                color: #000000;
                margin-left: 22px;
            }
        }
    }

    .image-box {
        margin-top: 50px;

        .img-video {
            width: 26px;
            height: 26px;
            margin-right: 5px;
        }

        .img-icon {
            width: 22px;
            height: 22px;
            margin: 0 5px 0 10px;
        }

        .num-box {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fdda55;
            line-height: 20px;
            text-align: center;
            color: #333333;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
        }

        .img-list-box {
            padding: 0 20px;
            position: relative;
            overflow: hidden;
            height: 115px;
            width: 100%;
            cursor: pointer;
            margin-top: 15px;

            .list-box::-webkit-scrollbar {
                display: none;
            }

            .list-box {
                overflow-x: scroll;
                height: 120px;
                color: #fff;

                .icon-box {
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: rgba(51, 51, 51, 0.733333333333333);
                    width: 100px;
                    height: 100px;
                    border-radius: 10px;
                    z-index: 66;

                    .icon {
                        width: 30px;
                        height: 30px;
                    }
                }

                .video {
                    width: 100px;
                    height: 100px;
                    border-radius: 10px;
                    margin-right: 10px;
                    flex-shrink: 0;
                    position: relative;
                }

                .img {
                    height: 100px;
                    border-radius: 10px;
                    margin-right: 10px;
                    flex-shrink: 0
                }
            }

            .icon {
                width: 10px;
                height: 17px;
            }

            .left-icon {
                position: absolute;
                left: 0px;
            }

            .right-icon {
                position: absolute;
                right: 0px;
            }
        }
    }

    .housing-info {
        margin-top: 60px;

        .need-housing-location {
            margin-top: 20px;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 16px;
            color: #000000;

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

            .text-box {
                width: 700px;
                word-wrap: break-word;
            }

            .icon {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: #fdda55;
                margin: 0 8px;

                .icon-img {
                    width: 5px;
                    height: 8px;
                }
            }
        }

        .need-housing-info {
            margin-top: 30px;

            .info {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                color: #7F7F7F;
                font-size: 14px;

                .title-box {
                    width: 120px;
                }

                .text {
                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 16px;
                    color: #333;
                    padding: 10px 0;
                    border-bottom: 1px dashed rgba(237, 237, 237, 1);
                    width: 100%;
                }

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

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

        .info-box-s {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;

            .info {
                width: 276px;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                color: #7F7F7F;
                font-size: 14px;

                .title-box {
                    width: 65px;
                }

                .text {
                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 16px;
                    color: #333;
                    margin-left: 25px;
                }
            }
        }

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

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

    .statement-box {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #7F7F7F;
        font-size: 13px;
        margin-top: 30px;

        .line-h-30 {
            line-height: 30px;
        }

        .wx-qrcode-s {
            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.078431372);
            padding: 15px;

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

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

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

        .title {
            font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
            font-weight: 700;
            font-style: normal;
            font-size: 15px;
            color: #7F7F7F;
        }
    }

    .houseing-info-box {
        width: 100%;
        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: 10px;
        margin-top: 45px;
        padding: 10px 15px;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #7F7F7F;
        font-size: 13px;

        .houseing-info-box-s {
            height: 17px;
            width: 1px;
            background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
            background-size: 4px 2px;
            background-repeat: repeat-y;
        }

        .browse-box {
            margin-left: 130px;

            .text {
                margin-left: 10px;
            }
        }

        .houseing-id {
            text-decoration: underline;
            cursor: pointer;
            margin-left: 5px;
        }
    }

    .map-box {
        margin-top: 60px;

        .introduce-text {
            line-height: 35px;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 16px;
            color: #333;
            margin-top: 20px;
            word-wrap: break-word;
        }

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

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

            .more-icon {
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }
        }

        .map-s {
            width: 100%;
            height: 300px;
            border-radius: 10px;
            position: relative;

            .pop-box {
                position: absolute;
                width: 100%;
                height: 300px;
                background-color: rgba(51, 51, 51, 0.298039215686275);
                border-radius: 10px;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;

                .address-box {
                    width: 180px;
                    height: 40px;
                    background: inherit;
                    background-color: rgba(51, 51, 51, 0.8);
                    border: none;
                    border-radius: 10px;
                    -moz-box-shadow: none;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 18px;
                    color: #FFFFFF;
                    padding: 10px;

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

                    .icon {
                        width: 8px;
                        height: 12px;
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }

    .show-distance-info-box {
        border-width: 1px;
        /* border-style: solid; */
        border-color: rgba(235, 235, 235, 1);
        -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);
        transition: all 0.2s linear;
    }

    .distance-info-box {
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        height: 0;
        border-radius: 16px;
        position: absolute;
        left: 0;
        top: 130px;
        z-index: 666;
        width: 100%;
        max-height: 610px;
        transition: all 0.2s linear;
        overflow: hidden;

        .top-box {
            height: 70px;
        }

        .distance-box-s {
            height: 500px;
            overflow-y: scroll;
        }
        .distance-box-s ::-webkit-scrollbar{
            width: 8px;
        }

        .distance-info-data {
            padding: 30px 45px 0 45px;
            position: relative;
            justify-content: space-around;
            flex-direction: column;

            .home-icon {
                background: #ffcc17 !important;
            }

            .icon-box {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: #50e3c2;
                margin-right: 15px;
                position: relative;
            }

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

            .line {
                background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
                background-size: 5px 2px;
                background-repeat: repeat-y;
                height: 50px;
                width: 1px;
                position: absolute;
                top: -50px;
            }

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

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

                .address-info {
                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 14px;
                    color: #333;
                    margin-left: 30px;
                }
            }
        }

        .title-box {
            position: absolute;
            top: 0;
            left: 0;
            height: 70px;
            background: -webkit-linear-gradient(270deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
            background: -moz-linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
            background: linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(235, 235, 235, 1);
            border-radius: 16px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            width: 100%;

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

            .close-icon {
                width: 16px;
                height: 16px;
                position: absolute;
                right: 20px;
            }
        }
    }

    .distance-box {
        width: 100%;
        height: 101px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(242, 242, 242, 1);
        border-radius: 12px;
        margin-top: 20px;
        cursor: pointer;
        position: relative;
        /* ::-webkit-scrollbar {
            display: none;
        } */

        .line-school-box {
            width: 100%;
            height: 101px;

            .box-text {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                color: #000000;
            }

            .text-c {
                text-align: center
            }

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

            .marker-icon {
                width: 10px;
                height: 10px;
                margin: 10px auto;
            }
        }

        .line-img {
            height: 2px;
            width: 743px;
            background-image: linear-gradient(to right, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
            background-size: 4px 2px;
            background-repeat: repeat-x;
        }

        .address-box {
            height: 100%;
            padding: 15px 0;
            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;

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

            .address-text {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                color: #000000;
                text-align: center;
            }
        }

        .info-btn-bg {
            width: 90px;
            height: 101px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            .info-btn-s {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                color: #000000;
                text-align: center;
                position: absolute;
                z-index: 66;

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

.pop-mask {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
</style>
<style>
.message-info {
    background: #000000;
    border-color: #000000;
    color: #fff;

    .el-message__content {
        color: #fff;
    }

    .el-icon {
        display: none;
    }
}
</style>
  