<script lang="ts" setup>
  import { navigateTo } from "@tarojs/taro";
  import { useCallCenter } from "any-hooks/communication/useCallCenter";
  import { useInjector } from "vue-vulcan";

  const { myCallState } = useInjector(useCallCenter);

  const gotoMeetingHome = () => {
    if(myCallState.value === 'calling') {
      navigateTo({url: '/pages/meeting/index'})
    } else {
      navigateTo({url: '/pages/calling/index'})
    }    
  }
</script>

<template>
  <view class="meeting-bar" v-if="myCallState!=='idle'">
    <image @tap="gotoMeetingHome()" class="bar-icon" src="../assets/during-call3x.png" mode="widthFix"></image>
  </view>
</template>

<style lang="less">
  .meeting-bar{
    position: fixed;
    width: 100px;
    height: 100px;
    bottom: 80px;
    right: 5px;
    .bar-icon{
      width: 100px;
      height: 100px;
      box-shadow: 0 0 15px #eee;
    }
  }
</style>
