<template>
  <view>
    <cu-custom bgImage="/static/bg.png" :isBack="false">
      <template v-slot:content>
        群组
      </template>
      <template v-slot:right>
        <text class="cuIcon cuIcon-add" @tap="newGroup"></text>
      </template>
    </cu-custom>
    <index-bar :indexMap="groupIndexMap" :bottom="true" class="tab-bar-mar">
      <view v-for="(item,key) in groupIndexMap.keys()" :key="key">
        <view :class="'indexItem-' + item" :id="'indexes-' + item" :data-index="item">
          <view class="padding">{{ item }}</view>
          <view class="cu-list menu-avatar no-padding">
            <view class="cu-item" v-for="(group) in groupIndexMap.get(item)" :key="group.id"
                  @tap.stop="showGroup(group.id)">
              <vim-avatar :img="group.avatar" :name="group.name" />
              <view class="content">
                <view class="text-grey">{{ group.name }}</view>
                <view class="text-gray text-sm">
                  {{ group.name }}
                </view>
              </view>
              <view class="action">
                <view class="cu-tag round bg-red sm" v-if="waitCheckMap.get(group.id)">{{ waitCheckMap.get(group.id) }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </index-bar>
  </view>
</template>

<script setup lang="ts">
import {getCurrentInstance, ref} from "vue";
import {useGroupStore} from "@/store/groupStore";
import CuCustom from '@/colorui/components/cu-custom.vue'
import IndexBar from '@/components/IndexBar.vue'
import {storeToRefs} from "pinia";
import VimAvatar from "@/components/VimAvatar.vue";

const groupStore = useGroupStore();
const {proxy} = getCurrentInstance();
const hidden = ref(true);


const loadGroups = () => {
  groupStore.loadGroupList();
  groupStore.loadWaitCheckList();
}

const newGroup = () => {
  uni.navigateTo({
    url: '/pages/group/edit'
  })
}

const showGroup = (id: string) => {
  uni.navigateTo({
    url: '/pages/group/group?id=' + id
  })
}

loadGroups();

const {waitCheckMap, groupIndexMap} = storeToRefs(groupStore);
</script>

<style>

</style>
