<script lang="ts" setup>
import MeetingBar from '../../components/mini-meeting-bar.vue';
import { getCurrentInstance, showToast } from '@tarojs/taro';
import { onMounted } from '@vue/runtime-core';
import { useCallCenter } from 'any-hooks/communication/useCallCenter';
import { useContacts } from 'any-hooks/contacts/useContacts';
import { UserData } from 'any-hooks/types/user';
import { useInjector, useState } from 'vue-vulcan';
import { useAppInitInfo } from 'src/hooks/common/useAppInitInfo';

const { getContactById } = useInjector(useContacts);
const { callContact, myCallState }    = useInjector(useCallCenter);
const [currentContact, setContact] = useState<UserData>(null);
const { checkCamearSetting }       = useInjector(useAppInitInfo);

onMounted( () => {
  const ins = getCurrentInstance();
  const id = ins.router.params.id;
  const current = getContactById(id, 'uid');
  setContact(current);
})

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

<template>
  <view class="contact-detail" v-if="currentContact">
    <view class="base-info white-box pd-2">
      <image class="avatar" :src="currentContact.avatar"></image>
      <view class="text-info">
        <view class="nickname">{{currentContact.nickname}}</view>
        <view class="role">{{currentContact.group_name}}</view>
      </view>
    </view>

    <view class="extend-info white-box">
      <view class="info-item pd-2">
        <text class="title">手机号</text>
        <text class="value">{{currentContact.phone}}</text>
      </view>
      <view class="info-item pd-2">
        <text class="title">邮箱</text>
        <text class="value">{{currentContact.email}}</text>
      </view>
    </view>

    <view class="call-btn" @tap="onCall(currentContact)" v-if="currentContact.is_signin==='1'">
      <image class="call-icon" src="../../assets/call-small2x.png"></image>
      &nbsp;&nbsp;
      <text>视频通话</text>
    </view>
  </view>
  <meeting-bar></meeting-bar>
</template>

<style lang="less">
.contact-detail{
  .base-info{
    display: flex;
    align-items: center;
    padding: 45px 25px;
    border-bottom: 2px solid #efefef;   
    .text-info{
      padding-left: 30px;
    }    
  }  

  .call-btn{
    background-color: #2b91e2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 25px 0;
    margin: 15px;
    margin-top: 40px;
    border-radius: 8px;
    .call-icon{
      width: 30px;
      height: 40px;      
    }
  }
}
</style>