<template>
  <div id="container" class="container">
    <!-- 搜索盒子 -->
    <div class="top-left">
      <base-search width="400" @input="onInput" @reset="reset"></base-search>
      <div class="search-list" v-show="searchArr.arr.length">
        <div class="search-list__item" @click="pitchItem(item)" v-for="item in searchArr.arr">
          <div class="title">
            {{ item.name }}
            <div class="sign"></div>
          </div>
          <div class="g-fx-j item-content">
            <div>
              <div class="ft-14">
                {{ item.companyName }} <span>{{ item.workshop }}</span>
              </div>
              <div class="color-9 ft12 g-mt5">
                <el-icon>
                  <LocationFilled />
                </el-icon>
                {{ item.address }}
              </div>
            </div>
            <el-icon class="item-icon">
              <BottomRight />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="top-right">
      <div class="num1 fx-y g-xs" @click="onFilterStatus('总数')">
        <div class="ft24">{{ allDataArr.arr.length }}</div>
        <div class="ft14">总数</div>
        <div class="line"></div>
        <div @click.stop="onFilterStatus('在线')" class="g-fx-y">
          <div class="ft24">{{ allDataArr.arr.filter((f: any) => f.isOnline).length }}</div>
          <div class="ft14">在线</div>
        </div>
      </div>
      <div class="num2 fx-y g-xs" @click="onFilterStatus('报警')">
        <div class="ft24">{{ allDataArr.arr.filter((f: any) => f.inAlarm).length }}</div>
        <div class="ft14">报警</div>
      </div>
      <div class="num3 fx-y g-xs" @click="onFilterStatus('维修')">
        <div class="ft24">{{ allDataArr.arr.filter((f: any) => f.inRepair).length }}</div>
        <div class="ft14">维修</div>
      </div>
      <div class="num4 fx-y g-xs" @click="onFilterStatus('离线')">
        <div class="ft24">{{ allDataArr.arr.filter((f: any) => !f.isOnline).length }}</div>
        <div class="ft14">离线</div>
      </div>
    </div>
    <div class="bottom-right">
      <el-icon class="one g-xs">
        <Aim />
      </el-icon>
      <div class="fx-y tow g-xs">
        <el-icon @click="setZoom(true)">
          <Plus />
        </el-icon>
        <div class="line2"></div>
        <el-icon @click="setZoom(false)">
          <Minus />
        </el-icon>
      </div>
    </div>
    <!-- 设备详情 -->
    <div class="bottom-left" v-show="filterItem?.id">
      <el-button link class="bottom-left__name">
        {{ filterItem.companyName }}
        <el-icon class="color-9">
          <ArrowRight />
        </el-icon>
      </el-button>
      <div class="bottom-left__title">{{ filterItem.name }}</div>
      <div class="ft12 color-9">
        {{ filterItem.productNo }} ｜ {{ filterItem.time + (filterItem.isOnline ? '上线' : '离线') }}
      </div>
      <div class="ft12 color-9">
        地址：{{ filterItem.address }}
      </div>
      <!-- <div class="bottom-left__footer">
        <div class="icon-type"></div>
        系统故障
      </div> -->
      <div class="load-more g-xs" @click="toDetail">
        <el-icon>
          <ArrowRightBold />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { fetchAuthorizeDevicesForMap, fetchOverviewData } from '@/api/deviceAuthorize'
import AMapLoader from '@amap/amap-jsapi-loader'
import _, { filter } from 'lodash'
import PinyinMatch from 'pinyin-match'
let map: any = shallowRef(null)
let cluster: any = reactive({})
let marker: any = reactive({})
const zoom = ref(5)
onMounted(async () => {
  await getAllData()
  await initMap()
})

let filterItem: any = ref('')
let filterArr: any = reactive({
  arr: []
})
let allDataArr = reactive({
  arr: []
})
const getAllData = async () => {
  const data: any = await fetchAuthorizeDevicesForMap()
  allDataArr.arr = data
  filterArr.arr = data
}

