<template>
	<view class="login-wrap">
		<view class="top-bg">
		  <view class="wrap-top">
			<view class="switch-zAnde" @click="changeLocale">
				<image :src='iconzh'></image>
				<text>{{locale=='en'?'Cn':'En'}}</text>
			</view>
			<view class="logo-icon">
			  <view class="login-logo">
				<image class="logo" src="/static/images/logo.png"></image>
			  </view>
			  <view>{{$t('捷道国际货运仓管端')}}</view>
			</view>
		  </view>
		</view>
		<view class="bottom-bg">
		  <view class="wrap-bottom">
			<view class="logo-content">
			  <view class="content-title">{{$t('登录')}}</view>
			  <view>
				<uni-easyinput prefixIcon="person" v-model="userName" :placeholder="$t('用户名')" :clearable="false"></uni-easyinput>
			  </view>
			  <view>
				<uni-easyinput type="password" prefixIcon="locked" v-model="passWord" :placeholder="$t('密码')" :clearable="false"></uni-easyinput>
			  </view>
			  <view class="checkbox-wrap">
				<checkbox-group @change="checkboxChange">
				  <checkbox id="chkRem" type="checkbox"  :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#FFCC33" style="transform:scale(0.6);position: relative;top: -2px;"/>
				  {{$t('记住密码')}}
				</checkbox-group>
				<!-- <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />记住密码 -->
			  </view>
			</view>
			<view>
			  <button @click="login">{{$t('登录')}}</button>
			</view>
		  </view>
		</view>
		<uni-popup ref="vepopup" type="center" :mask-click="false">
			<view class="ad-conten">
				<image v-if="!forceUpdate" @click="closeVe" class="ad-bg" src='../../static/images/index_close.png'></image>
				<view class="ad-title">V{{appVersion}}{{$t('新版本更新')}}</view>
				<view class="ad-info">
				    <rich-text :nodes="veData"></rich-text>
				</view>
				<view class="ad-btns">
					<view class="ad-btn" @click="toupdate">
						<view>{{$t('立即更新')}}</view>
					</view>
					<view class="ad-btn" v-if="!forceUpdate" @click="closeVe">
						<view>{{$t('关闭弹窗')}}</view>
					</view>
				</view>
				<view class="progress" v-if="showdownLine">
					<progress :percent="downloadNum" show-info stroke-width="3" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { login } from '@/api/api';
import iconlogo from '../../static/images/logo.png'
import iconzh from '../../static/images/zhicon.png'
import { apiBaseUrl} from '@/util/config.js'
import {getVesionData} from '../../api/system'

export default {
	name: 'login',
	data() {
		return {
			userName: '',
			passWord: '',
			iconlogo:iconlogo,
			iconzh:iconzh,
			rememberPsw: true,
			locale:'',
			appUrl:'',
			veData:'',
			version:'',
			appVersion:'',
			forceUpdate:0,
			showdownLine:false,
			downloadNum:0,//下载百分比
			totalSize:0//下载总量
		};
	},
	onLoad() {
    console.log('login---inload');
		//开发测试
		// if (process.env.NODE_ENV === 'development') {
		// 	this.username = 'wutao';
		// 	this.pass = '123456';
		// }
		//#ifdef APP
		this.getVersion()
		this.getVeData(2)
		//#endif
	},
  mounted() {
    const HBusername = uni.getStorageSync('HBusername');
		const HBpassword = uni.getStorageSync('HBpassword');
    console.log("缓存的账号:"+HBusername)
    console.log("缓存的密码:"+HBpassword)
	this.locale = uni.getStorageSync('locale');
    //有缓存就赋值给文本没有就清空
    if (HBusername && HBpassword) {
      this.userName = HBusername;
      this.passWord = HBpassword;
    } else {
      this.userName = '';
      this.passWord = '';
    }
  },
	methods: {
    checkboxChange(e) {
      // console.log("复选框状态:"+e.detail.value.length);
      // if (e.detail.value.length == 1) {
      //   //获取缓存的账号 赋值
      //   uni.getStorageSync('HBusername',this.userName);
      //   uni.getStorageSync('HBpassword',this.passWord);
      // } else {//销毁
      //   uni.removeStorageSync('HBusername');
      //   uni.removeStorageSync('HBpassword');
      // }
    },
		login() {
      console.log(this.rememberPsw, '-------rememberPsw-------')
		login(this.userName, this.passWord, '').then(res => {
        if (this.rememberPsw) {
          uni.setStorageSync('HBusername', this.userName);
		      uni.setStorageSync('HBpassword', this.passWord);
        } else {
          uni.removeStorageSync('HBusername');
          uni.removeStorageSync('HBpassword');
        }
				uni.redirectTo({
					url: '/pages/index/index'
				});
			});
		},
		changeLocale(){
			if(this.locale == 'zh-Hans'){
				this.locale = 'en'
			}else{
				this.locale = 'zh-Hans'
			}
			uni.setStorageSync('locale',this.locale)
			this.$lang.setLang(this.locale)
			this._i18n.locale = this.locale
		},
    toSignIn(){
      uni.redirectTo({
        url: '/pages/login/reg'
      });
    },
	getVersion(){
		this.version = uni.getStorageSync('appversion');
		this.versionCode = uni.getStorageSync('versionCode');
	
		let split = apiBaseUrl.match(/([a-z0-9-]+)/g)
		const append = split[1] === 'api' ? split[2] : split[1]
		this.version = `${this.version}.${append}`
	},
	toupdate(){
		// ios需要跳转到对应的地址
		if(uni.getSystemInfoSync().osName=='ios'){
			return plus.runtime.openURL(this.appUrl)
		}
		// #ifdef APP-PLUS
		let that = this
		if(that.showdownLine) return
		uni.showLoading({
			title: that.$t("下载中..."),
		})
	
		that.showdownLine = true
		var dtask = plus.downloader.createDownload(
			that.appUrl,
			{
			}, (d, status) => {
				uni.hideLoading()
				that.showdownLine = false
				if (status == 200) {
					that.closeVe()
					console.log("下载成功安装: " + d.filename);
					plus.runtime.install(d.filename)
				} else {
					plus.nativeUI.alert(that.$t("安装失败，请稍候重试"))
				}
			});
			dtask.addEventListener("statechanged", function (download, status) {
				if(that.downloadNum==100){
					uni.hideLoading();
				}
				switch (download.state) {
					case 2:
						break;
					case 3://进度条百分比 totalSize为总量，baifen为当前下载的百分比
						if(that.totalSize==0){
							that.totalSize=parseInt(download.totalSize);
						}
						if(parseInt(download.downloadedSize/that.totalSize*100)!=that.downloadNum){
							that.downloadNum=parseInt(download.downloadedSize/that.totalSize*100);
						}
						break;
					case 4:
						// mui.toast("下载完成");
						uni.hideLoading();
						break;
				}
			});
			dtask.start();
		// #endif
	},
	openVe(){
		this.$refs.vepopup.open()
	},
	closeVe(){
		uni.setStorageSync('isShowVersion', 2)
		this.$refs.vepopup.close()
	},
	/**
	* 获取更新信息
	* @param n 1.点击红字 2.页面onLoad
	*/
	getVeData(n){
		var addType = uni.getSystemInfoSync().osName=='ios'?'pdaIos':'pdaAndroid'
		if(uni.getStorageSync('isShowVersion')==2){
				return
		}
		getVesionData({ appType: addType,versionCode:this.versionCode}).then(res => {
			    console.log(res)
				if(res){
					this.veData = res.desp
					this.appUrl = res.appUrl
					this.appVersion = res.appVersion
					this.forceUpdate = res.forceUpdate
					// if(res.forceUpdate || n === 1){
						this.openVe()
					// }
				}else{
					if(n==1){
						uni.showToast({
							title:this.$t('当前已是最新版本'),
							icon:'none'
						})
					}
				}
		})
	},
	}
};
</script>

