<script setup>
  import { computed, onMounted, watch } from 'vue';
  import { navigateTo, navigateBack, showModal, showToast, hideHomeButton, redirectTo, switchTab } from '@tarojs/taro';
  import { useLogin } from '../../../any-hooks/auth/useLogin';
  import { useInjector, useRequest } from 'vue-vulcan';
  import { useNetSocketStore } from 'any-hooks/communication/useNetSocketStore';
  import { useLogOut } from 'any-hooks/auth/useLogOut';

  const { loginData, submitLogin } = useLogin();
  const { submitLogOut } = useLogOut();
  const { initConnect } = useInjector(useNetSocketStore);
  const allowSubmit = computed(() => !!loginData.login_id && loginData.login_password);
  const [,requestAuthState] = useRequest<{is_signin: '1' | '0'}>('/getUserCallStatus', {auto: false});

  onMounted(() => {
    hideHomeButton();
  })

  const onSubmit = () => {    
    requestAuthState({login_name: loginData.login_id}).then(res => {
      if(res.callState === '1') {
        showToast({title: '当前用户处于通话状态, 无法覆盖登录'});
        return;
      }
      if(res.is_signin === '1') {
        showModal({
          title:'当前账号已在线，是否确认登录?',
          success: e => {
            if(e.confirm){
              submitLogin().then( r => {
                initConnect(r);
                switchTab({url: '/pages/index/index'})
              })            
            }
          }
        })
      } else {
        submitLogin().then( r => {
          initConnect(r);
          switchTab({url: '/pages/index/index'})
        }) 
      }
    })    
  }
</script>

<template>
  <view class="page white-box login-wrapper">
    <view class="titles">
      <!-- <view class="header-title">欢迎使用anyremote</view>
      <text class="sub-title">请输入您的账号密码</text> -->
      <image src="../../assets/logo2@3x.png" mode="widthFix"></image>
    </view>
    <view class="login-box">
      <input class="login-item" placeholder="请输入您的账号" v-model="loginData.login_id">
      <input class="login-item" type="password" placeholder="请输入您的密码" v-model="loginData.login_password">
      <button class="login-btn" @tap="onSubmit()" :disabled="!allowSubmit" :class="{allow: allowSubmit}">登录</button>
    </view>    
  </view>
</template>

<style lang="less">
.login-wrapper{
  padding-top:150px;
}
.titles{
  margin: 60px 0;
  text-align: center;
  image{
    width:55%;
  }
  .header-title{
    font-size: 46px;
    font-weight: bold;
    padding-bottom: 20px;
  }
  .sub-title{
    color: #999;
    color: 28px;
  }
}
.login-box{  
  padding-top: 20px;
  .login-item{
    display: block;
    margin: 40px 30px;
    padding: 15px;
    border: none;
    border-bottom: 1px solid #efefef;
    font-size: small;
  }
  button.login-btn{
    display: block;
    margin: 0 25px;
    border: none;
    padding: 0px 0;
    margin-top: 60px;
    font-size: 32px;
    color: #999;
    background: #4880FF;
    color: #fff;
    // box-shadow: 0 0 5px #4880FF;
    border:none;
    &.allow{
      background: #4880FF;
      color: #fff;
    }
  }
}
</style>