<template>
  <view class="template-login">
    
    <view class="login">
      <!-- 顶部背景图片-->
      <view class="login-img" >
        <image src="@/static/image/logo.png" mode="widthFix"></image>
      </view>

      <view class="login__wrapper">
        <view class="tn-margin tn-color-gray tn-text-md tn-text-center">
          聚焦产线视觉检测 开启智造数智化
        </view>
        
        <!-- 输入框内容-->
        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
          <!-- 登录 -->
			<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
			  <view class="login__info__item__input__left-icon">
				<view class="tn-icon-phone"></view>
			  </view>
			  <view class="login__info__item__input__content">
				<input maxlength="20" placeholder-class="input-placeholder" v-model="username" placeholder="请输入登录账号" />
			  </view>
			</view>
			
			<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
			  <view class="login__info__item__input__left-icon">
				<view class="tn-icon-lock"></view>
			  </view>
			  <view class="login__info__item__input__content">
				<input :password="!showPassword" placeholder-class="input-placeholder" v-model="password" placeholder="请输入登录密码" />
			  </view>
			  <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
				<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
			  </view>
			</view>
          
          <view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover" :hover-stay-time="150" @click="login">登录</view>
         <!-- <view v-if="currentModeIndex === 0" :class="[{'login__info__item__tips': currentModeIndex === 1}]">
            <view class="tn-flex tn-flex-row-between tn-padding">
              <view class="tn-padding-right" @tap.stop="modeSwitch(1)">账号注册</view>
              <view class="tn-padding-left tn-color-gray">忘记密码</view>
            </view>
          </view> -->
          
        </view>
	  </view>
    </view>
  </view>
</template>

<script>
  import md5 from '@/static/js/md5.js';
  export default {
    data() {
      return {
        // 是否显示密码
        showPassword: false,
		username:"",
		password:"",
      }
    },
    methods: {
		async login(){
			const result= await this.api.request('blade-auth/wx/login',{username:this.username,password:md5(this.password)},'post','application/x-www-form-urlencoded',true)
			this.api.setToken(result.access_token)
			this.api.setUser(result)
			if (getCurrentPages().length == 1 && getCurrentPages()[0].route=="pages/login/login"){
				console.log("无上一页，返回首页");
				uni.reLaunch({
					url: './../index/index',
				})
			}else{
				uni.navigateBack({
					success: function (e) { 
						 var page = getCurrentPages().pop();
						 if (page == undefined || page == null) return;
						 page.onLoad();
					},
					fail: function () {
					uni.reLaunch({
						url: './../index/index',
					})
					}
				})
			}
		},
	}
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  /* 悬浮 */
  /* .login-sussuspension{
    animation: suspension 3s ease-in-out infinite;
  }
  
  @keyframes suspension {
    0%, 100% {
      transform: translate(0 , 0);
    }
    50% {
      transform: translate(0rem , 1rem);
    }
  } */
  
  .login {
    position: relative;
    height: 100%;
    z-index: 1;
	.login-img{
		text-align: center;
		image{
			width: 200rpx;
			height: 200rpx;
			margin-top: 200rpx;
		}
		
	}
    
    /* 背景图片 start */
    &__bg {
      z-index: -1;
      position: fixed;
      
      &--top {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        
        .bg {
          width: 750rpx;
          will-change: transform;
        }
      }
      
      &--bottom {
        bottom: -10rpx;
        left: 0;
        right: 0;
        width: 100%;
        // height: 144px;
        margin-bottom: env(safe-area-inset-bottom);
        
        image {
          width: 750rpx;
          will-change: transform;
        }
      }
    }
    /* 背景图片 end */
    
    /* 内容 start */
    &__wrapper {
      margin-top: 50rpx;
      width: 100%;
    }
    
    /* 切换 start */
    &__mode {
      position: relative;
      margin: 0 auto;
      width: 476rpx;
      height: 77rpx;
      margin-top: 100rpx;
      background-color: rgba(255,255,255,0.6);
      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
      border-radius: 39rpx;
      
      &__item {
        height: 77rpx;
        width: 100%;
        line-height: 77rpx;
        text-align: center;
        font-size: 31rpx;
        color: #080808;
        letter-spacing: 1em;
        text-indent: 1em;
        z-index: 2;
        transition: all 0.4s;
        
        &--active {
          font-weight: bold;
          color: #FFFFFF;
        }
      }
      
      &__slider {
        position: absolute;
        height: inherit;
        width: calc(476rpx / 2);
        border-radius: inherit;
        box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
        z-index: 1;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
    }
    /* 切换 end */
    
    /* 登录注册信息 start */
    &__info {
      margin: 80rpx 30rpx 10rpx 30rpx;
      padding-bottom: 0;
      border-radius: 20rpx;
      
      &__item {
        
        &__input {
          margin-top: 59rpx;
          width: 100%;
          height: 77rpx;
          border: 1rpx solid #E6E6E6;
          border-radius: 39rpx;
          
          &__left-icon {
            width: 10%;
            font-size: 44rpx;
            margin-left: 20rpx;
            color: #838383;
          }
          
          &__content {
            width: 80%;
            padding-left: 10rpx;
            
            &--verify-code {
              width: 56%;
            }
            
            input {
              font-size: 24rpx;
              // letter-spacing: 0.1em;
            }
          }
          
          &__right-icon {
            width: 10%;
            font-size: 44rpx;
            margin-right: 20rpx;
            color: #838383;
          }
          
          &__right-verify-code {
            width: 34%;
            margin-right: 20rpx;
          }
        }
        
        &__button {
          margin-top: 75rpx;
          margin-bottom: 39rpx;
          width: 100%;
          height: 77rpx;
          text-align: center;
          font-size: 31rpx;
          font-weight: bold;
          line-height: 77rpx;
          letter-spacing: 1em;
          text-indent: 1em;
          border-radius: 39rpx;
          box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
        }
        
        &__tips {
          margin: 30rpx 0;
          color: #AAAAAA;
        }
      }
    }
    /* 登录注册信息 end */
    
    /* 登录方式切换 start */
    &__way {
      margin: 0 auto;
      margin-top: 110rpx;
      
      &__item {
        &--icon {
          width: 85rpx;
          height: 85rpx;
          font-size: 80rpx;
          // border-radius: 100rpx;
          margin-bottom: 18rpx;
          position: relative;
          z-index: 1;
          
          // &::after {
          //   content: " ";
          //   position: absolute;
          //   z-index: -1;
          //   width: 100%;
          //   height: 100%;
          //   left: 0;
          //   bottom: 0;
          //   border-radius: inherit;
          //   opacity: 1;
          //   transform: scale(1, 1);
          //   background-size: 100% 100%;
          //   background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
          // }
        }
      }
    }
    /* 登录方式切换 end */
    /* 内容 end */
    
  }
  
  /deep/.input-placeholder {
    font-size: 24rpx;
    color: #838383;
  }
  
</style>