const initMap = () => {
  AMapLoader.load({
    key: 'c1c433c3bfaf05d9ca90d28a67e965b0', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.MarkerCluster', 'AMap.Marker'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then(async (AMap) => {
    map = new AMap.Map('container', {
      center: [113.662345, 34.752688],
      zoom: zoom.value
    })
    const data = filterArr.arr
    const arr = data.map((item: any) => ({
      lnglat: [item.longitude, item.latitude],
      id: item.id,
      name: item.name,
      inAlarm: item.inAlarm,
      inRepair: item.inRepair,
      isOnline: item.isOnline,
      ...item
    }))
    cluster = new AMap.MarkerCluster(map, arr, {
      gridSize: 80,
      minClusterSize: 2,
      renderMarker: (context: any) => {
        if (context.data[0].isOnline) {
          if (context.data[0].inAlarm) {
            const content = '<div class="map3"></div>'
            context.marker.setContent(content)
            return content
          } else if (context.data[0].inRepair) {
            const content = '<div class="map2"></div>'
            context.marker.setContent(content)
          } else {
            const content = '<div class="map1"></div>'
            context.marker.setContent(content)
          }
        } else {
          const content = '<div class="map4"></div>'
          context.marker.setContent(content)
          return content
        }
      }
    })
    cluster.on('click', ({ cluster, lnglat, target, markers }: any) => {
      if (cluster.M.length > 1) {
        map.setZoomAndCenter(map.getZoom() + 1, lnglat)
        return
      }
      const item = cluster.p
      if (cluster.M?.[0]?.length > 2) {
        map.setZoomAndCenter(16, lnglat)
        return
      }
      marker?.remove?.()
      marker = new AMap.Marker({
        map: AMap,
        position: [item.longitude, item.latitude],
        content: `<div class="map5">${item.name}</div>`,
        offset: [-50, -45],
        zIndex: 99
      })
      filterItem.value = item
      map.add(marker)
    })
    map.on('click', (v: any) => {
      filterItem.value = ''
      marker?.remove?.()
    })
  })
}
const toDetail = () => {
  useToDetail(filterItem.value.id, filterItem.value.type)
}
const pitchItem = (e: any) => {
  marker?.remove?.()
  filterArr.arr = [e]
  filterItem.value = {}
  cluster.setMap(null)
  cluster.setData([
    {
      lnglat: [e.longitude, e.latitude],
      ...e,
      weight: 8
    }
  ])
  setTimeout(() => {
    map.setZoomAndCenter(18, [e.longitude, e.latitude])
  }, 100)
}

const searchArr: any = reactive({
  arr: []
})
const onInput = _.debounce(
  (v: string) => {
    const arr = allDataArr.arr.filter((el: any) => {
      return PinyinMatch.match(el.name, v) || PinyinMatch.match(el.companyName, v)
    })
    searchArr.arr = arr
  },
  1000,
  {
    trailing: true
  }
)

