<template>
    <header-nav :isNoTabList="true" :user="user"></header-nav>
    <map-component v-if="mapComponentState" :info="info" @choosingLocation="choosingLocation" />
    <div class="content-box flexflex">
        <!-- 左边的信息盒子 -->
        <user-box :user="user" :type="type" :time="{ timestamp, updatetime, offshelftime }" :status="status"
            :allowpublishednum="allowpublishednum" :id="id" :intermediary="intermediary"
            :userIntermediary="userIntermediary" @handleAboutPopState="handleAboutPopState"></user-box>
        <div class="form-box shadow radius16 flex1">
            <div class="form-header">发布{{ intermediary == 6 ? '求' : '出租' }}房源</div>
            <div class="form-boxes">

                <div class="form-item" v-for="item in fieldinfoBasic" :key="item.field">
                    <div class="form-title flexacenter">{{ item.title }}
                        <div class="asterisk" v-if="item.required === 1">*</div>
                    </div>
                    <!-- 
                        方式一 是 两个选择框的 点击弹出 弹窗
                        方式二 是 两个选择框 但是第一个是居中 并且没有图标 现在只有 起租日期
                        方式三 是 三列选择框 多个  本页面操作
                        方式四 是 一条长长的款 点击弹窗
                        方式五 是 单行输入框 和 单位
                    -->
                    <!-- 出租方式 -->
                    <div v-if="item.field === 'type'" class="form-option modeOne flexacenter">
                        <div ref="type" class="modeOne-item flexacenter" :class="{ 'pitch': typeValue == index }"
                            v-for="(item, index) in typeData" @click="handleType(index)" :key="index">
                            <div class="modeOne-text flexacenter">{{ item.name }}
                                <template v-if="typeValueUltimately && Math.floor(info.type) == index">
                                    <img class="form-arrows" src="@/assets/img/edit/thin-arrow.svg" />
                                    {{ typeValueUltimately }}
                                </template>
                            </div>
                            <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                            <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
                        </div>

                        <div class="pop type-pop-box radius16" v-if="typePopState">
                            <div class="type-pop-list flexflex">
                                <div v-for="(item, index) in typeData[typeValue].data" class="type-pop-item flexcenter"
                                    :class="{ 'pitch': item.key == info.type }" :key="index"
                                    @click.stop="handleType(item.key, item.value)">{{
                                        item.value }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 出租时长 -->
                    <div v-if="item.field === 'rentalduration'" class="form-option modeTwo flexacenter">
                        <div class="modeTwo-item flexcenter" :class="{ 'pitch': info['rentalduration'] == 0 }"
                            ref="rentalduration" @click="setValue('rentalduration', 0)">随时</div>
                        <div class="modeTwo-item flexacenter" :class="{ 'pitch': info['rentalduration'] }"
                            ref="rentalduration">
                            <el-select class="flex1 modeTwo-select" v-model="info.rentalduration" placeholder="选择租期">
                                <el-option :key="0" label="选择租期" :value="0" v-show="false"></el-option>
                                <el-option v-for="item in item.choices" :key="item.key" :label="item.value"
                                    :value="item.key"></el-option>
                            </el-select>
                            <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                            <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
                        </div>
                    </div>

                    <!-- 起租日期 -->
                    <div v-if="item.field === 'leasetime'" class="form-option modeTwo flexacenter">
                        <div class="modeTwo-item flexcenter" :class="{ 'pitch': info['leasetime'] == 0 }" ref="leasetime"
                            @click="setValue('leasetime', 0)">随时</div>
                        <div class="modeTwo-item flexacenter" :class="{ 'pitch': info['leasetime'] }" ref="leasetime">
                            <el-date-picker prefix-icon="" clear-icon="" v-model="info.leasetime" type="date"
                                placeholder="选择日期"></el-date-picker>
                            <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                            <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
                        </div>
                    </div>

                    <!-- 月租 -->
                    <div v-if="item.field == 'rent' && intermediary != 6" ref="rent"
                        class="form-option modeFive flexacenter" :class="{ 'pitch': info.rent }">
                        <input class="modeFive-input flex1" v-model="info.rent" type="number" step="1" min="0"
                            placeholder="请输入数字"
                            onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
                        <div class="modeFive-unit">{{ item.unit }}</div>
                    </div>

                    <div v-if="item.field == 'rent' && intermediary == 6" ref="rent" class="form-option modeSix flexacenter"
                        :class="{ 'pitch': info.rent }">
                        <div class="modeSix-select flexacenter">
                            <el-select v-model="rent_min" placeholder="请选择" @visible-change="rentDropDown">
                                <el-option v-for="item in 491" :key="(item - 1) * 100 + 1000"
                                    :label="(item - 1) * 100 + 1000" :value="(item - 1) * 100 + 1000">
                                </el-option>
                            </el-select>
                            <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                        </div>
                        <div class="modeSix-tilde flexacenter">~</div>
                        <div class="modeSix-select flexacenter">
                            <el-select v-model="rent_max" placeholder="请选择" @visible-change="rentDropDown">
                                <el-option v-for="item in 491" :key="(item - 1) * 100 + 1000"
                                    :label="(item - 1) * 100 + 1000" :value="(item - 1) * 100 + 1000">
                                </el-option>
                            </el-select>
                            <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                        </div>
                        <div class="modeSix-unit">港元/月</div>
                    </div>

                    <!-- 房屋类型 -->
                    <div v-if="item.field == 'property' && intermediary != 6" class="form-option modeThree flexacenter">
                        <div v-for="(item, index) in item.choices" :key="index" class="modeThree-item flexcenter"
                            :class="{ 'pitch': info['property'] == item.key, 'noChoice': verified == 1 }" ref="property"
                            @click="verified == 1 ? '' : setValue('property', item.key)">{{
                                item.value }}
                        </div>
                    </div>
                    <div v-if="item.field == 'property' && intermediary == 6" class="form-option modeSeven flexflex">
                        <div class="modeSeven-unlimited flexacenter">
                            <div class="modeSeven-unlimited-item flexacenter"
                                @click="setValueMultiple('property', [], true)">
                                <img v-show="info.property.length == 0" class="modeSeven-unlimited-circle-pitch"
                                    src="@/assets/img/edit/circle-pitch.svg" alt="">
                                <div v-show="info.property.length != 0" class="modeSeven-unlimited-circle"></div>
                                不限
                            </div>
                        </div>
                        <div class="modeSeven-option-box flexflex">
                            <div class="modeSeven-option-item flexacenter" v-for="(item, index) in item.choices"
                                :key="index" @click="setValueMultiple('property', item.key)">
                                <img v-show="info.property.includes(item.key)" class="modeSeven-option-icon"
                                    src="@/assets/img/edit/diamond-selected.svg" />
                                <img v-show="!info.property.includes(item.key)" class="modeSeven-option-icon"
                                    src="@/assets/img/edit/diamond-unselected.svg" />
                                {{ item.value }}
                            </div>
                        </div>
                    </div>

                    <!-- 所在楼层 -->
                    <div v-if="item.field == 'floor' && intermediary != 6" ref="floor"
                        class="form-option modeFour flexacenter"
                        :class="{ 'pitch': info.floor, 'disabled': verified == 1 }">
                        <el-select class="modeFour-select flex1 " :disabled="verified == 1" v-model="info.floor"
                            placeholder="请选择">
                            <div v-for="(item, index) in 104" :key="index">
                                <el-option v-if="item - 4 !== 0" :label="item - 4 + '楼'" :key="item - 4"
                                    :value="item - 4"></el-option>
                            </div>
                        </el-select>
                        <img class="modeFour-arrows" src="@/assets/img/edit/arrows.svg">
                        <img class="modeFour-arrows disabled-arrows" src="@/assets/img/edit/disabled-icon.svg">
                    </div>

                    <div v-if="item.field == 'floor' && intermediary == 6" ref="floor"
                        class="form-option modeSeven flexflex">
                        <div class="modeSeven-unlimited flexacenter">
                            <div class="modeSeven-unlimited-item flexacenter" @click="setValueMultiple('floor', [], true)">
                                <img v-show="info.floor.length == 0" class="modeSeven-unlimited-circle-pitch"
                                    src="@/assets/img/edit/circle-pitch.svg" alt="">
                                <div v-show="info.floor.length != 0" class="modeSeven-unlimited-circle"></div>
                                不限
                            </div>
                        </div>
                        <div class="modeSeven-option-box flexflex">
                            <div class="modeSeven-option-item flexacenter" v-for="(item, index) in item.choices"
                                :key="index" @click="setValueMultiple('floor', item.key)">
                                <img v-show="info.floor.includes(item.key)" class="modeSeven-option-icon"
                                    src="@/assets/img/edit/diamond-selected.svg" />
                                <img v-show="!info.floor.includes(item.key)" class="modeSeven-option-icon"
                                    src="@/assets/img/edit/diamond-unselected.svg" />
                                {{ item.value }}
                            </div>
                        </div>
                    </div>

                    <!-- 电梯 -->
                    <div v-if="item.field == 'elevator'" class="form-option modeThree flexacenter">
                        <div v-for="(item, index) in item.choices" :key="index" class="modeThree-item flexcenter"
                            :class="{ 'pitch': info['elevator'] == item.key }" ref="elevator"
                            @click="setValue('elevator', item.key)">{{ item.value }}
                        </div>
                    </div>

                    <!-- 晾晒区 -->
                    <div v-if="item.field == 'sunshinearea' && intermediary != 6" class="form-option modeThree flexacenter">
                        <div v-for="(item, index) in item.choices" :key="index" class="modeThree-item flexcenter"
                            :class="{ 'pitch': info['sunshinearea'] == item.key }" ref="sunshinearea"
                            @click="setValue('sunshinearea', item.key)">{{ item.value }}
                        </div>
                    </div>
                    <div v-if="item.field == 'sunshinearea' && intermediary == 6" class="form-option modeSeven flexflex">
                        <div class="modeSeven-unlimited flexacenter">
                            <div class="modeSeven-unlimited-item flexacenter"
                                @click="setValueMultiple('sunshinearea', [], true)">
                                <img v-show="info.sunshinearea.length == 0" class="modeSeven-unlimited-circle-pitch"
                                    src="@/assets/img/edit/circle-pitch.svg" alt="">
                                <div v-show="info.sunshinearea.length != 0" class="modeSeven-unlimited-circle"></div>
                                不限
                            </div>
                        </div>
                        <div class="modeSeven-option-box flexflex">
                            <div class="modeSeven-option-item flexacenter" v-for="(item, i) in item.choices" :key="i"
                                @click="setValueMultiple('sunshinearea', item.key)">
                                <img v-show="info.sunshinearea.includes(item.key)" class="modeSeven-option-icon"
                                    src="@/assets/img/edit/diamond-selected.svg" />
                                <img v-show="!info.sunshinearea.includes(item.key)" class="modeSeven-option-icon"
                                    src="@/assets/img/edit/diamond-unselected.svg" />
                                {{ item.value }}
                            </div>
                        </div>
                    </div>

                    <!-- 面积 -->
                    <div v-if="item.field == 'acreage' && intermediary != 6" class="form-option modeFive flexacenter"
                        ref="acreage">
                        <input class="modeFive-input flex1" v-model="info.acreage" type="number" step="1" min="0"
                            placeholder="请输入数字"
                            onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
                        <div class="modeFive-unit">{{ item.unit }}</div>
                    </div>
                    <div v-if="item.field == 'acreage' && intermediary == 6" ref="acreage"
                        class="form-option modeSix flexacenter" :class="{ 'pitch': info.rent }">
                        <div class="modeSix-select flexacenter">
                            <el-select :style="{ opacity: acreage_min ? '0' : '1' }" v-model="acreage_min" placeholder="请选择"
                                @visible-change="acreageDropDown">
                                <el-option v-for="item in 300" :key="(item - 1) * 10 + 10" :label="(item - 1) * 10 + 10"
                                    :value="(item - 1) * 10 + 10">
                                </el-option>
                            </el-select>
                            <!-- 特殊处理 需要计算 ㎡ -->
                            <div v-if="acreage_min" class="modeSix-select-value flexacenter">
                                {{ acreage_min }}
                                <div class="modeSix-select-m">（≈{{ (acreage_min * 0.09290304).toFixed(2) }}㎡）</div>
                            </div>
                            <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                        </div>
                        <div class="modeSix-tilde flexacenter">~</div>
                        <div class="modeSix-select flexacenter">
                            <el-select :style="{ opacity: acreage_max ? '0' : '1' }" v-model="acreage_max" placeholder="请选择"
                                @visible-change="acreageDropDown">
                                <el-option v-for="item in 300" :key="(item - 1) * 10 + 10" :label="(item - 1) * 10 + 10"
                                    :value="(item - 1) * 10 + 10">
                                </el-option>
                            </el-select>
                            <!-- 特殊处理 需要计算 ㎡ -->
                            <div v-if="acreage_max" class="modeSix-select-value flexacenter">
                                {{ acreage_max }}
                                <div class="modeSix-select-m">（≈{{ (acreage_max * 0.09290304).toFixed(2) }}㎡）</div>
                            </div>
                            <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                        </div>
                        <div class="modeSix-unit">平方呎</div>
                    </div>

                </div>
                <div class="halving-line"></div>
                <div class="form-item" v-for="item in fieldinfoAddress" :key="item.type">
                    <div class="form-title flexacenter"
                        v-if="item.field != 'address' || (item.field == 'address' && info['location'])">{{ item.title }}
                        <div class="asterisk" v-if="item.required === 1">*</div>
                    </div>

                    <!-- 所在区域 -->
                    <div class="form-option modeOne flexacenter" v-if="intermediary != 6 && item.field == 'location'">
                        <el-popover v-model:visible="areaPopState" placement="bottom" :width="640" :show-arrow="false"
                            trigger="click" popper-style="padding:0; border-radius:16px;" :disabled="verified == 1">
                            <template #reference>
                                <div ref="location" class="modeOne-item flexacenter"
                                    :class="{ 'pitch': info['location'], 'disabled': verified == 1 }"
                                    style="width: 640px;border-color: rgba(170, 170, 170, 1);">
                                    <div class="modeOne-text flexacenter" v-if="info['location']">
                                        {{ locationData[Math.floor(info.location)].name }}
                                        <img class="form-arrows" src="@/assets/img/edit/thin-arrow.svg" />
                                        <img class="form-arrows form-arrows-disabled"
                                            src="@/assets/img/edit/thin-arrow-disabled.svg" />
                                        {{ locationData[Math.floor(info.location)].data[info.location] }}
                                    </div>
                                    <div class="modeOne-text flexacenter" style="color: #AAAAAA;" v-else>请选择</div>
                                    <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                                    <img class="arrows-icon arrows-disabled-icon" style="transform: rotate(0);"
                                        src="@/assets/img/edit/disabled-icon.svg" />
                                    <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
                                </div>
                            </template>

                            <div class="pop area-pop-box radius16" style="">
                                <div class="area-box flexflex" style="height: 100%;">
                                    <div class="area-left">
                                        <div class="area-item flexacenter" :class="{ 'pitchpitch': index == locationValue }"
                                            v-for="(item, index) in locationData" :key="index"
                                            @click.stop="handleArea(index)">
                                            <div class="dot"></div>
                                            {{ item.name }}
                                            <div class="semicircle-outside"></div>
                                        </div>
                                    </div>
                                    <div class="area-right flex1 scrollbar">
                                        <div class="area-item flexacenter"
                                            :class="{ 'pitchpitch': info['location'] == index }"
                                            v-for="(item, index) in locationData[locationValue].data" :key="index"
                                            @click.stop="handleArea(index, item)">
                                            <div class="area-item-name">{{ item }}</div>
                                            <img class="area-item-pitch" src="@/assets/img/edit/blue-tick.svg" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </el-popover>
                    </div>

                    <!-- 地址 -->
                    <div class="form-option modeOne flexacenter"
                        v-if="intermediary != 6 && (item.field == 'address' && info['location'])">
                        <div class="modeOne-item flexacenter"
                            :class="{ 'pitch': info['address'], 'disabled': verified == 1 && info['address'] }"
                            style="width: 640px;border-color: rgba(170, 170, 170, 1);"
                            @click="verified == 1 && info['address'] ? '' : handleLocationData()">
                            <div class="modeOne-text flexacenter" v-if="info['address']">{{ info['address'] }}</div>
                            <div class="modeOne-text flexacenter" v-else style="color: #AAAAAA;">请选择</div>
                            <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" style="transform: rotate(0);" />
                            <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg"
                                style="transform: rotate(0);" />
                            <img class="arrows-icon arrows-disabled-icon" style="transform: rotate(0);"
                                src="@/assets/img/edit/disabled-icon.svg" />
                        </div>
                    </div>

                    <!-- 目标区域 - 无数据 -->
                    <div v-if="item.field == 'location' && intermediary == 6 && info.location.length == 0" ref="location"
                        class="form-option target-area-box-no flexacenter" @click="targetAreaState = true">
                        <div class="target-area-text flexacenter" style="color: #AAAAAA;">请选择</div>
                        <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                    </div>

                    <!-- 目标区域 - 有数据 -->
                    <div v-if="item.field == 'location' && intermediary == 6 && info.location.length != 0" ref="location"
                        class="form-option flexacenter target-area-box">
                        <div class="target-area-item flexacenter" v-for="(item, index) in info.location" :key="index">
                            <div class="target-area-item-index flexcenter">{{ index + 1 }}</div>
                            {{ locationObj[item >>> 0] }} > {{ item >>> 0 == item ? '不限' : locationObj[item] }}
                            <img class="target-area-cross" @click.stop="deleteTargetArea(index)"
                                src="@/assets/img/edit/cross.svg" />
                        </div>

                        <div class="modification-btn flexcenter" @click="targetAreaState = true">重选</div>
                    </div>

                </div>

                <!-- 所属小区 -->
                <div class="form-item" v-if="info['address'] && verified == 0">
                    <div class="form-title flexacenter">所属小区
                    </div>
                    <div class="form-option modeOne flexacenter">
                        <el-popover v-if="info['communityid'] !== 0" v-model:visible="residentialAreaState"
                            placement="bottom" :width="640" :show-arrow="false" trigger="click"
                            popper-style="padding:0; border-radius:16px;" :disabled="verified == 1">
                            <template #reference>
                                <div ref="communityname" class="modeOne-item flexacenter"
                                    :class="{ 'pitch': info['communityname'], 'disabled': verified == 1 }"
                                    style="width: 640px;border-color: rgb(170, 170, 170);" @click="handleResidentialArea()">
                                    <div class="modeOne-text flexacenter" v-if="info['communityname']">{{ info.communityname
                                    }}
                                    </div>
                                    <div class="modeOne-text flexacenter" style="color: #AAAAAA;" v-else>请选择</div>
                                    <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                                    <img class="arrows-icon arrows-disabled-icon"
                                        src="@/assets/img/edit/disabled-icon.svg" />
                                    <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
                                </div>

                            </template>

                            <div class="residential-area scrollbar">
                                <div class="residential-item flexacenter" v-for="item in communityList" :key="item.id"
                                    @click="clickResidentialArea(item.id, item.name)">
                                    <div class="residential-dot"></div>
                                    <div class="residential-text flex1 flexacenter"
                                        :class="{ 'pitchpitch': item.id == info['communityid'] }">{{ item.name }}</div>
                                </div>
                            </div>
                        </el-popover>
                        <div v-else ref="communityname" class="modeOne-item flexacenter"
                            :class="{ 'pitch': info['communityname'], 'disabled': verified == 1 }"
                            style="width: 640px;border-color: rgb(170, 170, 170);">
                            <input class="communityname-input" v-model="info.communityname" placeholder="请填写" />
                        </div>


                    </div>

                </div>

                <div class="halving-line"></div>
                <div class="form-item" v-for="(item, index) in fieldinfoIdentity" :key="index">
                    <template v-if="item.field != 'intermediary' && judgeGenderCohabitantsShow(item.field)">
                        <div class="form-title flexacenter">{{ item.title }}
                            <div class="asterisk" v-if="item.required === 1">*</div>
                        </div>
                        <!-- 租客性别要求  同住人性别要求 -->
                        <div v-if="item.field == 'gender'" class="form-option modeThree flexacenter">
                            <div v-for="(item, index) in item.choices" :key="index" ref="gender"
                                class="modeThree-item flexcenter" :class="{ 'pitch': info['gender'] == item.key }"
                                @click="setValue('gender', item.key)">{{
                                    item.value }}
                            </div>
                        </div>
                        <!-- 发布者性别 -->
                        <div v-if="item.field == 'publishergender'" class="form-option modeThree flexacenter">
                            <div v-for="(item, index) in item.choices" :key="index" ref="publishergender"
                                class="modeThree-item flexcenter" :class="{ 'pitch': info['publishergender'] == item.key }"
                                @click="setValue('publishergender', item.key)">{{ item.value }}
                            </div>
                        </div>
                    </template>
                </div>

                <div class="halving-line"></div>

                <template v-if="intermediary != 6">
                    <div class="form-item" v-for="(item) in  fieldinfoUpload" :key="item.field">
                        <div class="form-title flexacenter">{{ item.title }} ({{ item.placeholder }})</div>

                        <!-- 视频 -->
                        <div class="media-box flexflex" v-if="item.field == 'video'">
                            <div class="media-item flexcenter" v-for="(item, index) in info.video" :key="index">
                                <img class="media-cross-icon" @click.stop="deleteMedia('video', index)"
                                    src="@/assets/img/edit/cross-icon.png">
                                <div class="media-item-box flexcenter">
                                    <video class="media-img" preload="metadata" :src="item.image" :autoplay="false"></video>
                                </div>
                                <img class="media-play-icon" src="@/assets/img/edit/play-icon.svg" />
                            </div>
                            <div class="media-item flexcenter" style="position: relative;"
                                v-if="info.video.length < videoConfig.maxcount">
                                <div class="media-item-box flexcenter">
                                    <img class="media-add-icon" src="@/assets/img/edit/media-add.svg" />
                                    <input class="input-file" type="file" accept="video/*"
                                        @change="validateVideoFileType($event, 'video')" multiple />
                                </div>
                            </div>
                        </div>

                        <!-- 照片 -->
                        <div class="media-box flexflex" v-if="item.field == 'images'" ref="images">
                            <div class="media-item flexcenter" :class="{ 'pitch': item['aid'] == info['aid'] }"
                                v-for="(item, index) in info.images" :key="index">
                                <div class="media-item-box flexcenter">
                                    <img class="media-cross-icon" @click.stop="deleteMedia('image', index)"
                                        src="@/assets/img/edit/cross-icon.png">
                                    <img class="media-img" :src="item.image" />
                                </div>
                                <div class="media-cover-bnt flexcenter" v-if="info.images.length != 1"
                                    @click="info['aid'] = item['aid']">选为封面</div>
                            </div>
                            <div class="media-item flexcenter" style="position: relative;"
                                v-if="info.images.length < imagesConfig.maxcount">
                                <div class="media-item-box flexcenter">
                                    <img class="media-add-icon" src="@/assets/img/edit/media-add.svg" />
                                    <input class="input-file" type="file" accept="image/*"
                                        @change="validateVideoFileType($event, 'image')" multiple />
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="halving-line"></div>
                </template>

                <div class="form-item" v-for="(item, index) in fieldinfoIntroduce" :key="index">
                    <div class="form-title flexacenter">{{ item.title }}
                        <div class="asterisk" v-if="item.required == 1">*</div>
                    </div>
                    <!-- 更多介绍 -->
                    <template v-if="item['field'] == 'introduction'">
                        <div class="introduce-hint">{{ item.placeholder }}</div>
                        <div class="introduce-input" ref="introduction">
                            <el-input :autosize="true" type="textarea" placeholder="请输入" v-model="info.introduction"
                                resize="none" maxlength="500">
                            </el-input>
                            <div class="residue">{{ info.introduction ? 500 - info.introduction.length : 500 }}</div>
                        </div>
                    </template>
                </div>

                <div class="halving-line"></div>
                <div class="contact-hint flexacenter">
                    <img class="contact-icon" src="@/assets/img/edit/star-icon.png" />请至少提供其中一项联系方式，这是对方联系你的唯一途径.
                </div>
                <div class="form-item" v-for="(item, index) in fieldinfoContact" :key="index">
                    <div class="form-title flexacenter">{{ item.title }}
                        <div class="asterisk" v-if="item.required == 1">*</div>
                        <div class="how" v-if="item.field == 'wechat'" @click="howBoxState = true">如何获取二维码？</div>
                    </div>
                    <div v-if="item.field == 'wechat'" class="" ref="wechat">
                        <div class="contact-QRcode-box flexcenter" v-if="info.wechatdata['image']">
                            <img class="contact-QRcode-img" :src="info.wechatdata['image']" />
                        </div>

                        <div class="wechat-btn flexcenter">
                            <img class="wechat-icon" src="@/assets/img/edit/uploading-icon.svg" />
                            {{ info.wechatdata['url'] ? '重新上传' : '上传二维码' }}
                            <input type="file" @change="convertToBase64" accept="image/*" />
                        </div>
                    </div>

                    <el-input v-if="item.field == 'whatsapp'" class="relation-input" :placeholder="item.placeholder"
                        v-model="info.whatsapp"></el-input>
                    <el-input v-if="item.field == 'tel'" class="relation-input" :placeholder="item.placeholder"
                        v-model="info.tel">
                    </el-input>

                </div>
                <div class="halving-line"></div>
                <div class="form-item" v-for="(item, index) in fieldinfoInfo" :key="index">
                    <div class="form-title flexacenter">{{ item.title }}
                        <div class="asterisk" v-if="item.required == 1">*</div>
                    </div>
                    <!-- 标题 -->
                    <template v-if="item['field'] == 'subject'">
                        <div class="subject-input" ref="subject">
                            <el-input type="textarea" :placeholder="item.placeholder" v-model="info.subject" resize="none"
                                maxlength="80">
                            </el-input>
                            <div class="residue">{{ info.subject ? 80 - info.subject.length : 80 }}</div>
                        </div>
                    </template>
                </div>

                <div class="halving-line"></div>
                <!-- 最后的提示信息 -->
                <div class="hint-box flexcenter">
                    <img class="hint-icon" src="@/assets/img/edit/hint-icon.png" />
                    请按真实身份发布、请勿发布非寄托官方群/代看房信息，违规发布将被永久禁言，感谢合作！
                </div>

                <div class="submit-btn-box flexacenter">
                    <div class="submit-btn-item flexcenter save" @click="submit(0)" v-if="status != 1">保存并退出</div>
                    <div class="submit-btn-item flexcenter submit" @click="submit(1)">马上发布</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 目标区域 - 弹窗 -->
    <div class="flexcenter pop-mask" @click="targetAreaState = false" v-if="targetAreaState">
        <div class="pop area-pop-box radius16 target-area" @click.stop="">
            <div class="area-pop-header">目标区域</div>
            <div class="area-box flexflex">
                <div class="target-area-left flex1 scrollbar">

                    <div class="target-area-item" v-for="(item, index) in locationData" :key="index">
                        <div class="target-area-head">{{ item.name }}</div>
                        <div class="box flexflex">
                            <div class="item flexcenter" :class="{ 'pitch': info['location'].includes(index) }"
                                @click.stop="handleTargetArea(index)">不限
                            </div>
                            <div class="item flexcenter" :class="{ 'pitch': info['location'].includes(i) }"
                                v-for="(it, i) in item.data" :key="i" @click.stop="handleTargetArea(i)">{{ it }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="target-area-right flexflex">
                    <div class="target-area-title">已选区域</div>
                    <div class="target-area-hint flexacenter">已选 <div class="target-area-num">{{ info.location &&
                        info.location.length }}</div> 个目标区域，最多可选择6个
                    </div>
                    <div class="flex1 pitch-box flexflex">
                        <div class="pitch-box-item flexacenter" v-for="(item, index) in info.location" :key="index">
                            <div class="pitch-box-index flexcenter">{{ index + 1 }}</div>
                            {{ locationObj[item >>> 0] }} > {{ item >>> 0 == item ? '不限' : locationObj[item] }}
                            <img class="pitch-box-cross" @click.stop="deleteTargetArea(index)"
                                src="@/assets/img/edit/cross.svg" />
                        </div>
                    </div>
                    <div class="target-area-btn flexcenter" :class="{ 'pitch': info.location && info.location.length > 0 }"
                        @click.stop="closeTargetArea">选好了</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 发布成功 -->
    <div class="flexcenter pop-mask" @click="succeedPopState = 0" v-if="succeedPopState == 1">
        <div class="pop succeed-box shadow radius16 flexflex"
            :style="{ backgroundImage: `url(${require('@/assets/img/edit/succeed-pop-bj2.svg')})` }" @click.stop="">
            <a class="pop-close" :href="skipUrl" style="position: static;">
                <img class="pop-close" src="@/assets/img/edit/close-icon.svg" />
            </a>
            <div class="succeed-title flexacenter" style="margin-bottom: 95px;">
                <img class="succeed-icon" src="@/assets/img/edit/successfully-ticked.png" />发布成功
            </div>

            <div class="QRCode-box flexcenter " @click.stop="succeedPopState = 0">
                <img class="QRCode-img" :src="qrcodeBase64" />
            </div>
            <div class="succeed-hint flexacenter">绑定 <div class="bold">寄托港校租小程序</div> 解锁以下操作</div>
            <div class="succeed-hint-list">
                <div class="succeed-hint-item"><img class="succeed-hint-icon"
                        src="@/assets/img/edit/black-tick.svg" />网页版与小程序版实现数据同步
                </div>
                <div class="succeed-hint-item"><img class="succeed-hint-icon"
                        src="@/assets/img/edit/black-tick.svg" />使用小程序一键转发房源，让更多人看到</div>
                <div class="succeed-hint-item"><img class="succeed-hint-icon"
                        src="@/assets/img/edit/black-tick.svg" />随时随地使用小程序发布和管理房源
                </div>
            </div>
            <a class="succeed-examine" :href="skipUrl">查看刚刚发布的{{ intermediary == 6 ? '求' : '' }}房源</a>
        </div>
    </div>
    <div class="flexcenter pop-mask" @click="succeedPopState = 0" v-if="succeedPopState == 2">
        <div class="pop succeed-box shadow radius16 flexflex" style="padding-bottom: 99px;" @click.stop="">
            <a class="pop-close" :href="skipUrl" style="position: static;">
                <img class="pop-close" src="@/assets/img/edit/close-icon.svg" />
            </a>

            <div class="succeed-title flexacenter">
                <img class="succeed-icon" src="@/assets/img/edit/successfully-ticked.png" />发布成功
            </div>

            <div class="QRCode-box flexcenter " @click.stop="succeedPopState = 0">
                <img class="QRCode-img" :src="qrcodeBase64" />
            </div>

            <div class="succeed-hint flexacenter" style="margin-bottom: 58px;">欢迎使用 <div class="bold">寄托港校租小程序</div>
            </div>
            <a class="succeed-examine" :href="skipUrl">查看刚刚发布的求房源</a>
        </div>
    </div>
    <div class="flexcenter pop-mask" @click="succeedPopState = 0" v-if="succeedPopState == 3">
        <div class="pop succeed-box shadow radius16 flexflex" style="padding-bottom: 58px;"
            :style="{ backgroundImage: `url(${require('@/assets/img/edit/succeed-pop-bj1.svg')})` }" @click.stop="">
            <a class="pop-close" :href="skipUrl" style="position: static;">
                <img class="pop-close" src="@/assets/img/edit/close-icon.svg" />
            </a>
            <div class="succeed-title flexacenter">
                <img class="succeed-icon" src="@/assets/img/edit/successfully-ticked.png" />发布成功
            </div>

            <div class="QRCode-box flexcenter " @click.stop="succeedPopState = 0">
                <img class="QRCode-img" :src="qrcodeBase64" />
            </div>

            <div class="succeed-hint flexacenter" style="margin-bottom: 27px;">欢迎使用 <div class="bold">寄托港校租小程序</div>
            </div>
            <div class="personage-hint-list" style="margin-bottom: 40px;">
                <div class="personage-hint-item">一键“顶上去”，让房源马上靠前</div>
                <div class="personage-hint-item">一键切换房源上架/下架状态</div>
                <div class="personage-hint-item">做房源认证，不占用普通房源发布数</div>
            </div>
            <a class="succeed-examine" :href="skipUrl">查看刚刚发布的{{ intermediary == 6 ? '求' : '' }}房源</a>
        </div>
    </div>
    <!-- 提交失败 -->
    <fail-pop @close="failPopState = false" :failPopState="failPopState"></fail-pop>
    <!-- 了解更多弹窗 -->
    <about-pop :popState="aboutPopState" :intermediary="intermediary" @close="handleAboutPopState"></about-pop>
    <!-- 页面底部 -->
    <page-footer></page-footer>
    <!-- 如何获取微信二维码 -->
    <how :howBoxState="howBoxState" @close="howBoxState = false"></how>
</template>
<script>
import aboutPop from '@/components/edit/about-pop.vue'
import mapComponent from '@/components/edit/map.vue'
import pageFooter from '@/components/footer/footer.vue'
import how from '@/components/edit/how-pop.vue'
import failPop from '@/components/edit/fail-pop.vue'
import headerNav from '@/components/public/head.vue'
import userBox from '@/components/edit/user-box.vue'
import { setSeoTitle } from '@/utils/util.js'

export default {
    name: 'ZufangEdit',
    data() {
        return {
            value: '',
            user: {},
            userIntermediary: 0, // 用户是否是 认证中介，需要全局获取
            allowpublishednum: 0,
            fieldinfo: {}, // 字段配置
            fieldinfoBasic: [],
            locationObj: {},
            fieldinfoAddress: [],
            fieldinfoIdentity: [],
            fieldinfoIntroduce: [],
            fieldinfoContact: [],
            fieldinfoUpload: [],
            fieldinfoInfo: [],

            info: {},
            uniqid: "",
            token: "",
            status: 0, // 发布 状态
            intermediary: 3,
            type: "",  //  编辑类型  
            locationData: [],
            locationValue: 1,
            typeData: [], // 单独拿出 第一步 的出租类型的数据
            typeValue: 0, // 出租类型的临时值
            typeValueUltimately: "", // 出租类型的最终值
            typePopState: false, // 出租类型的弹窗状态
            areaPopState: false, // 所在区域的弹窗状态
            base64: "",

            videoConfig: {  // 上传的文件配置
                maxcount: 3,  //  最大的文件数量
                maxFileSize: 5 * 1024 * 1024, // 单位是字节
            },

            isformat: false, // 是否有格式问题
            isMax: false, // 是否有大小问题

            imagesConfig: {  // 上传的文件配置
                maxcount: 9,  //  最大的文件数量
                maxFileSize: 5 * 1024 * 1024, // 单位是字节
            },

            mediaUploadIndex: 0,// 媒体上传的下标
            selectedFiles: [], // 选中的文件

            watchInfo: null,  // 开启 info 监听

            rent_min: null,
            rent_max: null,
            acreage_min: null,
            acreage_max: null,

            targetAreaState: false, // 目标区域弹窗的状态
            howBoxState: false, // 如何获取微信二维码弹窗状态

            succeedPopState: 0, // 1 是发布成功未绑定 2 是绑定 求房源 3 是绑定 个人、中介
            failPopState: false, // 失败弹窗
            aboutPopState: false, // 关于弹窗的展开状态
            submitState: false, // 发布提交接口请求状态
            isbindweixin: 0, // 是否绑定微信

            mapComponentState: false, // 选择地址 的地图 弹窗状态

            id: 0,
            offshelftime: "",
            offshelftime: "",
            updatetime: "",

            residentialAreaState: false, // 所属小区的弹窗的状态
            isResidentialAreaUpdate: true, // 所属小区的数据是否需要更新
            communityList: [], // 所属小区的列表

            qrcodeBase64: "", // 提交发布后的二维码
            skipUrl: "",

            verified: 0, // 房源是否已经验证

            loading: null, // 加载

        }
    },

    watch: {
        '$store.state.user'(newValue) {
            this.userIntermediary = newValue['intermediary']
        }
    },
    mounted() {
        // 访问URL中的查询参数
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        this.uniqid = urlParams.get('uniqid');
        this.token = urlParams.get('token');
        this.intermediary = urlParams.get('intermediary') || 3;  // 默认写房东吧
        // this.verified = urlParams.get('verified') || 0;

        this.init();
    },
    components: {
        aboutPop,
        mapComponent,
        pageFooter,
        how,
        failPop,
        headerNav,
        userBox,
    },
    methods: {

        require(url) {
            return require(url)
        },
        init() {
            this.loading = this.$loading({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            this.$post('/tenement/pc/api/publish', {
                intermediary: this.intermediary,
                token: this.token,
                uniqid: this.uniqid,
            }).then(res => {
                if (res.code !== 200) {
                    this.$message.error(res.message);
                    return
                }
                let data = res.data
                let fieldinfo = data.fieldinfo

                let typeData = fieldinfo.basic[0]['choices'] || []
                let locationData = fieldinfo.address[0]['choices'] || []
                let locationObj = {}
                locationData.forEach(element => {
                    locationObj[element["key"]] = element["value"]
                })

                this.locationObj = locationObj

                typeData = typeData.reduce(function (acc, item) {
                    var mainKey = item.key.split('.')[0];
                    var existingObj = acc[mainKey];
                    if (existingObj) existingObj.data.push(item);
                    else {
                        acc[mainKey] = {
                            name: item.value,
                            data: []
                        };
                    }
                    return acc;
                }, {});

                locationData = locationData.reduce(function (acc, item) {
                    var mainKey = item.key.split('.')[0];
                    var existingObj = acc[mainKey];
                    if (existingObj) existingObj.data[item.key] = item.value;
                    else {
                        acc[mainKey] = {
                            name: item.value,
                            data: {}
                        };
                    }
                    return acc;
                }, {});


                let info = data.info

                if (info['type']) this.typeValue = info['type'] >>> 0

                let intermediary = data.intermediary

                if (intermediary == 6) {
                    if (info["rent"].length != 0) {
                        this.rent_min = info["rent"][0] ? Number(info["rent"][0]) : null
                        this.rent_max = info["rent"][1] ? Number(info["rent"][1]) : null
                    }

                    if (info["acreage"].length != 0) {
                        this.acreage_min = info["acreage"][0] ? Number(info["acreage"][0]) : null
                        this.acreage_max = info["acreage"][0] ? Number(info["acreage"][1]) : null
                    }

                    if (info["rentalduration"]) info['rentalduration'] = Number(info['rentalduration'])

                    let arr = ["property", "floor", "sunshinearea"]

                    arr.forEach(element => {

                        if (info[element] && info[element].length == 1 && info[element][0] == 0) info[element] = []

                        if (info[element] && info[element].length != 0) {
                            info[element].forEach((ele, i) => {
                                info[element][i] = Number(ele)
                            })
                        }
                    })

                } else {
                    if (info['floor']) info['floor'] = Number(info['floor'])
                    if (info['rentalduration']) info['rentalduration'] = Number(info['rentalduration'])
                }


                this.fieldinfo = fieldinfo
                this.typeData = typeData
                this.locationData = locationData
                this.fieldinfoBasic = fieldinfo.basic
                this.fieldinfoAddress = fieldinfo.address
                this.fieldinfoIntroduce = fieldinfo.introduce
                this.fieldinfoUpload = fieldinfo.upload
                this.fieldinfoContact = fieldinfo.contact
                this.fieldinfoInfo = fieldinfo.info


                this.fieldinfoBasic.forEach(element => {
                    if (element['field'] == "type" && info['type']) {
                        element['choices'].forEach(ele => {
                            if (ele['key'] == info['type']) this.typeValueUltimately = ele['value']
                        })
                    }
                })

                this.info = info
                this.verified = data.verified
                this.fieldinfoIdentity = fieldinfo.identity
                this.intermediary = intermediary
                this.status = data.status
                this.token = data.token
                this.type = data.type
                this.allowpublishednum = data.allowpublishednum
                this.user = data.user
                this.isbindweixin = data.isbindweixin
                this.id = data.id
                this.timestamp = data.timestamp
                this.offshelftime = data.offshelftime
                this.updatetime = data.updatetime


                let title = ""
                if (data['type'] == 'edit') title += '编辑'
                else title += '发布'
                if (intermediary == 6) title += '求房源'
                else if (intermediary == 1) title += '中介房源'
                else title += '个人房源'
                setSeoTitle(title)

                console.log();
            }).catch(err => { }).finally(err => {
                this.loading.close()
            })

        },

        // 处理出租方式
        handleType(key, value) {
            if (key >>> 0 == key) {
                this.typeValue = key
                this.typePopState = true
                if (this.info['type'] >>> 0 != key) this.info['type'] = null

            } else {
                this.info['type'] = key
                this.typeValueUltimately = value
                this.typePopState = false
            }
        },

        // 直接修改值
        setValue(key, value) {
            this.info[key] = value
        },

        // 修改值多选的
        setValueMultiple(key, value, isunlimited) {
            if (isunlimited) this.info[key] = value
            else {
                if (this.info[key].indexOf(value) != -1) this.info[key].splice(this.info[key].indexOf(value), 1)
                else this.info[key].push(value)
            }
        },

        // 处理所在区域的 左边 按钮
        handleArea(key, value) {
            if (key >>> 0 == key) {
                this.locationValue = key
            } else {
                this.info['location'] = key
                this.areaPopState = false
            }

        },

        // 将获取到的二维码转base64
        convertToBase64(event) {
            let type = event.target.files[0].type || ''
            if (type.indexOf("image") == -1) {
                this.$message.error("请上传图片");
                return
            }

            const file = event.target.files[0];
            const reader = new FileReader();
            reader.onload = () => {
                this.myImage = reader.result;
                const image = new Image();
                image.onload = () => {
                    const canvas = document.createElement('canvas');
                    canvas.width = image.width;
                    canvas.height = image.height;
                    const context = canvas.getContext('2d');
                    context.drawImage(image, 0, 0);
                    const base64 = canvas.toDataURL();

                    this.base64 = base64
                    this.uploadQRCode(base64)
                    this.loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                };
                image.src = this.myImage;
            };
            reader.readAsDataURL(file);
        },

        // 开始上传二维码
        uploadQRCode(base64data) {
            this.$post('/tenement/pc/api/publish/uploadweixinqrcode', {
                base64data,
            }).then(res => {
                this.loading.close();
                if (res.code != 200) {
                    this.$message.error(res.message);
                    return
                }
                this.info['wechatdata'] = res.data
                this.$message.success("上传成功!!!");

            })
        },

        // 处理获取到的视频文件
        validateVideoFileType(event, type) {
            let files = event.target.files
            this.selectedFiles = files
            this.mediaUploadIndex = 0
            this.combingMedia(type)
        },

        // 梳理媒体的 格式
        combingMedia(type) {
            let target = this.selectedFiles[this.mediaUploadIndex]
            if (!target) {
                this.finallyHint()
                return
            }


            let allowedExtensions = ['mp4', 'webm', 'ogg'];
            type == 'image' ? allowedExtensions = ['svg', 'jpg', 'jpeg', 'png', 'bmp', 'webp'] : ''

            const fileExtension = target.name.split('.').pop().toLowerCase();
            const isValidFile = allowedExtensions.includes(fileExtension);


            if (!isValidFile) {
                this.isformat = true
                this.mediaUploadIndex += 1
                this.combingMedia(type)
                return
            }


            if (target.size > this.videoConfig.maxFileSize) {
                this.isMax = true
                this.mediaUploadIndex += 1
                this.combingMedia(type)
                return
            }

            if (type == "video" && this.info.video.length >= this.videoConfig.maxcount) {
                this.finallyHint(type)
                return
            } else if (type == "image" && this.info.images.length >= this.imagesConfig.maxcount) {
                this.finallyHint(type)
                return
            }

            this.uploadVideo(type, target)

        },

        // 上传视频
        uploadVideo(type, target) {
            const formData = new FormData();
            formData.append('files', target); // 文件数据
            formData.append('name', target.name); // 文件名
            formData.append('type', type); // 文件名

            this.$axios.post('/tenement/pc/api/publish/upload', formData).then(res => {
                res = res['data']

                if (res.code != 200) {
                    this.$message.error(res.message);
                    this.mediaUploadIndex += 1
                    this.combingMedia(type)
                    return
                }

                let data = res.data;
                let obj = {
                    aid: data.aid,
                    image: data.url,
                }

                if (type == "video") this.info.video.push(obj)
                else this.info.images.push(obj)
                this.mediaUploadIndex += 1
                this.combingMedia(type)
            }).catch(error => {
                this.$message.error(`上传出错：${error.message}`);
            });
        },

        // 删除媒体数据
        deleteMedia(type, index) {
            if (type == "video") this.info.video.splice(index, 1)
            else this.info.images.splice(index, 1)
        },

        // 最后的提示
        finallyHint(type) {
            if (this.isformat) this.$message.error(`上传文件后缀不允许`);
            if (this.isMax) this.$message.error(`上传文件大小不符！`);
            this.isformat = false
            this.isMax = false
        },


        // 提交
        submit(status = 0) {
            let info = { ...this.info }

            if (info['images'] && info['images'].length > 1 && !info['aid']) {
                this.$message.error("请选择封面");
                let data = {
                    field: "images"
                }
                this.handleSubmitFailure(data)
                return
            }

            if (this.acreage_min) info['acreage'] = [this.acreage_min, this.acreage_max]

            if (info['wechatdata'] && info['wechatdata']['url']) info['iswechattype'] = 2




            if (this.submitState) return
            this.submitState = true

            this.loading = this.$loading({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });


            let intermediary = this.intermediary

            info['intermediary'] = intermediary

            if (intermediary == 6) {
                if (this.rent_min) {
                    let rent = [this.rent_min, this.rent_max]
                    rent.sort()
                    info['rent'] = rent
                }
                let arr = ["property", "floor", "sunshinearea"]
                arr.forEach(element => {
                    if (info[element] && info[element].length == 0) info[element] = [0]
                })
            }

            this.$post("/tenement/pc/api/publish/submit", {
                token: this.token,
                info,
                status,
            }).then(res => {
                let data = res.data || []
                if (res.code != 200) {
                    let rule = data['rule'] || 0
                    this.$message.error(res.message);
                    if (rule == 3) {
                        this.failPopState = true
                        return
                    }

                    this.handleSubmitFailure(data)

                    return
                } else {
                    if (status == 0) return
                    this.qrcodeBase64 = data['qrcode']
                    this.skipUrl = data['url']

                    if (this.isbindweixin != 1) this.succeedPopState = 1
                    else {
                        if (intermediary == 6) this.succeedPopState = 2
                        else this.succeedPopState = 3
                    }

                }

                this.$message.success(res.message);
            }).finally(() => {
                this.loading.close()
                this.submitState = false
            })



        },

        // 处理提交失败后的滚动和监听数据
        handleSubmitFailure(data) {
            // 获取 myRef 元素的位置信息
            let targetElement = this.$refs[data.field]
            if (!targetElement) return

            if (Array.isArray(targetElement)) {
                targetElement.forEach(element => {
                    element.style.borderColor = "rgba(249, 93, 93, 1)";
                })
            } else targetElement.style.borderColor = "rgba(249, 93, 93, 1)";

            this.$watch(`info.${data.field}`, (newVal, oldVal) => {
                if (newVal != null && newVal != undefined) {
                    if (Array.isArray(targetElement)) {
                        targetElement.forEach(element => {
                            element.style.borderColor = "#aaaaaa";
                        })
                    } else targetElement.style.borderColor = "#aaaaaa";
                }
            })

            // 设置滚动距离
            let top = 0
            if (Array.isArray(targetElement)) top = targetElement[0].getBoundingClientRect().top + window.pageYOffset;
            else top = targetElement.getBoundingClientRect().top + window.pageYOffsetp;

            if (top) top -= 150
            else top = 300

            window.scrollTo({
                top,
                behavior: "smooth"
            })
        },

        // 租金预算的 下拉框 展开隐藏事件
        rentDropDown(callback) {
            if (!callback || this.rent_min) return
            this.rent_min = 6000
            this.rent_max = 9000

        },

        // 面积的 下拉框 展开隐藏事件
        acreageDropDown(callback) {
            if (!callback || this.acreage_min) return
            this.acreage_min = 10
            this.acreage_max = 3000
        },

        // 这个专门处理 目标 选择
        handleTargetArea(key) {
            // 是否是 不限
            let location = this.info.location
            let index = location.indexOf(key.toString())
            // 存在的
            if (index != -1) location.splice(index, 1)
            else {
                // 点击不限的
                if (key >>> 0 == key) location = location.filter(item => item && !item.startsWith(key.toString()));
                else if (key >>> 0 != key && location.indexOf((key >>> 0).toString()) != -1) location.splice(location.indexOf((key >>> 0).toString()), 1)

                location.push(key)
            }

            if (location.length > 6) location = location.slice(0, 6)

            this.info.location = location
        },

        // 删除已选目标区域
        deleteTargetArea(index) {
            let location = this.info.location
            location.splice(index, 1)
            this.info.location = location
        },

        // 关闭目标区域
        closeTargetArea() {
            if (this.info.location.length == 0) return
            this.targetAreaState = false
        },

        // 处理关于弹窗状态
        handleAboutPopState() {
            this.aboutPopState = !this.aboutPopState
        },

        // 点击选择地址弹窗 处理经纬度
        handleLocationData() {
            this.mapComponentState = true
        },

        // 选择地点后
        choosingLocation(value) {
            let info = this.info
            info['address'] = value['poiname']
            info['latitude'] = value['latlng']['lat']
            info['longitude'] = value['latlng']['lng']

            this.mapComponentState = false
            this.isResidentialAreaUpdate = true
        },

        // 处理所属小区判断，并获取数据
        handleResidentialArea() {
            if (this.isResidentialAreaUpdate) {

                let info = this.info
                let location = `${info['longitude'] || 114.160151},${info['latitu1de'] || 22.247117}`
                this.$post("/tenement/pc/api/publish/placeAround", {
                    location
                }).then(res => {
                    if (res.code != 200) return
                    let data = res.data
                    data.push({
                        name: "以上都不是"
                    })
                    this.communityList = data
                    // this.residentialAreaState = true
                    this.isResidentialAreaUpdate = false

                })
            }
            // else this.residentialAreaState = true

        },

        // 点击所属小区选项
        clickResidentialArea(id, name) {
            let info = this.info

            if (!id) {
                info['communityid'] = 0
                info['communityname'] = null
            } else {
                info['communityid'] = id
                info['communityname'] = name
            }

            this.info = info
            this.residentialAreaState = false

        },

        // 判断  求房源的 同住人性别要求应不应该显示
        judgeGenderCohabitantsShow(field) {
            let type = this.info['type']
            let intermediary = this.intermediary
            if (intermediary != 6 || field != 'gender') return true
            if (type >>> 0 == 1 && field == 'gender') return true
            return false
        },


    },


};
</script>

<style lang="less" scoped>
.content-box {
    width: 1200px;
    margin: -36px auto 50px;
    align-items: flex-start;
    position: relative;

    .form-box {
        background-color: #fff;
        border: 1px solid rgba(235, 235, 235, 1);

        .form-header {
            color: #000;
            font-size: 20px;
            font-weight: 650;
            padding: 36px 47px 25px;
            border-bottom: 1px solid #ebebeb;
        }

        .form-boxes {
            padding-bottom: 80px;

            .halving-line {
                width: 100%;
                height: 1px;
                border-bottom: 1px solid #ebebeb;
                margin-top: 34px;
            }

            .arrows-icon,
            .arrows-icon-pitch {
                width: 14px;
                height: 14px;
                transform: rotate(90deg);
            }

            .arrows-icon-pitch,
            .arrows-disabled-icon {
                display: none;
            }

            .form-item {
                margin-top: 31px;
                margin-bottom: 10px;
                padding-left: 48px;

                .form-title {
                    font-size: 16px;
                    line-height: 30px;
                    height: 34px;
                    color: #555;
                    margin-bottom: 10px;
                    position: relative;
                    width: 640px;

                    .asterisk {
                        color: #f95d5d;
                        margin-left: 5px;
                    }

                    .how {
                        position: absolute;
                        right: 0;
                        font-size: 14px;
                        line-height: 30px;
                        color: #50e3c2;
                        cursor: pointer;
                    }
                }

                .form-option {
                    width: 100%;
                    height: 50px;
                    position: relative;

                    .pitch {
                        color: #62B1FF !important;
                        border: 1px solid rgba(98, 177, 255, 1) !important;

                        .arrows-icon {
                            display: none;
                        }

                        .arrows-icon-pitch {
                            display: block;
                        }

                        .el-input__inner {
                            color: #62B1FF !important;
                        }
                    }

                    /deep/ .el-input__wrapper:hover,
                    /deep/ .el-input .el-input__wrapper,
                    /deep/ .el-input.is-focus .el-input__wrapper {
                        box-shadow: none !important;
                    }

                    /deep/ .el-input__suffix {
                        display: none;
                    }

                    /deep/ .select-trigger,
                    /deep/ .el-input {
                        font-size: 16px;
                        height: 100%;

                    }

                    /deep/ .el-input__inner {
                        border: none;
                        height: 100%;
                    }

                    &.modeOne {
                        .modeOne-item {
                            width: 310px;
                            height: 50px;
                            border-radius: 10px;
                            border: 1px solid rgba(235, 235, 235, 1);
                            margin-right: 20px;
                            font-size: 16px;
                            color: #555;
                            padding: 0 20px;
                            justify-content: space-between;
                            cursor: pointer;

                            &:last-of-type {
                                margin-right: 0;
                            }

                            .arrows-icon,
                            .arrows-icon-pitch {
                                transform: rotate(90deg);
                            }

                            &.disabled {
                                color: #AAAAAA !important;
                                border-color: rgba(170, 170, 170, 1) !important;
                                background-color: rgba(246, 246, 246, 1) !important;
                                cursor: no-drop;

                                .form-arrows {
                                    display: none;
                                }

                                .arrows-icon,
                                .arrows-icon-pitch {
                                    display: none;
                                }

                                .form-arrows-disabled,
                                .arrows-disabled-icon {
                                    display: block;
                                }
                            }
                        }
                    }

                    &.modeTwo {
                        .modeTwo-item {
                            width: 310px;
                            height: 50px;
                            border-radius: 10px;
                            border: 1px solid rgba(235, 235, 235, 1);
                            margin-right: 20px;
                            font-size: 16px;
                            color: #555;
                            padding: 0 20px;
                            cursor: pointer;

                            &.pitch {
                                /deep/ .el-input {
                                    .el-input__inner {
                                        color: #62B1FF;
                                    }
                                }

                            }

                            .el-icon-date:before {
                                content: "";
                            }

                            .modeTwo-select {
                                height: 100%;
                            }

                            /deep/ .el-input {
                                flex: 1;
                                width: 100%;
                                height: 100%;

                                .el-input__prefix {
                                    display: none;
                                }

                                .el-input__wrapper,
                                .el-input__inner {
                                    height: 100%;
                                    border: none;
                                    font-size: 16px;
                                    color: #555;
                                    // color: #62B1FF;
                                    padding-left: 0;

                                    /* 修改 FireFox 内核浏览器的输入框提示文本样式 */
                                    &:-moz-placeholder,
                                    &::-webkit-input-placeholder {
                                        color: #555;
                                    }

                                    /* 修改旧版 FireFox 浏览器的输入框提示文本样式 */
                                    &::-moz-placeholder {
                                        color: #555;
                                        opacity: 1;
                                    }

                                    &::placeholder {
                                        color: #555;
                                        opacity: 1;
                                    }
                                }
                            }

                            &:last-of-type {
                                margin-right: 0;
                            }
                        }
                    }

                    &.modeThree {
                        flex-wrap: wrap;
                        height: auto;

                        .modeThree-item {
                            width: 200px;
                            height: 50px;
                            border-radius: 10px;
                            border: 1px solid rgba(235, 235, 235, 1);
                            margin-right: 20px;
                            font-size: 16px;
                            color: #555;
                            cursor: pointer;
                            margin-bottom: 10px;

                            &:nth-last-child(-n+3) {
                                margin-bottom: 0;
                            }

                            &.noChoice {
                                cursor: no-drop;
                                color: #d7d7d7;
                                border: 1px solid rgba(235, 235, 235, 1);
                            }
                        }
                    }

                    &.modeFour {
                        width: 640px;
                        border: 1px solid rgba(170, 170, 170, 1);
                        border-radius: 10px;
                        overflow: hidden;

                        .modeFour-select {
                            height: 100%;

                            /deep/ .el-input__wrapper:hover,
                            /deep/ .el-input.is-focus .el-input__wrapper {
                                box-shadow: none !important;
                            }

                            /deep/ .el-input__suffix {
                                display: none;
                            }

                            /deep/ .select-trigger,
                            /deep/ .el-input {
                                font-size: 16px;
                                height: 100%;

                            }

                            /deep/ .el-input__inner {
                                border: none;
                                height: 100%;
                            }


                        }

                        .modeFour-arrows {
                            width: 14px;
                            height: 14px;
                            margin-right: 20px;
                            transform: rotate(90deg);
                        }

                        .disabled-arrows {
                            display: none;
                        }

                        &.disabled {
                            border-color: rgba(170, 170, 170, 1);
                            background-color: rgba(246, 246, 246, 1);

                            .modeFour-arrows {
                                display: none;
                            }

                            .disabled-arrows {
                                display: block;
                                transform: rotate(0);
                            }
                        }

                    }


                    &.modeFive {
                        border: 1px solid rgba(170, 170, 170, 1);
                        border-radius: 10px;
                        padding: 0 20px;
                        width: 640px;

                        .modeFive-input {
                            height: 100%;
                            font-size: 16px;
                            border: none;
                            outline: none;
                        }

                        .modeFive-unit {
                            color: #000;
                            font-size: 16px;
                        }
                    }

                    &.modeSix {
                        .modeSix-select {
                            border: 1px solid rgba(170, 170, 170, 1);
                            border-radius: 10px;
                            overflow: hidden;
                            width: 269px;
                            height: 50px;
                            position: relative;

                            .el-select {
                                width: 100%;
                                height: 100%;
                                position: relative;
                                z-index: 1;

                                .el-input {
                                    height: 100%;

                                    .el-input__inner {
                                        border: none;
                                        height: 100%;
                                        color: #000;
                                        font-size: 16px;
                                    }

                                    .el-input__suffix {
                                        display: none;
                                    }
                                }
                            }

                            .arrows-icon {
                                margin-right: 20px;
                                transform: rotate(90deg);
                            }

                        }

                        .modeSix-select-value {
                            position: absolute;
                            top: 50%;
                            left: 15px;
                            transform: translateY(-50%);

                            .modeSix-select-m {
                                color: #aaa;
                            }
                        }

                        .modeSix-tilde {
                            color: #555;
                            font-size: 20px;
                            margin: 0 13px;
                        }

                        .modeSix-unit {
                            margin-left: 11px;
                            color: #000000;
                            font-size: 16px;

                        }
                    }

                    &.modeSeven {
                        border-radius: 10px;
                        width: 640px;
                        font-size: 16px;
                        color: #000;
                        border: 1px solid rgba(235, 235, 235, 1);
                        flex-direction: column;
                        height: 100%;

                        .modeSeven-unlimited {
                            height: 60px;
                            padding-left: 20px;
                            border-bottom: 1px solid #ebebeb;

                            .modeSeven-unlimited-item {
                                cursor: pointer;

                                .modeSeven-unlimited-circle {
                                    border-radius: 50%;
                                    width: 20px;
                                    height: 20px;
                                    border: 2px solid #d7d7d7;
                                    margin-right: 10px;
                                }

                                .modeSeven-unlimited-circle-pitch {
                                    width: 20px;
                                    height: 20px;
                                    margin-right: 10px;
                                }
                            }


                        }


                        .modeSeven-option-box {
                            padding: 20px;
                            flex-wrap: wrap;
                            align-items: flex-start;

                            .modeSeven-option-item {
                                &:not(:last-child):not(:nth-last-child(-n+4)) {
                                    margin-bottom: 22px;
                                }

                                cursor: pointer;
                                width: 149px;

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

                        }

                    }

                    &.target-area-box {
                        flex-direction: column;
                        width: 640px;
                        height: auto;
                        border-radius: 10px;
                        border: 1px solid rgba(235, 235, 235, 1);
                        align-items: flex-start;
                        font-size: 14px;
                        color: #000;
                        padding-left: 20px;
                        padding-top: 30px;
                        padding-bottom: 30px;
                        position: relative;

                        .modification-btn {
                            width: 80px;
                            height: 32px;
                            background: inherit;
                            background-color: rgba(51, 51, 51, 1);
                            border-radius: 200px;
                            font-size: 14px;
                            position: absolute;
                            bottom: 30px;
                            right: 20px;
                            color: #fff;
                            cursor: pointer;
                        }

                        .target-area-item {
                            margin-bottom: 20px;

                            &:last-of-type {
                                margin-bottom: 0;
                            }

                            .target-area-item-index {
                                width: 20px;
                                height: 20px;
                                font-size: 14px;
                                color: #62B1FF;
                                border-radius: 50%;
                                border: 1px solid #62b1ff;
                                margin-right: 10px;
                            }

                            .target-area-cross {
                                width: 12px;
                                height: 12px;
                                margin-left: 20px;
                                cursor: pointer;
                            }
                        }
                    }

                    &.target-area-box-no {
                        width: 640px;
                        height: 50px;
                        border: 1px solid #aaaaaa;
                        border-radius: 10px;
                        justify-content: space-between;
                        padding-left: 15px;
                        cursor: pointer;

                        .arrows-icon {
                            margin-right: 20px;
                            transform: rotate(90deg);
                        }
                    }

                    .communityname-input {
                        width: 100%;
                        height: 100%;
                        color: #62B1FF;
                        border: none;
                        outline: none;
                        font-size: 16px;
                    }

                }

                .form-arrows {
                    width: 7px;
                    height: 10px;
                    margin: 0 8px;
                }

                .form-arrows-disabled {
                    display: none;
                }

                .media-box {
                    flex-wrap: wrap;
                    width: 640px;
                    align-items: flex-start;

                    .media-item {
                        width: 100px;
                        position: relative;
                        cursor: pointer;
                        flex-direction: column;

                        &:not(:nth-last-child(-n+5)) {
                            margin-bottom: 30px;
                        }

                        &.pitch {
                            .media-cover-bnt {
                                background: rgba(98, 177, 255, 1);
                                border: none;
                                color: #fff;
                            }

                            .media-item-box {
                                border: 1px solid rgba(98, 177, 255, 1);
                            }
                        }

                        .media-item-box {
                            width: 100px;
                            height: 100px;
                            overflow: hidden;
                            border-radius: 10px;
                            margin-bottom: 10px;
                            height: 100px;
                            border-radius: 10px;
                            background-color: rgba(246, 246, 246, 1);
                            border: 1px solid rgba(235, 235, 235, 1);
                        }

                        &:not(:nth-of-type(5n)) {
                            margin-right: 35px;
                        }

                        .input-file {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            opacity: 0;
                            cursor: pointer;
                        }

                        .media-add-icon,
                        .media-cross-icon {
                            width: 16px;
                            height: 16px;
                        }

                        .media-cross-icon {
                            position: absolute;
                            top: 0;
                            right: 0;
                            z-index: 100;
                            transform: translate(50%, -50%);
                        }

                        .media-img {
                            width: 100px;
                            position: relative;
                            // filter: brightness(0.5);
                        }

                        .media-cover-bnt {
                            width: 100px;
                            height: 30px;
                            border-radius: 8px;
                            font-size: 14px;
                            border: 1px solid rgba(215, 215, 215, 1);
                            color: #aaa;
                            font-weight: 400;
                        }

                        .media-play-icon {
                            width: 20px;
                            height: 20px;
                            position: absolute;
                            top: calc(50% - 5px);
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }

                }

                .introduce-hint {
                    width: 640px;
                    font-size: 14px;
                    color: #aaa;
                    line-height: 22px;
                    margin-bottom: 10px;
                }

                .introduce-input,
                .subject-input {
                    width: 640px;
                    border-radius: 10px;
                    border: 1px solid rgba(170, 170, 170, 1);
                    outline: none;
                    font-size: 16px;
                    resize: none;
                    overflow: hidden;
                    position: relative;

                    .residue {
                        position: absolute;
                        right: 8px;
                        bottom: 0;
                        color: #aaa;
                        font-size: 14px;
                        line-height: 30px;
                        height: 34px;
                    }

                    .el-textarea__inner {
                        height: 100%;
                        border: none;
                    }
                }

                .introduce-input {

                    // height: 200px;
                    .el-textarea {
                        height: 100%;

                        /deep/ .el-textarea__inner {
                            box-shadow: none;
                            height: 100%;
                            min-height: 200px !important;
                        }
                    }
                }

                .subject-input {
                    height: 100px;

                    .el-textarea {
                        height: 100%;
                        width: 100%;

                        /deep/ .el-textarea__inner {
                            height: 100%;
                        }
                    }
                }


            }

            .hint-box {
                width: 640px;
                height: 40px;
                border-radius: 7px;
                background-color: rgba(98, 177, 255, 0.0666666666666667);
                color: #555;
                font-size: 14px;
                line-height: 24px;
                margin-top: 41px;
                margin-left: 48px;
                margin-bottom: 60px;

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

            .submit-btn-box {
                width: 696px;
                justify-content: flex-end;

                .submit-btn-item {
                    width: 200px;
                    height: 50px;
                    border-radius: 40px;
                    font-size: 18px;
                    margin-left: 20px;
                    cursor: pointer;

                    &.save {
                        color: #333;
                        border: 1px solid rgba(215, 215, 215, 1);
                    }

                    &.submit {
                        background-color: rgba(98, 177, 255, 1);
                        font-weight: 650;
                        color: #fff;
                    }
                }
            }

            .relation-input {
                width: 640px;
                height: 50px;
                border-radius: 10px;
                border: 1px solid rgba(170, 170, 170, 1);
                overflow: hidden;

                .el-input__inner {
                    border: none;
                    height: 100%;

                }
            }

            .contact-hint {
                width: 640px;
                height: 40px;
                background-color: rgba(98, 177, 255, 0.0666666666666667);
                border-radius: 7px;
                line-height: 28px;
                color: rgb(59, 50, 50);
                font-size: 14px;
                margin-top: 42px;
                margin-left: 48px;

                .contact-icon {
                    width: 28px;
                    height: 28px;
                    margin: 0 4px 0 10px;
                }

            }

            .wechat-btn {
                width: 640px;
                height: 70px;
                border-radius: 10px;
                font-size: 16px;
                color: #000;
                background-color: rgba(246, 246, 246, 1);
                cursor: pointer;
                position: relative;

                input {
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    position: absolute;
                    top: 0;
                    left: 0;
                    cursor: pointer;
                }

                .wechat-icon {
                    width: 18px;
                    height: 18px;
                    margin: 0 6px;
                }
            }

            .contact-QRcode-box {
                width: 640px;
                height: 120px;
                border-radius: 10px;
                border: 1px solid rgba(235, 235, 235, 1);
                margin-bottom: 20px;

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

        }

    }

    /deep/ .el-input__wrapper,
    /deep/ .el-textarea__inner {
        box-shadow: none;
    }

}

.pop-mask {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.698039215686274);
    z-index: 1000;
}

.pop {
    z-index: 2;
    background-color: #fff;

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

    &.succeed-box {
        padding: 63px 0 68px;
        background-image: url('@/assets/img/edit/succeed-pop-bj.svg');
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: bottom;
        width: 460px;
        flex-direction: column;
        align-items: center;
        z-index: 100;
        position: relative;

        .succeed-title {
            .succeed-icon {
                width: 24px;
                height: 24px;
                margin-right: 12px;
            }

            margin: 0 auto 110px;
            color: #333;
            font-weight: 650;
            font-size: 24px;
        }

        .QRCode-box {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 30px;
            background-color: #fff;
            -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.211764705882353);
            -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.211764705882353);
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.211764705882353);

            .QRCode-img {
                width: 120px;
                height: 120px;
            }
        }

        .succeed-hint {
            color: #555;
            font-size: 16px;
            margin-bottom: 27px;

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

        .personage-hint-list {
            color: #555;
            font-size: 14px;

            .personage-hint-item {
                text-align: center;

                &:not(:last-of-type) {
                    margin-bottom: 11px;
                }
            }

        }

        .succeed-hint-list {

            margin-bottom: 29px;

            .succeed-hint-item {
                font-size: 14px;
                color: #555;
                margin-bottom: 11px;

                .succeed-hint-icon {
                    width: 13px;
                    height: 10px;
                    margin-right: 10px;
                }
            }
        }

        .succeed-examine {
            color: #333;
            font-size: 14px;
            text-decoration: underline;
            cursor: pointer;
        }


    }

    &.type-pop-box {
        width: 640px;
        height: 181px;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid 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);
        padding: 30px;
        position: absolute;
        top: 58px;

        .type-pop-list {
            flex-wrap: wrap;

            .type-pop-item {
                width: 179px;
                height: 50px;
                background-color: rgba(246, 246, 246, 1);
                border-radius: 10px;
                font-weight: 400;
                font-size: 16px;
                color: #555555;
                margin-bottom: 20px;
                cursor: pointer;

                &.pitch {
                    border: 1px solid rgba(98, 177, 255, 1);
                    color: #62B1FF;
                    background-color: #fff;
                }

                &:not(:nth-of-type(3n)) {
                    margin-right: 20px;
                }
            }
        }
    }

    &.area-pop-box {
        height: 695px;
        left: 0;
        background-color: rgba(255, 255, 255, 1);
        overflow: hidden;
        z-index: 101;

        .area-pop-header {
            font-weight: 650;
            font-size: 20px;
            color: #000000;
            height: 98px;
            padding-left: 30px;
            padding-top: 40px;
            border-bottom: 1px solid #ebebeb;
        }

        .area-box {
            height: calc(100% - 98px);

            .area-left {
                background-color: rgba(246, 246, 246, 1);

                .area-item {
                    width: 200px;
                    height: 70px;
                    display: flex;
                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 18px;
                    color: #555555;
                    padding-left: 48px;
                    cursor: pointer;

                    &:first-of-type {
                        padding-top: 16px;
                        height: 86px;

                        .dot {
                            top: calc(50% + 8px);
                        }
                    }

                    &.pitchpitch {
                        position: relative;
                        background-color: #fff;
                        color: #000 !important;
                        font-weight: 650 !important;
                        border: none !important;


                        .semicircle-outside {
                            position: absolute;
                            right: 0;
                            top: -20px;
                            width: 20px;
                            height: 20px;
                            background: #fff;

                            &::after {
                                content: "";
                                position: absolute;
                                right: 0;
                                top: 0;
                                width: 20px;
                                height: 20px;
                                border-radius: 0 0 100% 0;
                                background: #f6f6f6;
                            }
                        }

                        &::after {
                            content: "";
                            position: absolute;
                            right: 0;
                            bottom: -20px;
                            width: 20px;
                            height: 20px;
                            border-radius: 0 100% 0 0;
                            background: #f6f6f6;
                        }

                        &::before {
                            content: "";
                            position: absolute;
                            right: 0;
                            bottom: -20px;
                            width: 20px;
                            height: 20px;
                            background: #fff;
                        }

                        .dot {
                            display: block;
                        }
                    }

                    .dot {
                        display: none;
                        position: absolute;
                        top: 50%;
                        left: 20px;
                        transform: translateY(-50%);
                        width: 6px;
                        height: 18px;
                        border-radius: 4px;
                        background-color: rgba(255, 215, 82, 1);
                    }

                }
            }
        }

        .area-right {
            margin-left: 40px;
            margin-right: 6px;
            overflow: auto;
            padding-top: 16px;

            .area-item {
                height: 70px;
                cursor: pointer;
                margin-right: 5px;
                color: #555;
                font-size: 16px;
                justify-content: space-between;

                &:not(:last-of-type) {
                    border-bottom: 1px solid rgba(242, 242, 242, 1);
                }

                &.pitchpitch {
                    color: #62B1FF;

                    .area-item-pitch {
                        display: block;
                    }
                }

                .area-item-pitch {
                    width: 14px;
                    height: 14px;
                    display: none;
                }

            }
        }
    }

    &.target-area {
        width: 900px;

        .area-box {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 40px;
                width: 560px;
                height: 1px;
                background-color: #ebebeb;
            }
        }

        .target-area-left {
            overflow: auto;
            margin-top: 25px;
            margin-bottom: 40px;
            margin-right: 20px;
            position: relative;

            .target-area-bottom {
                height: 40px;
                width: 100%;
                background-color: red;
            }

            .target-area-item {
                margin-bottom: 20px;

                .target-area-head {
                    font-size: 18px;
                    color: #000;
                    font-weight: 650;
                    padding-left: 58px;
                    position: relative;

                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 30px;
                        transform: translateY(-50%);
                        width: 6px;
                        height: 18px;
                        border-radius: 4px;
                        background-color: rgba(255, 215, 82, 1);
                    }
                }

                .box {
                    padding-left: 58px;
                    margin-top: 22px;
                    flex-wrap: wrap;

                    .item {
                        color: #7F7F7F;
                        font-size: 14px;
                        background-color: rgba(246, 246, 246, 1);
                        border-radius: 10px;
                        height: 40px;
                        padding: 0 16px;
                        margin-right: 10px;
                        margin-bottom: 10px;
                        cursor: pointer;

                        &.pitch {
                            color: #62B1FF;
                            border: 1px solid rgba(98, 177, 255, 1);
                            background-color: #fff;
                        }
                    }

                }
            }
        }

        .target-area-right {
            width: 340px;
            height: 100%;
            background-color: rgba(246, 246, 246, 1);
            border-left: 1px solid #ebebeb;
            padding-top: 25px;
            padding-left: 30px;
            padding-right: 30px;
            flex-direction: column;

            .target-area-title {
                color: #000;
                font-size: 16px;
                font-weight: 650;
                margin-bottom: 10px;
            }

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

                .target-area-num {
                    font-weight: 650;
                    color: #000000;
                    margin: 0 5px;
                }
            }

            .pitch-box {
                flex-direction: column;
                padding-top: 30px;

                .pitch-box-item {

                    .pitch-box-index {
                        width: 20px;
                        height: 20px;
                        font-size: 14px;
                        color: #62b1ff;
                        border-radius: 50%;
                        border: 1px solid #62b1ff;
                        margin-right: 10px;
                    }

                    font-size: 14px;
                    color: #000;
                    margin-bottom: 20px;

                    .pitch-box-cross {
                        width: 12px;
                        height: 12px;
                        margin-left: 20px;
                        cursor: pointer;
                    }
                }
            }

            .target-area-btn {
                width: 280px;
                height: 50px;
                border-radius: 40px;
                font-size: 18px;
                color: #aaa;
                font-weight: 650;
                background-color: rgba(215, 215, 215, 1);
                margin-bottom: 40px;
                cursor: pointer;

                &.pitch {
                    color: #fff;
                    background-color: rgba(98, 177, 255, 1);
                }

            }

        }
    }

}

.residential-area {
    width: 640px;
    height: 500px;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border: 1px solid rgba(235, 235, 235, 1);
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    z-index: 101;
    padding: 10px 30px;
    overflow: auto;

    .residential-item {
        height: 60px;
        cursor: pointer;

        .residential-dot {
            width: 6px;
            height: 6px;
            background: #62b1ff;
            border-radius: 50%;
            margin-right: 47px;

        }

        .residential-text {
            height: 100%;
            color: #555;
            font-size: 16px;

            &.pitchpitch {
                color: #62b1ff;

            }
        }

        &:not(:last-of-type) {
            border-bottom: 1px solid rgba(242, 242, 242, 1);
        }

    }
}
</style>