<template>
  <div class="map">
    <div id="map" ref="rootmap" />
    <div class="community-info" v-show="isShowInfo">
      <div class="community-info__close" title="关闭" @click="closeInfo">
        <i class="iconClean iconfont"></i>
      </div>
      <div class="community-info__header">
        <div class="user">
          <span>{{ formatName(info.name) }}</span>
        </div>
        <h2>{{ info.name }}</h2>
        <h3>{{ info.gpsDesc }}</h3>
        <p>最后更新时间：{{ info.lastUpdateTime }}</p>
        <div class="community-info__header--status">
          <div :style="{color: info.onlineStatus === '1' ? '#2EA222' : '#F46' }">
            <i class="iconfont iconzhuangtai"></i>
            <span>设备{{ info.onlineStatus === '1' ? '在线' : '离线' }}</span>
          </div>
          <div>
            <i class="iconfont icondianliang"></i>
            <span>剩余{{ info.electricQuantity }}%</span>
          </div>
        </div>
        <div class="community-info__header--info">
          <div class="community-info__header--info-item" v-for="(item, index) in testItem" :key="item.name">
            <div class="left">
              <div :style="{backgroundColor: item.color}">
                <i :class="item.icon" class="iconfont"></i>
              </div>
              <span>{{ item.name }}</span>
            </div>
            <i :style="{color: (testData[index] && testData[index].abnormalStatus === '1') ? '#F46' : ''}">{{ testData[index] ? testData[index].itemValue : '-' }}{{ index === '1' ? '℃' : '' }}</i>
          </div>
        </div>
      </div>
      <div class="community-info__wrapper">
        <div class="community-info__title">
          <h2>人员信息</h2>
          <span :style="{backgroundColor: userStatusColor}">{{ userStatus }}</span>
        </div>
        <div class="community-info__item">
          <label>姓名</label>
          <span>{{ info.name}}</span>
        </div>
        <div class="community-info__item">
          <label>性别</label>
          <span>{{ info.sex === '1' ? '男' : '女' }}</span>
        </div>
        <div class="community-info__item">
          <label>年龄</label>
          <span>{{ info.age }}</span>
        </div>
        <div class="community-info__item">
          <label>所属地区</label>
          <span>{{ info.areaName }}</span>
        </div>
        <div class="community-info__item">
          <label>联系电话</label>
          <span>{{ info.phone }}</span>
        </div>
      </div>
    </div>
    <div class="map-menu">
      <div class="map-menu__item">
        <div class="map-layers__wrapper">
          <div class="map-layers">
            <div class="map-layers__item" @click="switchLayer(false)"
                 :class="[!isImageMap ? 'map-layers__item-active' : '']">
              <img src="https://cdn.cunwuyun.cn/AppCommunityMap/dz.png" alt="">
              <div class="map-layers__item--tag" :class="[!isImageMap ? 'map-layers__item--tag-active' : '']">地图</div>
            </div>
            <div class="map-layers__item" @click="switchLayer(true)"
                 :class="[isImageMap ? 'map-layers__item-active' : '']">
              <img src="https://cdn.cunwuyun.cn/AppCommunityMap/yx.png" alt="">
              <div class="map-layers__item--tag" :class="[isImageMap ? 'map-layers__item--tag-active' : '']">卫星</div>
            </div>
          </div>
        </div>
        <i class="iconfont iconEarth"></i>
      </div>
      <div class="map-menu__item" @click="changeZoom(true)">
        <i class="iconfont iconfangda"></i>
      </div>
      <div class="map-menu__item" @click="changeZoom()">
        <i class="iconfont iconsuoxiao"></i>
      </div>
    </div>
    <div class="left-info" v-if="treeData.length">
      <div class="left-info__wrapper" :class="[isShowLeft ? 'left-info__wrapper--active' : '']">
        <div class="left-info__wrapper--container">
          <div class="left-info__top">
            <h2>监护地图</h2>
            <div class="left-info__top--middle">
              <div>
                <span>人员总数：</span>
                <i>{{ treeData[0].deviceCount }}</i>
              </div>
              <div>
                <span>在线人数：</span>
                <i>{{ treeData[0].onlineCount }}</i>
              </div>
            </div>
            <el-progress type="circle" :stroke-width="3" color="#19D286" :percentage="percentage" :width="48"></el-progress>
          </div>
          <div class="left-info__middle">
            <el-select v-model="search.status" size="small" placeholder="请选择在线状态" @change="getTree()">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input placeholder="请输入姓名" prefix-icon="iconsearch iconfont" size="small" v-model="search.name">
            </el-input>
          </div>
          <div class="left-info__tree">
            <h2>设备列表</h2>
            <el-tree
              :filter-node-method="filterNode"
              ref="tree"
              :props="defaultProps"
              node-key="parentId"
              :data="treeData"
              :default-expand-all="defaultExpandAll"
              highlight-current
              :default-expanded-keys="defaultExpanded"
              @current-change="onTreeChange">
              <template slot-scope="{ node, data }">
                <div class="tree-user">
                  <i class="iconfont iconProlife" :style="{color: data.deviceOnlineStatus === '1' ? '#32a426' : '#777'}" v-if="data.type === '1'"></i>
                  <span>{{ data.type === '1' ? data.deviceName : data.areaName }}</span>
                </div>
              </template>
            </el-tree>
            <!-- :current-node-key="search.departmentId"
            :default-expanded-keys="defaultExpanded"
            :default-checked-keys="defaultChecked" -->
          </div>
        </div>
        <div class="left-info__btn" @click="isShowLeft = !isShowLeft">
          <img src="https://cdn.cunwuyun.cn/dvcp/zhjh/left.png">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import {mapState} from 'vuex'

