<script lang="ts" setup>  
  import { useAuthData } from "any-hooks/auth/useAuthData";
import { useCallCenter } from "any-hooks/communication/useCallCenter";
  import { useContacts } from "any-hooks/contacts/useContacts";
  import { UserData } from "any-hooks/types/user";
  import { useAppInitInfo } from "src/hooks/common/useAppInitInfo";
  import { defineEmit, reactive } from "vue";
  import { useInjector } from "vue-vulcan";

  const { topDistance } = useAppInitInfo();

  const {authData} = useInjector(useAuthData);
  const { caller, target } = useInjector(useCallCenter)

  /* 获取在线且空闲的联系人 */
  const { freeContacts, freeList,  } = useInjector(useContacts);  

  const emit = defineEmit();
  const onChoose = (user: UserData) => {
    emit('choose', user);
  }
  const cancelChoose = () => {
    emit('cancel');
  }

  // 联系人折叠隐藏功能
  const hideConfig = reactive({});
  const toggleHideByIndex = (index: number) => {
    hideConfig[index] = !hideConfig[index]
  }
</script>

<template>
  <scroll-view :scrollY="true" class="invite-container page" :style="{top: topDistance+'px'}" >      
    <view class="contact-role-group" v-for="(group, key, index) in freeContacts" :key="index">
      <view class="role-name pd-2" :class="{hide: hideConfig[index]}" @tap="toggleHideByIndex(index)">{{key}}</view>
      <view class="white-box" :style="{display: hideConfig[index] ? 'none' : 'block'}">        
        <view v-for="(item, i) in group" :key="i" >
          <view class="contact-item" v-if="![authData.id, caller?.id, target?.id ].includes(item?.id)">
            <image class="avatar" :src="item.avatar" />
            <view class="info">
              <view>{{item.nickname}}</view>
              <text style="color:#999">{{item.group_name}}</text>              
            </view>
            <view class="call invite-btn" @tap.stop="onChoose(item)">邀请</view> 
          </view>                   
        </view>
      </view>      
    </view>
    <data-empty v-if="!freeList?.length"></data-empty>
  </scroll-view>
</template>

<style lang="less">
  .invite-container{
    position: absolute;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 1000;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; 
    z-index: 10000;
    .contact-role-group{      
      background-color: #fff;
      .role-name{
        // background-color: #f5f5f5;
        position: relative;
        padding-left: 60px;
        &.hide::before{
          transform: rotate(-90deg);
        }
        &::before{
          content: '';
          width: 0; 
          height: 0;
          position: absolute;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 16px solid #aaa;
          left:25px;
          top:37px;
        }
      }
               
      .contact-item{
        margin-bottom: 65px;        
        display: flex;
        align-items: center;
        padding: 15px 0;
        &:last-child{
          margin-bottom: 15px;
        }
        .avatar{
          width: 80px;
          height: 80px;
          border-radius: 50%;
          overflow:hidden;
        }
        .info{
          flex: 1;
          padding: 0 20px;
        }
        .invite-btn{
          display: inline-block;
          background: #2b91e2;
          color: #fff;
          padding: 10px 25px;
          border-radius: 5px;
        } 
      }                 
    }
    
    .contacts{
      display: flex;      
      padding: 0 30px;
      flex-wrap: wrap;
      .contact-item{
        color: #fff;
        margin: 0 15px;
        width: 175px;
        text-align: center;
        .avatar{
          width: 80px;
          height: 80px;
        }
      }
    }
  }
</style>