
<script lang="ts" setup>
  import { navigateTo, showToast } from "@tarojs/taro";
  import { defineProps } from "@vue/runtime-core";
  import { useCallCenter } from "any-hooks/communication/useCallCenter";
  import { UserData } from "any-hooks/types/user";
  import { useAppInitInfo } from "src/hooks/common/useAppInitInfo";
  import { useInjector } from "vue-vulcan";

  const {data} = defineProps<{data: UserData}>();
  const { callContact, myCallState } = useInjector(useCallCenter);
  const { checkCamearSetting } = useInjector(useAppInitInfo);

  const gotoDetail = (id: string) => {
    navigateTo({url: '/pages/contact-detail/index?id='+ id});
  }

  const onTapCall = (data: UserData) => {
    if(myCallState.value !== 'idle') {
      showToast({title: '您当前已在通话中，无法发起呼叫', icon: 'none'});
    } else {
      checkCamearSetting().then( r => {
        r ? callContact(data) : showToast({title: '您未授权摄像头权限，请在设置中打开摄像头授权', icon: 'none'});
      })
    }
  }
</script>

<template>
  <view class="contact-item" @tap="gotoDetail(data.id)">
    <image class="avatar" :src="data.avatar" />
    <view class="info">
      <view>{{data.nickname}}</view>
      <text>{{data.group_name}}</text>
    </view>
    <image v-if="data.is_signin === '1'" @tap.stop="onTapCall(data)" class="call" src="../assets/call3x.png" mode="widthFix"/>
    <image v-else class="call" src="../assets/call-no3x.png" mode="widthFix"/>
  </view>
</template>

<style lang="less">
  .contact-item{
    margin-bottom: 30px;
    // padding: 30px 0;
    border-bottom: 1px solid #f8f8f8;
    display: flex;
    align-items: center;
    .avatar{
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow:hidden;
    }
    .info{
      flex: 1;
      padding: 0 20px;
    }
    .call{
      width: 65px;
      height: 65px;
    }
  }
</style>