<template>
	<view>
		<uv-toast ref="toast"></uv-toast>
		<view class="page">
			<uv-row justify="space-between" customStyle="margin-top: 35%" class="form"> 
				<uv-col span="10" offset="1">
					<uv-form labelPosition="left" :model="logininfo" :rules="rules" ref="form" >
						<uv-col span="10" offset="1">{{$t('telno')}}</uv-col>
						<uv-col span="10" offset="1"> 
							<uv-form-item prop="telno" borderBottom>
								<uv-input v-model.trim="logininfo.telno" border="none">
								</uv-input>
							</uv-form-item>
						</uv-col>
						<uv-col span="10" offset="1" customStyle="margin-top: 20px">{{$t('password')}}</uv-col>
						<uv-col span="10" offset="1">
							<uv-form-item  prop="pw1" borderBottom>
								<uv-input v-model.trim="logininfo.pw1" :type="passwordtype1"  border="none">
								</uv-input>
								<template v-slot:right> 
									<uv-icon name="eye-off-outline" color="#2979ff" size="18" v-show="!showpasswod1" @click="setshowpasswod1"></uv-icon>
									<uv-icon name="eye" color="#2979ff" size="18" v-show="showpasswod1" @click="setshowpasswod1"></uv-icon>
								</template>
							</uv-form-item>
						</uv-col>
						
						<uv-col span="10" offset="1" customStyle="margin-top: 20px">{{$t('password_repeat')}}</uv-col>
						<uv-col span="10" offset="1">
							<uv-form-item  prop="pw2" borderBottom>
								<uv-input v-model.trim="logininfo.pw2" :type="passwordtype2"  border="none">
								</uv-input>
								<template v-slot:right> 
									<uv-icon name="eye-off-outline" color="#2979ff" size="18" v-show="!showpasswod2" @click="setshowpasswod2"></uv-icon>
									<uv-icon name="eye" color="#2979ff" size="18" v-show="showpasswod2" @click="setshowpasswod2"></uv-icon>
								</template>
							</uv-form-item>
						</uv-col>
						<uv-col span="10" offset="1">
							<uv-button type="primary" :text="$t('register')" customStyle="margin-top: 20px" @click="submit"></uv-button>
						</uv-col>
						
					</uv-form>
						<uv-col span="10" offset="1">
							<uv-button type="primary" :plain="true" :throttleTime="throttleTime" :text="$t('login')" customStyle="margin-top: 2rem" @click="toregister"></uv-button>
						</uv-col>
				</uv-col>
			</uv-row>
		</view>
	</view>
</template>

<script>
	import {register,login} from "@/common/api/user.js"
	export default {
		data() {
			return {
				throttleTime:1,
				logininfo:{
					telno:'',
					pw1:'',
					pw2:'',
				},
				rules:{
					'telno':[{
						type: 'string',
						required: true,
						message: this.$t('telno_null'),
						trigger: ['blur'],
						
					},{
						pattern: /\d{5,}/,
						message: this.$t('telno_error'),
						trigger: ['blur'],
					}
					],
					'pw1': {
						type: 'string',
						required: true,
						message: this.$t('password_null'),
						trigger: ['blur']
					},
					'pw2':[{
						type: 'string',
						required: true,
						message: this.$t('password_null'),
						trigger: ['blur']
					},{
						validator: (rule, value, callback) => {
							if(value!=this.logininfo.pw1){
								return false
							}
							return true
						},
						message: this.$t("password_repeat_error"),
						trigger: ['blur']
					}] ,
				},
				showpasswod1:false,
				passwordtype1:"password",
				showpasswod2:false,
				passwordtype2:"password"
			}
		},
		methods: {
			submit(){
				var that = this
				this.$refs.form.validate().then(res => {
					let data ={telno:that.logininfo.telno,userpw:that.logininfo.pw1}
					register(data).then(res=>{
						res=res.data
						if(0==res.code){
							that.$refs.toast.show({
								type: 'error',
								message: that.$t("register_error")
							})
						}
						if(200==res.code){
							let data={telno:that.logininfo.telno,pw:that.logininfo.pw1}
							login(data,that)
						}
					})
				}).catch(errors => {
					console.log(errors)
				})
			},
			setshowpasswod1(){
				this.showpasswod1 = !this.showpasswod1
				if(this.showpasswod1){
					this.passwordtype1="text"
				}else{
					this.passwordtype1="password"
				}
			},
			setshowpasswod2(){
				this.showpasswod2 = !this.showpasswod2
				if(this.showpasswod2){
					this.passwordtype2="text"
				}else{
					this.passwordtype2="password"
				}
			},
			tolgoin(){
				uni.navigateTo({
					url: '/pages/login/login'
				});	
			}
		},
		mounted(){
			uni.setNavigationBarTitle({
				title: this.$t('register')
			});
			this.throttleTime = getApp().globalData.throttleTime;
		}
	}
</script>

<style>

</style>
