<script lang="ts" setup="">
  import { getCurrentInstance } from "@tarojs/taro";
  import { onMounted } from "@vue/runtime-core";
  import { useContacts } from "any-hooks/contacts/useContacts";
  import { useInjector, useState } from "vue-vulcan";
  import ContactItem from '../../components/contact-item.vue';

  const { getContactsByGroup } = useInjector(useContacts);
  const [contactList, setList] = useState([]);

  onMounted( () => {
    const ins = getCurrentInstance();
    const id  = ins.router.params.id;
    const res = getContactsByGroup(id);
    setList(res);
    console.log(res, id)
  })     

</script>
<template>
  <view class="group-contacts">
    <contact-item v-for="(item, key) in contactList" :key="key" :data="item"></contact-item>
    <data-empty v-if="!contactList.length"></data-empty>
  </view>
</template>

<style>
  .group-contacts{
    padding: 15px;
  }
</style>
