<template>
  <Card title="30天内在线人数">
    <a-row :gutter="[10, 10]" v-if="aData.length">
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-for="(item, index) in aData" :key="index">
        <div class="online-item">
          <div class="left-wrap">
            <div class="count">
              <span class="zxnum"> {{ item.zxnum || 0 }}</span>
              <span class="split">/</span>
              <span class="num">{{ item.num || 0 }}</span>
            </div>
            <div class="name">{{ item.name }}</div>
          </div>
          <div class="right-wrap">
            <img src="@/assets/images/shape1.png" alt="" v-if="item.name === '省级生态环境管理部门用户'" />
            <img src="@/assets/images/shape2.png" alt="" v-if="item.name === '省固管中心用户'" />
            <img src="@/assets/images/shape3.png" alt="" v-if="item.name === '市级生态环境管理部门用户'" />
            <img src="@/assets/images/shape4.png" alt="" v-if="item.name === '土地使用权人'" />
            <img src="@/assets/images/shape5.png" alt="" v-if="item.name === '县级生态环境管理部门用户'" />
            <img src="@/assets/images/shape6.png" alt="" v-if="item.name === '评审专家'" />
            <img src="@/assets/images/shape7.png" alt="" v-if="item.name === '自然资源管理部门用户'" />
            <img src="@/assets/images/shape8.png" alt="" v-if="item.name === '系统管理人员'" />
          </div>
        </div>
      </a-col>
    </a-row>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { getIndexCountUser } from '@/api/dashboard/api';
  const aData = ref([]);
  /**
   * 初始化数据
   */
  function init() {
    getIndexCountUser().then((res) => {
      if (res) {
        // 要排序
        let order = [
          '省级生态环境管理部门用户',
          '省固管中心用户',
          '市级生态环境管理部门用户',
          '土地使用权人',
          '县级生态环境管理部门用户',
          '评审专家',
          '自然资源管理部门用户',
          '系统管理人员',
        ];
        let sortedRes = order.map((o) => res.find((r) => r.name === o)).filter(Boolean);
        aData.value = sortedRes;
      }
    });
  }
  onMounted(() => {
    init();
  });
</script>
<style lang="less" scoped>
  :deep(.ant-card-body) {
    padding: 14px 14px 24px 14px;
    display: flex;
    flex-wrap: wrap;
  }
  .online-item {
    padding: 5px 10px 5px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(235, 235, 235, 1);
    border-radius: 6px;
    box-sizing: border-box;
    .left-wrap {
      .count {
        .zxnum {
          color: #3697ff;
          font-size: 26px;
        }
        .split {
          height: 28px;
          line-height: 28px;
          color: #b8b8b8;
          font-size: 26px;
        }
        .num {
          color: #0e2874;
          font-size: 26px;
        }
      }
      .name {
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        color: #0e2874;
      }
    }
  }
</style>