const setZoom = (v: Boolean) => {
  if (v) {
    zoom.value++
  } else {
    zoom.value--
  }
  map.setZoom(zoom.value)
}
const onFilterStatus = (v: any) => {
  const obj: any = {
    在线: 'isOnline',
    报警: 'inAlarm',
    维修: 'inRepair'
  }
  const arr = allDataArr.arr.filter((item: any) => {
    if (v === '总数') return item
    if (v === '离线') return !item.isOnline
    return item[obj[v]]
  })
  cluster.setData([])

  const arr1 = arr.map((item: any) => {
    return {
      ...item,
      lnglat: [item.longitude, item.latitude]
    }
  })
  cluster.setData(arr1)
  map.setCenter([113.662345, 34.752688])
  map.setZoom(5)
}
const reset = () => {
  getAllData()
  marker?.remove?.()
  filterItem.value = {}
  map.setZoomAndCenter(5, [113.662345, 34.752688])
  const arr1 = allDataArr.arr.map((item: any) => {
    return {
      ...item,
      lnglat: [item.longitude, item.latitude]
    }
  })
  searchArr.arr = []
  cluster.setData(arr1)
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: calc(100vh - 90px);
  position: relative;

  .g-fx-y {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .top-left {
    z-index: 9;
    top: 30px;
    left: 30px;
    position: absolute;

    .search-list {
      min-height: 80px;
      background-color: pink;
      width: 400px;
      margin-top: -20px;
      max-height: 401px;
      overflow-y: auto;
      background: #ffffff;
      box-shadow: 0px 5px 10px 0px rgba(20, 11, 14, 0.03);
      border-radius: 10px;

      &__item {
        padding: 15px;
        height: 100px;
        border-bottom: 1px solid #f6f6f6;

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

        &:hover {
          background: #efefef;
        }
      }

      .item-content {
        height: 60px;
        margin-top: 8px;
      }

      .item-icon {
        width: 40px;
        font-size: 20px;
        color: #cccccc;
      }

      .title {
        font-size: 16px;
        display: flex;
        align-items: center;
        font-weight: bold;

        .sign {
          width: 25px;
          height: 5px;
          background: #f2ac46;
          border-radius: 3px;
          margin-left: 20px;
        }
      }
    }
  }

  .top-right {
    width: 60px;
    height: 400px;
    position: absolute;
    z-index: 9;
    top: 30px;
    right: 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .bottom-right {
    position: absolute;
    z-index: 9;
    bottom: 30px;
    right: 30px;
    text-align: center;
    font-weight: bold;

    .one {
      width: 45px;
      height: 45px;
      color: #6e707b;
      padding: 10px 0;
      box-sizing: border-box;
      font-size: 20px;
      background: #ffffff;
      box-shadow: 0px 5px 10px 0px rgba(20, 11, 14, 0.03);
      border-radius: 10px;
      margin-bottom: 5px;
    }

    .tow {
      width: 45px;
      height: 90px;
      background: #ffffff;
      box-shadow: 0px 5px 10px 0px rgba(20, 11, 14, 0.03);
      border-radius: 10px;
      justify-content: space-around;
      padding: 8px 0;
    }
  }

  .bottom-left {
    position: absolute;
    bottom: 30px;
    z-index: 9;
    left: 30px;
    width: 850px;
    height: 180px;
    background: #ffffff;
    box-shadow: 0px 5px 10px 0px rgba(20, 11, 14, 0.03);
    border-radius: 10px;
    padding: 20px 40px;

    &__name {
      color: #000000;
      height: 20px;
      line-height: 20px;
      display: flex;
      align-items: center;

      .el-icon {
        margin-left: 10px;
      }
    }

    &__title {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-top: 25px;
      margin-bottom: 8px;
    }

    &__footer {
      margin-top: 8px;
      width: 90px;
      height: 25px;
      border: 1px solid #ed6159;
      border-radius: 5px;
      color: #ed6159;
      font-size: 12px;
      text-align: center;
      line-height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon-type {
      width: 14px;
      height: 13px;
      margin-right: 5px;
      background-image: url(../../assets/icon/baoj.png);
      background-size: cover;
    }

    .load-more {
      width: 40px;
      height: 80px;
      background: #eaeefa;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20px;
      text-align: center;
      line-height: 80px;
    }
  }

  .num1 {
    width: 60px;
    height: 150px;
    background: #5f7cd6;
    border-radius: 10px;
    padding: 10px 12px;
  }

  .num2 {
    width: 60px;
    height: 75px;
    background: #ec615a;
    border-radius: 10px;
  }

  .num3 {
    width: 60px;
    height: 75px;
    background: #f2ab46;
    border-radius: 10px;
  }

  .num4 {
    width: 60px;
    height: 75px;
    background: #a6a9af;
    border-radius: 10px;
  }

  .fx-y {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .ft14 {
    font-size: 14px;
  }

  .ft24 {
    font-size: 24px;
  }

  .ft12 {
    font-size: 12px;
  }

  .line,
  .line2 {
    width: 100%;
    height: 1px;
    background-color: #fff;
    margin: 10px auto;
  }

  .line2 {
    margin: 0;
    background-color: #ccc;
    width: 20px;
  }

  .ipt-class {
    width: 400px;
  }

  .color-9 {
    color: #999;
  }
}

.search-list::-webkit-scrollbar-thumb {
  border-radius: 10px;
}

.search-list::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.search-list::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #ccc;
}

.search-list::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 10px;
}
</style>
