<script lang="ts" setup>
  import { useMeetingCenter } from 'any-hooks/communication/useMeetingCenter';
  import { useInjector, useState } from 'vue-vulcan';
  import StreamPlayer from 'src/components/stream-player.vue';
  import StreamPusher from 'src/components/stream-pusher.vue';
  import { createLivePusherContext, navigateBack, showModal, showToast, switchTab } from '@tarojs/taro';
  import { watch } from '@vue/runtime-core';
  import { useAppInitInfo } from 'src/hooks/common/useAppInitInfo';
  import Invite from './invite.vue';
  import { useCallCenter } from 'any-hooks/communication/useCallCenter';
  import { UserData } from 'any-hooks/types/user';
  // import { useChannelStore } from 'any-hooks/communication/useChannelStore';

  const { target } = useInjector(useCallCenter);  
  // const { currentChannel, isInChannel } = useInjector(useChannelStore);  
  const { streamList, localPushurl, voiceMute, mode, switchLocalMicState, switchVideoOrAudio, leave } = useInjector(useMeetingCenter);  
  const { rect } = useAppInitInfo(); 

  
  /* 监听流的数量，自动退出会议 */
  watch(streamList, (current, last) => {
    if(current.length > last.length) return;
    if(current.length < 1) {
      showToast({title: '当前频道已无其他联系人，即将自动退出...', icon: 'none'});
      setTimeout(() => navigateBack({delta: 2}), 1000);
    }
  })

  const context = createLivePusherContext();

  watch(localPushurl, url => {
    url && context.start();
  })

  /* 用户主动退出会议 */
  const onTapLeave = () => {
    showModal({
      title: '是否退出此次通讯?',
      success: res => {
        if(res.confirm) {
          leave();
          switchTab({url: '/pages/index/index'});          
        } 
      }
    })
  }

  /** 切换摄像头 */
  const switchCamera = () => {    
    context.switchCamera();
  }

  /** 返回上一页 */
  const backToIndex = () => {
    switchTab({url: '/pages/index/index'})
  }

  /** 切换通讯画面 0-n表示最大化指定的远程画面; -1表示最大化本地画面; -2表示取消最大化，所有画面均分显示 */
  const [activeVideo, setActive] = useState(-2);
  const toggleActive = (index: number) => {
    if(activeVideo.value === -2) {
      setActive(index);
    } else {
      setActive(-2);
    }
  }

  /** 邀请联系人功能 */
  const [inviting, setInviting] = useState(false);
  const { callContact } = useInjector(useCallCenter);
  const onInvite = (user: UserData) => {
    callContact(user);
    setInviting(false);
  }
</script>

<template>
  <image class="navi-back" src="../../assets/arrow_left.png" mode="widthFix" :style="{top: rect.top+'px'}" @tap="navigateBack()"></image>
  <invite v-if="inviting" @choose="onInvite($event)" @cancel="setInviting(false)"></invite>
  <view class ="meeting-container page col-page" @tap="setInviting(false)">        
    <!-- <view class="c-info" style="color:#fff">
      {{currentChannel?.channel_id}}
    </view> -->
    <view class="videos">
      <stream-player 
        class="video-item"        
        v-for="(item, key) in streamList" 
        :key="key" 
        :stream="item"
        :class="{active: activeVideo===key, hide: activeVideo!==-2, mini: streamList.length > 5, big: streamList.length < 2}"
        @tap="toggleActive(key)"
      >
      </stream-player>
      <stream-pusher 
        class="video-item"
        v-if="localPushurl" 
        :url="localPushurl" 
        :class="{active: activeVideo===-1, hide: activeVideo!==-2, mini: streamList.length > 5, big: streamList.length < 2}"
        @tap="toggleActive(-1)"
      >
      </stream-pusher>
      
      <view 
        class="waiting video-item" 
        v-if="target?.action === 'none'"
      >
        <text>等待中...</text>
      </view>     
      
      <view class="add-operator" @tap.stop="setInviting(true)">
        <image class="add-icon" src="../../assets/add.png" mode="widthFix"></image>
        <text>添加联系人</text>
      </view>
    </view>

    <view class="operators pd-2">
      <view class="op-item" @tap="backToIndex()">
        <!-- <image class="s-o-icon"  src="../../assets/minimize3x.png" mode="heightFix"></image>  -->
      </view>
      <view class="op-item" @tap="switchCamera()">
        <image class="s-o-icon" src="../../assets/switch-camera3x.png" mode="heightFix"></image>        
      </view>
      <view class="op-item" @tap="onTapLeave()">
        <!-- <image class="x-o-icon" src="../../assets/hang-up-big2x.png"></image>         -->
      </view>
      
      <view class="op-item">
        <image v-if="voiceMute" @tap="switchLocalMicState()" class="x-o-icon" src="../../assets/Microphone-on3x.png"  />
        <image v-else @tap="switchLocalMicState()" class="x-o-icon" src="../../assets/microphone3x.png"/>
        <text>麦克风</text>
      </view>
      <view class="op-item" @tap="onTapLeave()">
        <image class="x-o-icon" src="../../assets/hang-up-big2x.png"></image>   
        <text>挂断</text>     
      </view>
      <view class="op-item" @tap="switchVideoOrAudio()">
        <image v-if="mode === 'video'" class="x-o-icon" src="../../assets/voice3x.png"></image>
        <image v-else class="x-o-icon" src="../../assets/video3x.png"></image>
        <text>{{mode === 'video' ? '语音通话' : '视频通话'}}</text>
      </view>      
      
    </view>
  </view>
  
</template>

<style lang="less">  
  .navi-back{
    width: 20px;
    height: 20px;
    left: 20px;
    position: absolute;
    z-index: 1000;
  }
  .meeting-container{
    background: #333;    
    .videos{      
      flex:1;  
      text-align: center;      
      .video-item{
        position: relative;     
        box-sizing: border-box;
        border: 1px solid #333;
        vertical-align: top;   
        width:50%;
        height: 300px;        
        display: inline-block;
        background: #000;
        color: #fff;
        &.big{
          width: 100%;
          height: 500px;
        }
        &.mini{
          width: 33.3%;
          height: 300px;
        }
        &.waiting{
          line-height: 300px;
        }
        &.active{
          width: 100%;
          height: 800px;
          display: block !important;          
        }
        &.hide{
          display: none;
        }
      }
      .add-operator{        
        width: 100%; 
        color: #fff;       
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px 0;
        .add-icon{
          width: 30px;
          height: 30px;
          margin-right: 20px;
        }
      }
    }
  }
  .operators{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .op-item{
      margin: 20px;
      width: 24%;      
      color: #fff;
      text-align: center;      
      image{
        display: block;
        margin: 0 auto;
      }
      text{
        display: inline-block;
        margin-top: 10px;
        font-size: 26px;
      }
      .x-o-icon{
        width: 120px;
        height: 120px;
      }
      .s-o-icon{        
        height: 36px;
      }
    }
  }
</style>