<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="current==0?i18n.mine.safety.email:i18n.mine.safety.phone"></myNav>

		<view class="padding-w-30">
			<view v-if="current==0" class="width-690 padding-w-32">
				<view class="width-100b height-96 line-height-96">
					<text class="font-30 bold-font">{{i18n.regist.phone}}</text>
				</view>
				<view class="width-100b height-96 radiu-12"
					style="border-bottom: 1px solid rgba(191, 195, 199, 0.2);">
					<input class="width-100b height-96 font-30" type="text" v-model="email"
						:placeholder="i18n.regist.phoneTag" />
				</view>
			</view>
			
			<view v-if="current==1" class="width-690 padding-w-32">
				<view @click="kaiqiChina=true,countryType=true" class="width-100b height-96 flex align-center justify-between" style="border-bottom: 1px solid rgba(191, 195, 199, 0.2);">
					<text class="font-30 bold-font">{{i18n.regist.guoji}}</text>
					<text class="font-30 bold-font">{{seleCountry.label}}</text>
				</view>
			</view>
			<view v-if="current==1" class="width-690 padding-w-32">
				<view class="width-100b height-96 line-height-96">
					<text class="font-30 bold-font">{{i18n.regist.mobile}}</text>
				</view>
				<view class="width-100b height-96 radiu-12 flex align-center" style="border-bottom: 1px solid rgba(191, 195, 199, 0.2);">
					<view v-if="seleCountry.value" class="width-120 height-66 margin-r-20 flex align-center justify-center" style="border: 1rpx solid #3ECEB2;border-radius: 6rpx;">
						<text class="font-30 numbold-font" style="color: #3ECEB2;">+{{seleCountry.value}}</text>
					</view>
					<view v-else class="width-120 margin-r-20" style="border: 1rpx solid #3ECEB2;border-radius: 6rpx;">
						<input class="flex-1 height-66 font-30 numbold-font text-center" type="number" maxlength="6" v-model="quhao"
							:placeholder="i18n.regist.quhao" style="color: #3ECEB2;"/>
					</view>
					<input class="flex-1 height-96 font-30 numbold-font" type="number" v-model="phone"
						:placeholder="i18n.regist.mobileTag" />
				</view>
			</view>
			<view class="width-690 padding-w-32 margin-t-30">
				<view class="width-100b height-96 line-height-96">
					<text class="font-30 bold-font">{{i18n.regist.code}}</text>
				</view>
				<view class="width-100b height-96 radiu-12 flex align-center justify-between"
					style="border-bottom: 1px solid rgba(191, 195, 199, 0.2);">
					<input class="flex-1 height-96 font-30" type="number" v-model="code"
						:placeholder="i18n.regist.codeTag" />
					<text @click="cutTime()" class="font-30 bold-font color-0165EE">{{codeText}}</text>
				</view>
			</view>

			<view class="width-600" style="margin:130rpx auto;">
				<button @click="bind" class="cu-btn loginBtn">{{i18n.regist.bind}}</button>
			</view>
		</view>
		
		<u-picker @columnchange="change" @confirm="selectCountry" v-model="countryType" mode="selector" range-key="name" :range="rangelist"
			:confirm-text="i18n.cycle.confirm" :cancel-text="i18n.cycle.cancel" :kaiqiChina="kaiqiChina"></u-picker>

	</view>
</template>

<script>
	import {
		country
	} from '../../../components/country.js'
	export default {
		data() {
			return {
				current: 0,
				countryType:false,
				quhao:'',
				
				rangelist:country,
				seleCountry:'',
				phone: '',
				email: '',
				code: '',
				kaiqiChina:true,
				flag: true,
				time: 0,
				timeFlag: true,
				
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			codeText() {
				if (this.time > 0) {
					return this.time + " s"
				} else {
					return this.i18n.regist.get
				}
			}
		},
		onLoad(e) {
			this.current = e.type
			this.seleCountry = this.rangelist[0]
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			change(index){
				// console.log(index)
				if(index==1){
					this.kaiqiChina = false
				}else{
					this.kaiqiChina = true
				}
			},
			selectCountry(index){
				console.log(index)
				this.seleCountry = this.rangelist[index]
			},
			bind() {
				if (!this.flag) return
				if(this.current==0){
					if (this.email == '') {
						this.tos(this.i18n.regist.phoneTag)
						return
					}
				}
				if(this.current==1){
					if (this.seleCountry.value == ""&&this.quhao=="") {
						this.tos(this.i18n.regist.quhao1)
						return
					}
					if (this.phone == '') {
						this.tos(this.i18n.regist.mobileTag)
						return
					}
				}
				
				if (this.code == '') {
					this.tos(this.i18n.regist.codeTag)
					return
				}
				uni.showLoading({
					title: this.i18n.regist.loading,
					mask: true
				})
				this.flag = false
				var obj = {}
				var url = {}
				if(this.current==0){
					url = '/my/bind_email'
					obj = {
						email: this.email,
						captcha: this.code,
					}
				}
				if(this.current==1){
					url = '/my/bind_mobile'
					obj = {
						mobile: this.phone,
						m_prefix:this.seleCountry.value?this.seleCountry.value:this.quhao,
						captcha: this.code,
					}
				}
				// console.log(obj)
				this.post(url, obj).then(res => {
					console.log(res)
					uni.hideLoading()
					this.flag = true
					if (res.code == 1) {
						this.tos(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			},
			cutTime() {
				if (!this.timeFlag) return
				if (this.current == 0) {
					if (this.email == "") {
						this.tos(this.i18n.regist.phoneTag)
						return
					}
					uni.showLoading({
						title: this.i18n.regist.loading,
						mask: true
					})
					this.timeFlag = false
					this.post('/ems/send', {
						email: this.email,
						event: "changeemail",
					}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							this.tos(res.msg)
							this.time = 120
							var that = this
							let timeName = setInterval(() => {
								if (that.time > 0) {
									that.time--
								} else {
									that.time = 0
									that.timeFlag = true
									clearInterval(timeName)
								}
							}, 1000)
						} else {
							this.timeFlag = true
						}
					})
				}
				if (this.current == 1) {
					if (this.seleCountry.value == ""&&this.quhao=="") {
						this.tos(this.i18n.regist.quhao1)
						return
					}
					if (this.phone == "") {
						this.tos(this.i18n.regist.mobileTag)
						return
					}
					uni.showLoading({
						title: this.i18n.regist.loading,
						mask: true
					})
					this.timeFlag = false
					this.post('/sms/send', {
						mobile: this.phone,
						m_prefix:this.seleCountry.value?this.seleCountry.value:this.quhao,
						event: "changemobile",
					}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							this.tos(res.msg)
							this.time = 60
							var that = this
							let timeName = setInterval(() => {
								if (that.time > 0) {
									that.time--
								} else {
									that.time = 0
									that.timeFlag = true
									clearInterval(timeName)
								}
							}, 1000)
						} else {
							this.timeFlag = true
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.loginBtn {
		width: 600rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%) !important;
		border-radius: 12rpx;
		line-height: 96rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		position: absolute;
		bottom: 5%;
		left: 50%;
		margin-left: -300rpx;
	}
</style>
