<script setup>
  import MeetingBar from '../../components/mini-meeting-bar.vue';
  import { navigateTo, reLaunch, showModal } from '@tarojs/taro';
  import { useAuthData } from 'any-hooks/auth/useAuthData';
  import { useLogOut } from 'any-hooks/auth/useLogOut';
  import { useCallCenter } from 'any-hooks/communication/useCallCenter';
  import { useInjector } from 'vue-vulcan';

  const { authData }     = useInjector(useAuthData);
  const { submitLogOut } = useLogOut();
  const onLogOut = () => {
    showModal({
      title: '是否确认退出当前账号?'      
    }).then( res => {
      if(res.confirm) return submitLogOut({login_id: authData.value?.id});
      return null
    }).then(res => {
      res!== null && reLaunch({url: '/pages/login/index'});
    })
  }

  const gotoHelp = () => {
    navigateTo({url: '/pages/help/index'})
  }
</script>
<template>
 <view class="mine page" v-if="authData">
   <view class="profile pd-2 top-bg mine">
    <image class="mine-avatar" :src="authData.avatar"></image>
    <view class="mine-info">
      <view>{{authData.nickname}}</view>
      <view>{{authData.group_name}}</view>
    </view>
    <view class="logout" @tap="onLogOut()">
      切换账号
    </view>
   </view>

   <view class="menus pd-2">
     <view class="menu-item pd-2" @tap="gotoHelp()">
        <text>帮助文档</text>
        <image class="arrow icon" src="../../assets/arrow-right2x.png"></image>
     </view>
   </view>
  
 </view>
 <meeting-bar></meeting-bar>
</template>

<style lang="less">
  .mine{       
    background-color: #f6f6f6;
    .profile{
      // border: 1px solid red;
      padding:140px 25px; 
      padding-top: 200px;
      display: flex;
      align-items: center;
      color: #fff;
      .mine-avatar{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin-right: 20px;
      }
      .mine-info{
        flex: 1;
      }
      .logout{
        color: #2b91e2;
        padding: 15px 30px;
        background-color: #fff;
        border-radius: 8px;
      }
    }
    .menus{
      margin-top: -75px;
      .menu-item{
        background-color: #fff;
        height: 70px;
        line-height: 70px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .arrow.icon{
          width: 15px;
          height: 26px;
        }
      }
    }
  }
</style>