<template>
  <view class="pageBox">
    <view class="container _login_page">
      
      <!-- 登陆输入框 -->
      <view class="_login_box">
        <view class="title"> 登录 </view>
        <view class="content">
          <view class="li"> 
            <input :value="account" type="text" placeholder="账号" @input="(e)=>inputAccount(e)" />
          </view>
          <view class="li"> 
            <input :value="password" type="password" placeholder="密码" @input="(e)=>inputPassword(e)" />
          </view>
        </view>
      </view>
      <button class="btn_sign_in" @click="signIn"> 登录 </button>

      <image src="@/common/assets/images/sign/bg.jpg" class="bg" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import Storage from '@/common/utils/storage/index'
import {  bind_wechat_applets, post_login } from '@/common/apis/base'
import { indexCreate } from '@/common/utils/create'
import EXEC from "@/common/utils/exec"

const account:any = ref('')
const password:any = ref('')
const paramsss = <any>ref('')
const signIn = () => {
  let params:any = {}
  
  /*#ifdef MP-WEIXIN*/
  params = {
    user_id: account.value,
	  password: password.value,
    lng: 'cn',
    code: Storage.get('wxCode'),
    userToken: Storage.get('userToken'),
  }
  bind_wechat_applets(params).then((result:any) => {
    indexCreate()
    uni.reLaunch({
      url: '/common/views/pages/home/index',
    })
    uni.showToast({
      title: '登陆成功',
      duration: 2000,
      icon: 'success',
    });
  })
  /*#endif*/
  
  /*#ifdef APP-PLUS*/
  params = {
    user_id: account.value,
	  password: password.value,
    lng: 'cn',
  }
  paramsss.value = params
  post_login(params).then((result:any) => {
    Storage.set('userToken',result['result'].userToken )
    indexCreate()
    uni.reLaunch({
      url: '/common/views/pages/home/index',
    })
    uni.showToast({
      title: '登陆成功',
      duration: 2000,
      icon: 'success',
    });
  })
  /*#endif*/
  
}

const inputAccount = (e:any) => {
  /*#ifdef MP-WEIXIN*/
  account.value = e.target.value
  /*#endif*/
  /*#ifdef APP-PLUS*/
  account.value = e.detail.value
  /*#endif*/
}
const inputPassword = (e:any) => {
  /*#ifdef MP-WEIXIN*/
  password.value = e.target.value
  /*#endif*/
  /*#ifdef APP-PLUS*/
  password.value = e.detail.value
  /*#endif*/
}

onBeforeMount(async() => {
  /*#ifdef MP-WEIXIN*/
  uni.hideHomeButton();
  /*#endif*/
})
onMounted( async() => {
})
onUnmounted(() => {
})
</script>

<style lang="scss">
._login_page{
  background: #3f94d7;
  .bg{
    position: absolute;
    bottom: 0;
    left: 0;  
    right: 0;
    height: 40vh;
    width: 100vw;
    z-index: 1;
  }
  .btn_sign_in{
    position: absolute;
    bottom: 50rpx;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    border-radius: 50px;
  }
  ._login_box{
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) ;
    z-index: 2;
    width: 80%;
    border-radius: 30rpx;
    >.title{
      font-size: 40rpx;
      text-align: center;
      color: #fff;
    }
    >.content{
      >.li{
        margin: 40rpx 0;
        border: 2rpx solid #ddd;
        border-radius: 50rpx;
        background: #fff;
        >input{
          font-size: 32rpx;
          font-weight: bold;
          display: block;
          height: 80rpx;
          line-height: 80rpx;
          padding: 10rpx 40rpx;
          color: #999;
        }
      }
    }
  }
}
</style>
