<template>
  <section class="AppHomesteadDV">
    <div class="map">
      <ai-map v-bind="mapOptions" :map.sync="map" :lib.sync="mapLib" @click.native.stop="hidePopup" is3d/>
      <div class="community-info" v-show="isShowInfo">
        <div class="community-info__close" title="关闭"
             @click="info = {}, isShowInfo = false,selected=''">
          <i class="iconClean iconfont"></i>
        </div>
        <template v-if="info.communityId">
          <div class="community-info__header">
            <h2>{{ info.createAddress }}</h2>
            <div>{{ info.lng }},{{ info.lat }}</div>
          </div>
          <div class="community-info__wrapper">
            <h2>人口信息</h2>
            <div class="community-info__total">
              <div class="community-info__total--item">
                <h2>{{ statisticsInfo['实有户数'] }}</h2>
                <span>实有户数</span>
              </div>
              <div class="community-info__total--item">
                <h2>{{ statisticsInfo['实有人口'] }}</h2>
                <span>实有人口</span>
              </div>
              <div class="community-info__total--item">
                <h2>{{ statisticsInfo['流动人口'] }}</h2>
                <span>流动人口</span>
              </div>
            </div>
          </div>
          <div class="community-info__wrapper">
            <h2>房屋信息</h2>
            <div class="community-info__item">
              <label>所属社区</label>
              <span>{{ info.areaName }}</span>
            </div>
            <div class="community-info__item">
              <label>所属小区</label>
              <span>{{ info.communityName }}</span>
            </div>
            <div class="community-info__item">
              <label>房屋类型</label>
              <span>{{ dict.getLabel("communityBuildingType", info.buildingType) }}</span>
            </div>
            <div class="community-info__item">
              <label>楼长姓名</label>
              <span>{{ info.managerName }}</span>
            </div>
            <div class="community-info__item">
              <label>楼长电话</label>
              <span>{{ info.managerPhone }}</span>
            </div>
          </div>
          <div class="community-info__wrapper" v-if="resident">
            <h2>人员信息</h2>
            <div class="community-info__item">
              <label>姓名</label>
              <span style="color:#2266FF;">{{ resident.name }}</span>
            </div>
            <div class="community-info__item">
              <label>所属单元</label>
              <span>{{ house.unitNumber }}</span>
            </div>
            <div class="community-info__item">
              <label>房号</label>
              <span>{{ house.houseCode }}</span>
            </div>
            <div class="community-info__item">
              <label>联系方式</label>
              <span>{{ resident.phone }}</span>
            </div>
          </div>
          <div class="community-btn" @click="isShowModel = true">楼栋模型</div>
        </template>
        <template v-else>
          <div class="community-info__header">
            <h2>{{ info.homesteadAddress }}</h2>
            <div>{{ info.lng }},{{ info.lat }}</div>
          </div>
          <div class="community-info__wrapper">
            <h2>户主信息</h2>
            <div class="community-info__item">
              <label>所属村</label>
              <span>{{ info.areaName }}</span>
            </div>
            <div class="community-info__item">
              <label>姓名</label>
              <span>{{ info.name }}</span>
            </div>
            <div class="community-info__item">
              <label>联系电话</label>
              <span>{{ info.phone }}</span>
            </div>
            <div class="community-info__item">
              <label>性别</label>
              <span>{{ dict.getLabel('sex', info.sex) }}</span>
            </div>
            <div class="community-info__item">
              <label>年龄</label>
              <span>{{ info.age }}</span>
            </div>
          </div>
          <div class="community-info__wrapper">
            <h2>宅基地信息</h2>
            <div class="community-info__item">
              <label>住宅建筑面积</label>
              <span>{{ info.liveBuildingArea }}㎡</span>
            </div>
            <div class="community-info__item">
              <label>建筑层数</label>
              <span>{{ info.buildingFloorNumber }}层</span>
            </div>
            <div class="community-info__item">
              <label>建筑高度</label>
              <span>{{ info.buildingHeight }}米</span>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="building-model" v-if="isShowModel">
      <div class="building-model__title">
        <h2>{{ info.createAddress }}</h2>
        <i class="iconClean iconfont" @click="isShowModel = false" title="关闭"></i>
      </div>
      <building-statistics
          class="building-model__content"
          :instance="instance"
          :isFormDv="true"
          :query="{communityId: info.communityId, buildingId: info.id,unitNum:house ? house.unitNumber : 1,buildingNumber:info.buildingNumber}"
          :dict="dict">
      </building-statistics>
    </div>
    <div class="switch-btn" @click="changeMap">{{ pitch === 60 ? '切换成2D地图' : '切换成3D地图' }}</div>
    <div class="AppHomesteadDV-mask"></div>
    <div class="summary" v-if="totalInfo.residentCountMap">
      <div class="summary-wrapper">
        <div class="summary-item">
          <div class="summary-item__top">
            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_green.png">
            <h2>村社区数</h2>
          </div>
          <div>{{ totalInfo.communityCountMap.communityNumber }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-item__top">
            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_green.png">
            <h2>宅基地</h2>
          </div>
          <div>{{ totalInfo.communityCountMap.homesteadNumber }}</div>
        </div>
      </div>
      <div class="summary-wrapper">
        <div class="summary-item">
          <div class="summary-item__top">
            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_yellow.png">
            <h2>实有人口</h2>
          </div>
          <div>{{ totalInfo.residentCountMap.allResidentNumber }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-item__top">
            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_yellow.png">
            <h2>实有户数</h2>
          </div>
          <div>{{ totalInfo.residentCountMap.householdNumber }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-item__top">
            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_yellow.png">
            <h2>流动人口</h2>
          </div>
          <div>{{ totalInfo.residentCountMap.turnoverNumber }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-item__top">
            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_yellow.png">
            <h2>党员</h2>
          </div>
          <div>{{ totalInfo.residentCountMap.partyNumber }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import {mapState} from "vuex";
import BuildingStatistics from "../../../packages/2.0.5/AppHouseMap/buildingStatistics";

export default {
  name: "AppHomesteadDV",
  label: "垫江大屏-宅基地",
  components: {BuildingStatistics},
  provide() {
    return {
      root: this
    }
  },
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      isFormDv: true,
      isShowModel: false,
      map: null,
      mapLib: null,
      community: '',
      isShowLayer: false,
      isShowSearch: false,
      isShowArea: false,
      styleFunction: null,
      areaData: {},
      isImageMap: false,
      isShowInfo: false,//楼栋信息框
      areaId: '',
      areaName: '',
      list: [],
      areaList: [],
      info: {},
      resident: null,
      satellite: null,
      zoom: 17,
      selected: '',
      buildList: [],
      searchList: [],
      house: null,
      pitch: 60,
      center: [],
      totalInfo: {},
      statisticsInfo: {}
    }
  },
  computed: {
    ...mapState(['user']),
    hasCommunityId() {
      return !!this.$route.query?.communityId
    },
    mapOptions() {
      return {
        areaId: this.user.info.areaId,
        mapStyle: "amap://styles/e51987628aee5206d4c9ca8c6e98b4f7",
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer', 'AMap.DistrictSearch'],
        ops: {
          pitch: this.pitch,
          buildingAnimation: true,
          zoom: this.zoom
        }
      }
    }
  },
  watch: {
    hasCommunityId(v) {
      if (!v) {
        this.getCorpLocation()
      }
    },
    map(v) {
      v && this.initMap()
    }
  },
  created() {
    this.getTotalInfo()
    this.dict.load('householdRelation', 'communityBuildingType', 'sex')
  },
  mounted() {
    this.areaId = this.user.info.areaId
    this.areaName = this.user.info.areaName
    if (!this.hasCommunityId) {
      this.getCorpLocation()
    }
  },
  methods: {
    getCorpLocation() {
      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
        if (res?.data) {
          this.initMap(res.data);
        }
      })
    },

    getTotalInfo() {
      this.instance.post("/app/statistics/people/queryResidentCount").then(res => {
        if (res?.data) {
          this.totalInfo = res.data
        }
      })
    },
    changeMap() {
      if (this.pitch === 60) {
        this.pitch = 0
        this.map.setPitch(0, false, 300)
        this.map.setZoom(16, false, 300)
      } else {
        this.pitch = 60
        this.map.setZoom(18, false, 300)
        this.map.setPitch(60, false, 300)
      }
    },

    changeZoom(isAdd) {
      const zoom = isAdd ? this.map.getZoom() + 1 : this.map.getZoom() - 1
      this.map.setZoom(zoom, false, 600)
    },

    async getBuildInfo(id, isHomestead = false) {
      await this.instance.post(`/app/appcommunitybuildinginfo/statistics`, null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.statisticsInfo = res.data.unit
        }
      })
      if (isHomestead) {
        await this.instance.post(`/app/apphomesteadinfo/queryDetailById`, null, {
          params: {id}
        }).then(res => {
          if (res?.data) {
            this.info = res.data
          }
        })
      } else await this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`, null, {
        params: {buildId: id}
      }).then(res => {
        if (res?.data) {
          this.info = res.data.build
          this.resident = null;
        }
      })
      this.isShowInfo = true
    },

    toCenter() {
      this.map.setZoomAndCenter(this.zoom, this.center, false, 600)
    },

    renderClusterMarker(context) {
      let el = `<div class="polymeric">
        <div class="polymeric-container">
          <p>${context.count}</p>
        </div>
      </div>`

      let offset = new this.mapLib.Pixel(-9, -9)
      context.marker.setContent(el)
      context.marker.setOffset(offset)
      context.marker.lnglat = context.clusterData[0].lnglat
      context.marker.on('click', e => {
        this.map.setZoomAndCenter(this.map.getZoom() < 22 ? this.map.getZoom() + 3 : this.map.getZoom(), e.target.lnglat, false, 400)
      })
    },

    renderMarker(context) {
      const buildId = context.data[0].id

      let isHomestead = !context.data[0].communityName, isActive = buildId == this.selected, innerContent = ""
      if (isHomestead) { //宅基地
        innerContent = [context.data[0].areaName, context.data[0].label].join("  ")
      } else {
        innerContent = [context.data[0].communityName, context.data[0].buildingNumber + "栋"].join("  ")
      }
      let el = `<div class="mark ${isHomestead ? 'homestead' : ''} ${isActive ? 'active' : ''}"  id="buildId-${buildId}" >
         <div class="mark-container">
          <span>${innerContent}</span>
         </div>
      </div>`

      context.marker.setContent(el);
      context.marker.id = `${buildId}`
      context.marker.lnglat = context.data[0].lnglat
      context.marker.on('click', e => {
        this.selected = e.target.id
        this.getBuildInfo(e.target.id, isHomestead)
        document.querySelectorAll('.mark')?.forEach(d => {
          if (d.id?.indexOf(this.selected) > -1) {
            d.classList.add('active')
          } else {
            d.classList.remove('active')
          }
        })
        // this.map.setZoomAndCenter(this.map.getZoom() < 22 ? this.map.getZoom() + 2 + 0.00001 : this.map.getZoom(), e.target.lnglat, false, 300)
      })
    },

    addMakert(points) {
      new this.mapLib.MarkerClusterer(this.map, points, {
        gridSize: 60,
        maxZoom: 15,
        clusterByZoomChange: false,
        renderClusterMarker: this.renderClusterMarker,
        renderMarker: this.renderMarker
      })
    },

    getCommunityList() {
      this.instance.post('/app/appcommunitybuildinginfo/listByBuildingAndHomestead', null, {
        params: {
          current: 1,
          size: 1000000
        },
        withoutToken: true
      }).then(res => {
        if (res.code === 0) {
          this.buildList = res.data
          const points = res.data?.map(item => {
            return {
              lnglat: [item.lng, item.lat],
              id: item.id,
              corpId: item.corpId,
              areaName: item.areaName,
              buildingNumber: item.buildingNumber,
              communityName: item.communityName,
              label: item.name
            }
          })
          this.addMakert(points)
        }
      })
    },

    hidePopup() {
      this.isShowArea = false
      this.isShowSearch = false
    },

    switchLayer(flag) {
      if (flag) {
        this.map.addLayer(this.satellite)
      } else {
        this.map.removeLayer(this.satellite)
      }

      this.isImageMap = flag
    },

    initMap() {
      if (this.map && this.mapLib) {
        this.mapLib.plugin([
          'AMap.ControlBar'
        ], () => {
          this.map.addControl(new this.mapLib.ControlBar({
            position: {
              right: '20px',
              bottom: '20px'
            },
            showControlButton: true
          }))
        })
        this.getCommunityList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.AppHomesteadDV {
  position: relative;
  height: 100%;

  .AppHomesteadDV-mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);
  }

  .switch-btn {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 11;
    width: 160px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    background-image: url(https://cdn.cunwuyun.cn/shuangzhu/btn.png);
    background-size: 100% 100%;
    transform: translateX(-50%);
    user-select: none;

    &:hover {
      opacity: 0.8;
    }
  }

  .summary {
    display: flex;
    position: absolute;
    justify-content: space-between;
    flex-direction: column;
    left: 40px;
    top: 0;
    z-index: 1;
    height: 100%;
    padding: 40px 0;

    .summary-item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      & > div:last-child {
        width: 180px;
        height: 40px;
        line-height: 40px;
        padding-left: 14px;
        font-size: 28px;
        color: #fff;
        background: linear-gradient(270deg, rgba(119, 169, 255, 0.2) 0%, rgba(66, 112, 255, 0.3) 100%);
      }
    }

    .summary-item__top {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      h2 {
        margin-left: 10px;
        font-size: 16px;
        color: #D8E2F9;
        font-weight: normal;
      }
    }
  }

  .building-model {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1111;
    width: 80%;
    height: 90%;
    transform: translate(-50%, -50%);

    .building-model__title {
      position: relative;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #081037;
      box-shadow: 0 0 20px 4px #3F63FF inset;

      i {
        position: absolute;
        right: 20px;
        top: 50%;
        z-index: 1;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        transform: translateY(-50%);

        &:hover {
          opacity: 0.8;
        }
      }

      h2 {
        font-size: 20px;
        font-weight: normal;
        color: #fff;
      }
    }

    .building-model__content {
      width: 100%;
      height: calc(100% - 50px);
    }
  }

  .no-more {
    display: block;
    height: 60px;
    line-height: 60px;
    margin-top: 2px;
    text-align: center;
    font-size: 12px;
    color: #999;
    width: 100%;
  }

  ::v-deep .ai-list__content--right-wrapper {
    height: 100%;
    margin: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  .community-btn {
    width: 120px;
    height: 40px;
    line-height: 40px;
    margin: 20px auto 20px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background: rgba(7, 11, 35, 0.4);
    box-shadow: 0 0 18px 4px #3F63FF inset;
    border-radius: 4px;
    border: 1px solid #B0D2FF;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }

  .community-info__star {
    margin-top: 4px;
    margin-bottom: 8px;

    .community-info__star--content {
      display: flex;
      align-items: center;
      height: 36px;
      padding: 0 12px;
      color: #666666;
      font-size: 12px;

      span {
        flex: 1;
        text-align: center;

        &:first-child {
          text-align: left;
        }

        &:last-child {
          text-align: right;
        }
      }

      &:nth-of-type(2n) {
        background: #fff;
      }
    }

    .community-info__star--tab {
      display: flex;
      align-items: center;
      height: 36px;
      padding: 0 12px;
      user-select: none;
      background: #fff;

      span {
        height: 100%;
        line-height: 36px;
        color: #999999;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        border-bottom: 2px solid transparent;

        &:first-child {
          margin-right: 16px;
        }

        &.star-active {
          color: #2266FF;
          border-bottom: 2px solid #2266FF;
        }
      }
    }
  }

  .community-info__item--imgs {
    display: block !important;
    height: auto !important;

    label {
      height: 36px;
      line-height: 36px;
    }

    .community-info__item--img {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 10px;
      overflow: hidden;

      img {
        width: 69px;
        height: 69px;
        margin-right: 4px;
        margin-bottom: 4px;
        cursor: pointer;

        &:nth-of-type(4n) {
          margin-right: 0;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .map-menu {
    position: absolute;
    bottom: 52px;
    left: 30px;
    z-index: 11;

    .map-layers__wrapper {
      display: none;
      position: absolute;
      bottom: 28px;
      left: 0;
      padding-bottom: 4px;
    }

    .map-layers {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 180px;
      height: 66px;
      margin-bottom: 4px;
      padding: 5px;
      background: #FFFFFF;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;

      .map-layers__item {
        position: relative;
        width: 80px;
        height: 56px;
        margin-right: 10px;
        cursor: pointer;
        user-select: none;
        border: 1px solid transparent;

        &.map-layers__item-active {
          border: 1px solid #366FFF;
        }

        .map-layers__item--tag {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 32px;
          height: 18px;
          line-height: 18px;
          text-align: center;
          color: #fff;
          font-size: 12px;
          border: 1px solid transparent;
          background: transparent;

          &.map-layers__item--tag-active {
            background: #366FFF;
          }
        }

        img {
          width: 100%;
          height: 100%;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .map-menu__item {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      margin-bottom: 10px;
      background: #FFFFFF;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      cursor: pointer;
      user-select: none;

      &:hover {
        .map-layers__wrapper {
          display: block;
        }
      }

      &:last-child {
        margin-bottom: 0;
      }

      i {
        font-size: 16px;
        color: #89b;
      }
    }
  }

  .switch-layer {
    position: absolute;
    bottom: 4.6em;
    left: .56em;
    z-index: 11;
    width: 29px;
    height: 29px;
    padding: 3px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    cursor: pointer;

    .switch-layer__wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      background-color: rgba(0, 60, 136, 0.5);

      &:hover {
        background-color: rgba(0, 60, 136, 0.7);
      }
    }
  }

  .map {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    ::v-deep .ol-zoom {
      display: none !important;
      top: inherit !important;
      bottom: 0.5em !important;
    }

    div {
      box-sizing: border-box;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  }

  .community {
    display: flex;
    align-items: center;
    position: relative;
    height: 28px;
    padding: 0 10px;
    background: #0F8F64;
    border-radius: 26px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;

    &.color1 {
      background: #2266FF;

      em:after {
        border-top-color: #2266FF !important;
      }
    }

    &.color2 {
      background: #F46159;

      em:after {
        border-top-color: #F46159 !important;
      }
    }

    em {
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translate(-50%, 0);

      &::after {
        position: absolute;
        bottom: -6px;
        left: 0;
        width: 0;
        height: 0;
        border: 6px solid #0F8F64;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
        transform: translate(-50%, 0);
        overflow: hidden;
        content: ' ';
      }
    }

    i {
      padding-right: 2px;
      position: relative;
      color: #ffc928;
      font-size: 16px;
      font-style: normal;
    }
  }

  ::v-deep .polymeric {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;

    &.polymeric-active {
      .polymeric-container {
        background: #F46159;
      }

      &::after {
        background-color: #F46159;
      }
    }

    &::after {
      position: absolute;
      z-index: -1;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      -webkit-animation: warn 1s ease-out 0s infinite;
      animation: warn 1s ease-out 0s infinite;
      background: rgba(54, 165, 255, 1);
      transform: translate(-50%, -50%);
      content: " ";
    }

    .polymeric-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: rgba(54, 165, 255, 1);

      p {
        text-align: center;
        width: 58px;
        color: #fff;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      p:first-child {
        font-size: 14px;
      }

      h2 {
        color: #fff;
        font-weight: normal;
        font-size: 12px;
      }
    }
  }

  ::v-deep .mark {
    user-select: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 39, 100, 0.5);
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: 20px;
    border: 1px solid #36A5FF;

    &.homestead {
      background: rgba(#FF701A, .3);
      border-color: #FF701A;
    }

    &.active {
      background-color: #36A5FF;

      &.homestead {
        background-color: #FF701A;
      }
    }

    .mark-container {
      color: white;
      font-size: 14px;
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  @-webkit-keyframes warn {
    0% {
      transform: scale(.5);
      opacity: 1
    }

    30% {
      opacity: .5
    }

    to {
      transform: scale(1.7);
      opacity: 0
    }
  }

  @keyframes warn {
    0% {
      transform: scale(.5);
      opacity: 1
    }

    30% {
      opacity: .5
    }

    to {
      transform: scale(1.7);
      opacity: 0
    }
  }

  .community-info {
    position: absolute;
    top: 58px;
    right: 10px;
    width: 400px;
    max-height: calc(100% - 117px);
    background: rgba(0, 15, 38, 0.7);
    border: 1px solid #103588;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 111;
    border-radius: 2px;

    &::after {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      filter: blur(5px);
      content: ' ';
      background: inherit;
      pointer-events: none;
    }

    .community-info__close {
      position: absolute;
      right: 0;
      top: 0;
      padding: 16px 12px 0 12px;
      font-size: 16px;
      color: #fff;
      cursor: pointer;

      &:hover {
        opacity: 0.6;
      }
    }

    &::-webkit-scrollbar {
      width: 6px;
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background: rgba(144, 147, 153, .5);
    }

    .community-info__header {
      min-height: 72px;
      padding: 10px 20px;
      background: linear-gradient(270deg, rgba(11, 158, 255, 0.2) 0%, rgba(2, 81, 227, 0.2) 100%);

      h2 {
        max-width: 330px;
        line-height: 28px;
        margin: 0;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 5px;
        text-align: justify;
      }

      div {
        display: flex;
        align-items: center;
        color: #D2E0FF;
        font-size: 12px;
      }

      span {
        display: block;
        line-height: 20px;
        font-style: normal;
        color: #82C5FF;
        font-size: 12px;
      }
    }

    .community-info__table {
      margin: 4px 0;
      font-size: 0;

      .community-info__table--item {
        display: inline-block;
        width: 25%;
        font-size: 12px;
        color: #333;

        span {
          display: block;
          width: 80px;
          height: 48px;
          padding: 8px 10px;
          text-align: center;
          box-sizing: border-box;
          background: #fff;
          border-bottom: 1px solid #DEE6F3;
          border-right: 1px solid #DEE6F3;
        }

        h2 {
          width: 80px;
          height: 40px;
          line-height: 40px;
          font-size: 12px;
          text-align: center;
          font-weight: normal;
          box-sizing: border-box;
          background: #F3F6F9;
          border-bottom: 1px solid #DEE6F3;
          border-right: 1px solid #DEE6F3;
        }

        &:last-child {
          border-right: none;
        }
      }
    }

    .community-info__wrapper {
      & > h2 {
        line-height: 36px;
        height: 36px;
        margin: 16px 0;
        padding: 0 26px;
        font-size: 16px;
        color: #fff;
        font-weight: normal;
        background: url(https://cdn.cunwuyun.cn/shuangzhu/title2.png) no-repeat;
        background-size: auto 24px;
        background-position: 0 7px;
      }

      .community-info__total {
        display: flex;
        align-items: center;
        height: 68px;
        background: rgba(63, 136, 255, 0.15);

        & > div {
          flex: 1;
          text-align: center;

          h2 {
            line-height: 1;
            font-size: 24px;
            color: #fff;
          }

          span {
            display: block;
            margin-top: 4px;
            color: rgba(130, 197, 255, 1);
            font-size: 14px;
          }
        }
      }

      .community-info__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        font-size: 12px;
        color: #333;
        background: rgba(63, 136, 255, 0.15);

        &:nth-of-type(2n) {
          background: rgba(0, 0, 0, 0.14);
        }

        span {
          max-width: 70%;
          text-align: right;
          color: #fff;
        }

        label {
          flex-shrink: 1;
          color: #82C5FF;
        }
      }

      &.community-info__wrapper--last {
        .community-info__item {
          background: #fff;

          &:nth-of-type(2n) {
            background: #F3F6F9;
          }
        }
      }
    }
  }

  .map-area__list {
    position: absolute;
    top: 51px;
    left: 0;
    z-index: 111;
    width: 320px;
    overflow-y: auto;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    background: #fff;

    .content {
      padding: 10px 20px;
      font-size: 0;

      h2 {
        margin-bottom: 10px;
        color: #5088FF;
        font-size: 12px;
        cursor: pointer;
      }

      span {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
        color: #333;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          color: #5088FF;
        }
      }
    }

    .top {
      height: 36px;
      line-height: 36px;
      padding: 0 20px;
      border-bottom: 1px solid #EEEEEE;

      h2 {
        font-weight: normal;
        color: #666666;
        font-size: 12px;
      }
    }
  }

  .search-result {
    position: absolute;
    top: 51px;
    left: 0;
    z-index: 111;
    width: 360px;
    height: 216px;
    overflow-y: auto;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    background: #fff;

    &::-webkit-scrollbar {
      width: 6px;
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background: rgba(144, 147, 153, .5);
    }

    .search-result__item {
      display: flex;
      align-items: center;
      height: 36px;
      padding: 0 16px;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover {
        background: #f5f7fa;
      }

      i {
        position: relative;
        top: 2px;
        color: #ccc;
        font-size: 16px;
      }

      h2 {
        padding: 0 8px 0 10px;
        color: #333333;
        font-size: 14px;
      }

      span {
        max-width: 240px;
        color: #999999;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .map-area {
    position: absolute;
    top: 58px;
    left: 10px;
    z-index: 111;

    .map-area__container {
      display: flex;

      .map-area__left {
        display: flex;
        align-items: center;
        width: 360px;
        height: 36px;
        padding: 0 16px 0 0;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
        border-radius: 2px;
        cursor: pointer;
        user-select: none;
        background: #fff;

        .left {
          display: flex;
          position: relative;
          align-items: center;
          height: 100%;
          line-height: 1;
          padding: 0 20px 0 8px;

          &:hover {
            opacity: 0.6;
          }

          &:after {
            position: absolute;
            right: 0;
            top: 50%;
            width: 1px;
            height: 24px;
            background: #DDDDDD;
            transform: translateY(-50%);
            box-shadow: -1px 0px 0px 0px #DDDDDD;
            border-radius: 2px 0 0 0;
            opacity: 0.9;
            content: ' ';
          }

          span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            color: #333;
          }

          i {
            font-size: 16px;
          }
        }

        ::v-deep .el-input, ::v-deep input {
          border: none;
        }

        ::v-deep input {
          position: relative;
          flex: 1;
          height: 36px;
          padding: 0 32px 0 16px;
          font-size: 14px;
          border: none;
        }

        .search-icon {
          &:after {
            position: absolute;
            left: -16px;
            top: 50%;
            width: 1px;
            height: 24px;
            background: #DDDDDD;
            transform: translateY(-50%);
            box-shadow: -1px 0px 0px 0px #DDDDDD;
            border-radius: 2px 0 0 0;
            opacity: 0.9;
            content: ' ';
          }
        }

        i {
          position: relative;
          color: #89B;
        }
      }
    }
  }
}
</style>
