<script lang="ts" setup> 
  import { useInjector } from 'vue-vulcan'; 
  import { useCallCenter } from 'any-hooks/communication/useCallCenter';  
  import { navigateBack } from '@tarojs/taro';
  import { watch } from '@vue/runtime-core';
import { useMeetingCenter } from 'any-hooks/communication/useMeetingCenter';

  const { target, caller, myCallState, answerCaller, hangup } = useInjector(useCallCenter);
  const { leave } = useInjector(useMeetingCenter)
  
  const onTapHangup = () => {
    myCallState.value == 'callin' ? hangup() : leave();
    navigateBack();
  }

  watch(myCallState, state => {
    if(state === 'idle') {
      setTimeout(navigateBack, 1000);
    };
  })
  
</script>

<template>
<view class="page call-container">
  <view class="call-box caller" v-if="myCallState==='callin'">
    <image class="avatar" :src="caller?.avatar"></image>    
    <text class="tips" >{{caller?.nickname}}向您发起呼叫</text>
  </view>

  <view class="call-box target" v-if="myCallState==='callout'">
    <image class="avatar" :src="target?.avatar"></image>
    <text class="tips">正在呼叫{{target?.nickname}}...</text>
  </view>

  <view class="operators" v-if="myCallState!=='idle'">
    <image v-if="myCallState==='callin'" @tap="answerCaller('Connect')" class="op-icon" src="../../assets/answer3x.png"></image>
    <image @tap="onTapHangup()" class="op-icon" src="../../assets/hangup.png"></image>
  </view>  
</view>
</template>

<style lang="less">
page{
  width: 100%;
  height: 100%;
}
.call-container{
  background:#333;
  width:100%;
  height:100%;
  // background-image: url(https://platserver.anyremote.cn/static/img/small_routine/1.gif);
  background-image: url(https://platserver.anyremote.cn/static/img/small_routine/bg3.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .call-box{
    position: absolute;
    text-align: center;
    top: 30%;
    left:50%;
    transform: translate(-50%, -50%);
    width:100%;
    .avatar{
      width: 160px;
      height: 160px;
      overflow: hidden;
      border-radius: 50%;
      display: block;
      margin: 20px auto;
    }
    .tips{
      color: #fff;
      font-size: 38px;
    }
  }
  .operators{
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 100px;
    display: flex;
    justify-content: center;
    .op-icon{
      width: 120px;
      height: 120px;
      display: block;
      margin: 0 120px;
    }
  }  
}
</style>