<script lang="ts" setup>
  import { navigateTo } from '@tarojs/taro';
  import { useContacts } from 'any-hooks/contacts/useContacts';
  import { useInjector } from 'vue-vulcan';

  const { filterGroups } = useInjector(useContacts);
  const gotoGroupContacts = (id: string) => {
    navigateTo({url: `/pages/group-contacts/index?id=${id}`});
  }
</script>

<template>
  <view class="work-group-list white-box">
    <view class="group-item pd-1" v-for="(item, key) in filterGroups" :key="key" @tap="gotoGroupContacts(item.id)">
      <image class="group-icon" src="../../assets/group3x.png" mode="widthFix" />
      <text class="group-name">{{item.title}}</text>
    </view>
    <data-empty v-if="!filterGroups?.length"></data-empty>
  </view>
</template>

<style lang="less">
  .work-group-list{
    min-height: 300px;
    .group-item{
      display: flex;
      align-items: center;
      margin: 35px 0;
      .group-icon{
        width: 72px;
        height: 62px;
        margin-right: 20px;
      }
      .group-name{
        font-weight: bold;
      }
    }
  }
</style>