<style scoped lang="scss">
/* @import './login.css'; */
.login-wrap {
  // background: #1f45c7;
  // height: 100vh;
  // padding: 24px;
  .bottom-bg {
    background: #3d61e4;
  }
  .top-bg {
    background: #fff;
  }
  .wrap-top {
    height: 40vh;
    padding: 50px 24px;
    background: linear-gradient(to right,#3d61e4,#1038bf);
    border-bottom-right-radius: 50px;
    .switch-zAnde {
      width: 80px;
      padding: 4px 12px;
      border: 1px solid #fff;
      text-align: center;
      color: #fff;
      border-radius: 30px;
      margin-left: auto;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  image{
		  width: 19px;
		  height:17px;
	  }
    }
    .logo-icon {
      display: flex;
      flex-flow: column;
      align-items: center;
      color: #fff;
      font-size: 18px;
      padding: 40px 0;
      .login-logo {
        width: 100px;
        height: 100px;
        background: #fff;
        border-radius: 10px;
        padding: 8px;
        margin-bottom: 16px;
        .logo {
          height: 100%;
        }
      }
    }
  }
  .wrap-bottom {
    height: 60vh;
    padding: 24px;
    border-top-left-radius: 50px;
    background: #fff;
    .logo-content {
      .content-title {
        padding-top: 12px;
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 24px;
      }
      ::v-deep .uni-easyinput__content {
        border: none;
        background: #f2f2f4 !important;
        padding: 4px 0;
      }
      .checkbox-wrap {
        color: #a09da0;
      }
      view {
        margin: 16px 0;
      }
    }
    button {
      color: #fff;
      background: #1038bf;
    }
  }
  .ad-conten{
  	width: 580upx;
  	border-radius: 16upx;
  	background-image: url(../../static/images/index_pbg.png);
  	background-repeat: no-repeat;
  	background-size: 100%;
  	padding-top: 182upx;
  	padding-bottom: 20upx;
  }
  .ad-bg{
  	width: 60upx;
  	height: 60upx;
  	margin-top: -154upx;
  	margin-right: 14upx;
  	float: right;
  }
  .ad-title{
  	width: 100%;
  	text-align: center;
  	font-size: 40upx;
  	font-weight: 600;
  }
  .ad-btns{
  	width: 90%;
  	margin: 20rpx auto;
  	display:flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: space-between;
  }
  .ad-btn{
  	width: 90%;
  	color: #fff;
  	text-align: center;
  	padding: 40upx 0;
  	background-image: url(../../static/images/btn_bg.png);
  	background-size: 100%;
  	background-repeat: no-repeat;
  }
  .ad-btn view{
  	margin-top: -20upx;
  	font-size: 36upx;
  }
  .ad-info{
  	width: 92%;
  	margin: 20upx auto;
  	height: 260upx;
  	overflow: auto;
  }
  .redtext{
  	font-size: 26upx;
  	color: #FF0000;
  	margin-left:12upx;
  }
  .progress{
  	width: 80%;
  	margin: 20upx auto;
  }
}

</style>