export default {  
  name: 'AppTutlageMap',
  label: '监护地图',
  provide() {
    return {
      root: this
    }
  },
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      map: null,
      community: '',
      isShowLeft: true,
      isImageMap: false,
      isShowInfo: false,
      info: {},
      defaultExpandAll: false,
      satellite: null,
      zoom: 11,
      choosedId: '',
      defaultProps: {
        children: 'childrenArea',
        label: 'areaName'
      },
      search: {
        status: '3',
        name: ''
      },
      testItem: [{
        name: '体温',
        icon: 'icontiwen',
        color: '#6BA3DB'
      }, {
        name: '心率',
        icon: 'iconxinlv',
        color: '#72BB5C'
      }, {
        name: '血压',
        icon: 'iconxueya',
        color: '#7577CB'
      }, {
        name: '血氧',
        icon: 'iconxueyang',
        color: '#FF5656'
      }],
      defaultExpanded: [],
      testData: [],
      treeData: [],
      center: []
    }
  },
  computed: {
    ...mapState(['user']),

    options () {
      return [{
        value: '3',
        label: '全部'
      }, {
        value: '1',
        label: '在线'
      }, {
        value: '0',
        label: '离线'
      }]
    },

    userStatus () {
      if (this.info.abnormalStatus === '2') {
        return '求助'
      }

      if (this.info.abnormalStatus === '1') {
        return '异常'
      }

      if (this.info.abnormalStatus === '0') {
        return '正常'
      }

      return '-'
    },

    userStatusColor () {
      if (this.info.abnormalStatus === '2') {
        return '#F46159'
      }

      if (this.info.abnormalStatus === '1') {
        return '#FFAA44'
      }

      if (this.info.abnormalStatus === '0') {
        return '#0F8F64'
      }

      return '#0F8F64'
    },

    percentage () {
      if (!this.treeData.length) {
        return 0
      }

      if (this.treeData[0].deviceCount == 0 || this.treeData[0].onlineCount == 0) {
        return 0
      }

      return Number((this.treeData[0].onlineCount / this.treeData[0].deviceCount).toFixed(2)) * 100
    }
  },

  watch: {
    'search.name' (val) {
      this.$refs.tree.filter(val)
    }
  },

  created() {
    this.getTree()
  },

  mounted() {
    this.getCorpLocation()
  },

  methods: {
    getIdInfo (UUserCard, num) {
      if (num == 1) {
        var birth = UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14)
        return birth
      }
      if (num == 2) {
        if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
          return '1'
        } else {
          return '0'
        }
      }

      if (num == 3) {
        var myDate = new Date()
        var month = myDate.getMonth() + 1
        var day = myDate.getDate()
        var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
        if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
          age ++
        }

        return age
      }
    },

    getCorpLocation(){
      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
        if(res.code==0){
          this.initMap(res.data);
        }
      })
    },

    getList () {
      this.instance.post(`/app/appintelligentguardianshipdevice/list`, null, {
        params: {
          size: 100000,
          current: 1
        }
      }).then(res => {
        if (res.code == 0) {
          const points = res.data.records.map(item => {
            return {
              ...item,
              lnglat: [item.lng, item.lat],
              id: item.id,
              corpId: item.corpId,
              areaName:item.areaName,
              name: item.name
            }
          })

          this.addMakert(points)

          if (this.$route.query.id) {
            this.onTreeChange({
              type: '1',
              deviceId: this.$route.query.id,
              lng: this.$route.query.lng,
              lat: this.$route.query.lat
            })
          }
        }
      })
    },

    filterNode(value, data) {
      if (!value) return true

      return  data.areaName.indexOf(value) !== -1 || (data.deviceName && data.deviceName.indexOf(value) !== -1)
    },

    onTreeChange (e) {
      if (e.type === '1') {
        this.map.setZoomAndCenter(16, [e.lng, e.lat], false, 300)
        this.getInfo(e.deviceId)
        this.choosedId = e.deviceId
      }
    },

    getTree(){
      this.instance.post(`/app/appintelligentguardianshipdevice/queryTree?areaId=${this.user.info.areaId}`).then(res=>{
        if (res.code === 0) {
          this.treeData = this.formatList([res.data])

          this.$nextTick(() => {
            this.defaultExpanded = [res.data.parentId]
            this.$refs.tree.setCurrentKey(res.data.parentId)
          })
        }
      })
    },

    formatList (list) {
      var arr = []
      var i = 0
      for (let item of list) {
        if (!item.parentId) {
          item.parentId = 0
        } else {
          item.parentId = `${item.parentId}-${i}`
        }
        i = i + 1
        if (item.childrenDevice && item.childrenDevice.length) {
          let userList = JSON.parse(JSON.stringify(item.childrenDevice))

          if (this.search.status !== '3') {
            userList = userList.filter(v => {
              if (this.search.status === v.deviceOnlineStatus) {
                this.defaultExpanded.push(item.parentId)
                return true
              }
              
              return false
            })
          }

          if (item.childrenArea) {
            item.childrenArea = [
              ...item.childrenArea,
              ...userList,
            ]
          } else {
            item.childrenArea = [
              ...userList
            ]
          }
          delete item.childrenDevice
        }

        if (item.childrenArea && item.childrenArea.length) {
          this.formatList(item.childrenArea)
        }

        arr.push(item)
      }

      return arr
    },

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

    formatName (str) {
      if (!str) return ''

      return str.substr(str.length - 2)
    },

    getInfo (id) {
      this.instance.post(`/app/appintelligentguardianshipdevice/queryMonitorList?deviceId=${id}&type=1`).then(res => {
        if (res.code === 0) {
          let obj = {}
          this.testData = res.data.records.forEach(item => {
            obj[item.item] = item
          })

          this.testData = obj
        }
      })
      this.instance.post(`/app/appintelligentguardianshipdevice/queryDetailById?id=${id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
          this.info.age = this.getIdInfo(res.data.idNumber, 3)
          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 AMap.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() + 3, e.target.lnglat, false, 500)
      })
    },

    getColor (data) {
      if (data.id === this.choosedId) {
        return '#2266FF'
      }

      if (data.abnormalStatus === '2') {
        return '#F46159'
      }

      if (data.abnormalStatus === '1') {
        return '#FFAA44'
      }

      if (data.onlineStatus === '0') {
        return '#0F8F64'
      }

      return '#0F8F64'
    },

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

      let el = `<div class="mark mark${context.data[0].abnormalStatus}" id="buildId-${buildId}" data-color="${this.getColor(context.data[0])}" style="background-color: ${this.getColor(context.data[0])}">
         <div class="mark-contaienr">
            <span>${context.data[0].areaName}</span>&nbsp;&nbsp;
            <span>${context.data[0].name}</span>
          </div>
        <div class="arrow" style="border-top-color: ${this.getColor(context.data[0])}"></div>
      </div>`

      context.marker.setContent(el);
      context.marker.setAnchor("center")
      context.marker.id = `${buildId}`
      context.marker.data = JSON.stringify(context.data[0])
      context.marker.lnglat = context.data[0].lnglat

      context.marker.on('click', e => {
        this.choosedId = e.target.id
        this.getInfo(e.target.id)
        context.marker.setContent(el);
        document.querySelectorAll('.mark').forEach(el => {
          el.style['background-color'] = el.getAttribute('data-color')
          el.querySelector('.arrow').style['border-top-color'] = el.getAttribute('data-color')
        })
        document.querySelector(`#buildId-${e.target.id}`).style['background-color'] = '#2266FF'
        document.querySelector(`#buildId-${e.target.id}`).querySelector('.arrow').style['border-top-color'] = '#2266FF'
        this.map.setZoomAndCenter(this.map.getZoom() + 0.000000001, e.target.lnglat, false, 300)
      })
    },

    closeInfo () {
      this.info = {}
      this.isShowInfo = false
      this.choosedId = ''
      this.map.setZoom(this.map.getZoom() + 0.0001)
    },

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

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

      this.isImageMap = flag
    },

    initMap({lng,lat}) {
      this.center = [lng,lat];
      AMapLoader.load({
        key: '54a02a43d9828a8f9cd4f26fe281e74e',
        version: '2.0',
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer'],
        AMapUI: {
          version: '1.1',
          plugins: []
        }
      }).then((AMap) => {
        this.map = new AMap.Map('map', {
          resizeEnable: true,
          zooms: [6, 20],
          center: [lng, lat],
          zoom: this.zoom
        })
        this.satellite = new AMap.TileLayer.Satellite()
        this.getList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .community-info {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 380px;
    max-height: calc(100% - 20px);
    overflow-y: overlay;
    overflow-x: hidden;
    z-index: 111;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;

    .community-info__close {
      position: absolute;
      right: 0;
      top: 0;
      padding: 16px 12px 0 12px;
      font-size: 16px;
      color: #8899bb;
      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 {
      padding-top: 40px;
      text-align: center;
      background: url(https://cdn.cunwuyun.cn/dvcp/zhjh/map-bg.png) no-repeat;
      background-size: 100% 210px;

      .user {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        margin: 0 auto 8px;
        border-radius: 50%;
        background: #2266FF;

        span {
          color: #fff;
          font-size: 16px;
        }
      }

      h2 {
        line-height: 24px;
        margin-bottom: 12px;
        font-weight: 700;
        color: #222222;
        font-size: 18px;
      }

      h3, p {
        width: 300px;
        line-height: 22px;
        margin: 0 auto 4px;
        font-size: 13px;
        color: #888888;
        text-align: center;
        font-weight: normal;
      }

      & > h3 {
        line-height: 1.4;
        // overflow: hidden;
        // text-overflow:ellipsis;
        // white-space: nowrap;
      }

      .community-info__header--info {
        display: flex;
        flex-wrap: wrap;
        padding: 0 20px;

        .community-info__header--info-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 160px;
          height: 56px;
          margin-bottom: 20px;
          padding: 0 12px;
          background: #FFFFFF;
          border-radius: 4px;
          border: 1px solid #EEEEEE;

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

          & > i {
            position: relative;
            top: 2px;
            font-style: normal;
            color: #222222;
            font-size: 16px;
            font-weight: 700;
          }

          .left {
            display: flex;
            align-items: center;

            div {
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 8px;
              width: 24px;
              height: 24px;
              border-radius: 50%;
              background: #6BA3DB;

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

      .community-info__header--status {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;

        div {
          display: flex;
          align-items: center;
          color: #2EA222;
        }

        span {
          font-size: 14px;
        }

        div:first-child {
          margin-right: 20px;
        }

        i {
          position: relative;
          top: 2px;
          margin-right: 2px;
          font-size: 16px;
        }

        div:last-child {
          color: #2266FF;

          span {
            font-size: 12px;
          }
        }
      }
    }

    .community-info__wrapper {
      padding: 0 20px 40px;

      .community-info__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        h2 {
          position: relative;
          padding: 0 8px;
          font-size: 16px;
          font-weight: 700;

          &:after {
            position: absolute;
            left: 0;
            top: 50%;
            z-index: 1;
            width: 3px;
            height: 16px;
            background: #2266FF;
            transform: translateY(-50%);
            content: ' ';
          }
        }

        span {
          width: 52px;
          height: 24px;
          line-height: 24px;
          color: #fff;
          font-size: 14px;
          text-align: center;
          border-radius: 12px;
        }
      }

      .community-info__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        padding: 0 12px;
        font-size: 12px;
        color: #666;
        background: #F3F9FF;

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

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

        label {
          flex-shrink: 1;
          color: #222;
        }
      }

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

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

  .left-info {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    height: 100%;

    .left-info__btn {
      display: flex;
      position: absolute;
      align-items: center;
      justify-content: center;
      top: 50%;
      right: 0;
      width: 32px;
      height: 86px;
      cursor: pointer;
      user-select: none;
      background: url(https://cdn.cunwuyun.cn/dvcp/zhjh/right.png) no-repeat;
      background-size: 32px 86px;
      transform: translate(26px, -50%);

      &:hover {
        opacity: 0.8;
      }

      img {
        width: 16px;
        height: 16px;
      }
    }

    .left-info__wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 280px;
      height: 100%;
      background: #F3F4F7;
      box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      transform: translateX(-100%);

      .left-info__wrapper--container {
        width: 100%;
        height: 100%;
        overflow-y: auto;

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

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

      &.left-info__wrapper--active {
        transform: translateX(0);
      }

      .left-info__top {
        display: flex;
        align-items: center;
        padding: 16px;

        h2 {
          color: #222222;
          font-size: 18px;
          font-weight: 700;
        }

        .left-info__top--middle {
          flex: 1;
          text-align: center;
          color: #555555;

          i {
            padding-left: 8px;
            color: #222222;
            font-weight: 700;
            font-style: normal;
          }

          div {
            line-height: 20px;
            font-size: 12px;

            &:last-child {
              i {
                color: #19D286;
              }
            }
          }
        }
      }

      .left-info__tree {
        margin-top: 8px;
        height: 28px;
        line-height: 28px;
        padding: 0 16px;
        background: #E5E9EE;

        .tree-user {
          display: flex;
          align-items: center;
          color: #555;
          font-size: 15px;

          i {
            margin-right: 4px;
          }

          span {
            font-size: 15px;
          }
        }
        ::v-deep .el-tree {
          .el-tree-node__content {
            height: 32px;
          }

          .el-tree-node__expand-icon.is-leaf {
            color: transparent!important;
          }

          .is-current > .el-tree-node__content {
            &:hover {
              background-color: #2266FF;
              color: #fff;
            }

            background: #2266FF;
            
            span {
              color: #fff;
              font-weight: normal;
            }
          }
        }

        ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
          .tree-user {
            color: #fff;
          }
        }

        h2 {
          margin-bottom: 4px;
          color: #555555;
          font-size: 14px;
        }

        ::v-deep .el-tree {
          background: transparent;
        }
      }

      .left-info__middle {
        display: flex;
        align-items: center;
        padding: 0 16px;

        .el-select {
          flex-shrink: 1;
          width: 80px;
          margin-right: 4px;

          ::v-deep i {
            color: #8899bb;
          }
        }

        .el-input {
          width: 164px;

          ::v-deep i {
            color: #8899bb;
          }
        }
      }
    }
  }

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

  div {
    box-sizing: border-box;
  }

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

  ::v-deep .amap-logo, ::v-deep .amap-copyright {
    display: none !important;
  }

  ::v-deep .amap-icon {
    width: 40px !important;
    height: 40px !important;

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

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

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

.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-color: rgba(15, 143, 100, 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(15, 143, 100, 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{
  position: relative;
  user-select: none;
  cursor: pointer;
  height: 32px;
  border-radius: 26px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 12px;

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

  &.mark2::after {
    position: absolute;
    z-index: -1;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    -webkit-animation: warn 1s ease-out 0s infinite;
    animation: warn 1s ease-out 0s infinite;
    background-color: rgba(211, 38, 199, 1);
    transform: translate(-50%, -50%);
    content: " ";
  }

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

  .arrow{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -16px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: 8px solid #0F8F64;
  }

}

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

  30% {
    opacity: .5
  }

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

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

  30% {
    opacity: .5
  }

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

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