<template>
  <section class="nearbyGCS">
    <ai-title title="全部网格员"/>
    <div class="radarPane">
      <div class="radar">
        <div class="indicator"/>
      </div>
      <div class="gcsItem" v-for="(op,i) in userList" :key="i" :style="op.style">
        <i class="dot" :class="{offline:op.offline}"/>
        <span>{{ op.name }}</span>
        <ai-icon icon="iconIM"/>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "nearbyGCS",
  inject: ['root', 'sta'],

  data () {
    return {
      userList: []
    }
  },

  mounted () {
    this.getInfo()
  },

  methods: {
    getInfo () {
      this.root.instance.post('/app/appgirdmemberinfo/queryGirdMemberByBuilding', null, {
        params: {buildingId: this.$route.query.buildingId}
      }).then(res => {
        if (res?.data) {
          this.gcsList(res.data)
        }
      })
    },

    gcsList (data) {
      this.userList = data.map(e => ({
        ...e,
        style: {
          transform: `translate(
        ${Math.round(160 * (Math.random() - 0.5))}px,
        ${Math.round(160 * (Math.random() - 0.5))}px)`}
      }))
    }
  }
}
</script>

<style lang="scss" scoped>
.nearbyGCS {
  .radarPane {
    width: 100%;
    height: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .gcsItem {
      position: absolute;
      width: 92px;
      height: 28px;
      background: #FFFFFF;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      border-radius: 16px;
      font-size: 12px;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3;
      gap: 8px;

      .AiIcon {
        width: 16px;
        height: 16px;
      }

      .dot {
        width: 4px;
        height: 4px;
        background: #30BC77;

        &.offline {
          background: #FF4466;
        }
      }
    }
  }

  .radar {
    width: 320px;
    height: 320px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background-image: url("https://cdn.cunwuyun.cn/buildSta/radarBg.png");

    .indicator {
      position: absolute;
      width: 160px;
      height: 160px;
      top: 0;
      left: 0;
      transform-origin: 100% 100%;
      background: linear-gradient(190deg, rgba(162, 255, 182, 0.5) 0%, rgba(162, 255, 215, 0) 100%);
      border-right: 1px solid #A2FFB6;
      animation: radar 5s linear infinite;
      z-index: 2;
    }
  }
}

@keyframes radar {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
</style>
