(function(v,w,d,q,_self){
q(function(q){
class Login{
	constructor(...params) {
		try{
			this.pageData = pageData
		}catch(e){
			this.pageData = {}
		}
		this.translate = this.pageData.translate ? this.pageData.translate : {}
		this.lang = this.pageData.lang ? this.pageData.lang : ''
		this.name = this.pageData.name ? this.pageData.name : ''
		this.link = this.pageData.link ? this.pageData.link : []
		this.forgoturl = this.pageData.forgoturl ? this.pageData.forgoturl : []
		this.ordersList = this.pageData.ordersList ? this.pageData.ordersList : []
		this.countryList = this.pageData.countryList ? this.pageData.countryList : []
		this.industryList = this.pageData.industryList ? this.pageData.industryList : []
		this.api = this.pageData.api ? this.pageData.api : ''
		this.email = this.pageData.email ? this.pageData.email : ''
		this.loading = false
		this.bigPage = this.pageData.bigPage ? true : false
		this.googleRecaptcheClientKey = this.pageData.gc_client_key ? this.pageData.gc_client_key : ''
	    return this.initApp()
	}
	initApp(){
		_self = this
		this.registeredApp()
		this.app = new v({el : "#app",})
		return false
	}
	registeredApp(){
		this.registered()
		v.component("App",{
			template:`
			<div class="container-fluid">
				<div class="row">
					<div class="col-xs-12 login-box-parent">
						<div class="login-box" v-if="!loading">
							<Login v-if="name == 'login'" :ref="name" />
							<LoginManage v-if="name == 'login-manage'" :ref="name" />
							<LoginAuth v-if="name == 'login-auth'" :ref="name" />
							<LoginQRcode v-if="name == 'login-qrcode'" :ref="name" />
							<Signup v-if="name == 'signup'" :ref="name" />
							<ForgotPassword v-if="name == 'forgot-password'" :ref="name" />
							<SentEmail v-if="name == 'sent-email'" :ref="name" />
							<SentPassword v-if="name == 'sent-password'" :ref="name" />
							<SignupInformation v-if="name == 'signup-information'" :ref="name" />
							<ChangePassword v-if="name == 'change-password'" :ref="name" />
							<SentEmailCode v-if="name == 'check-verify-code'" :ref="name" />
							<SetAccountRole v-if="name == 'set-account-role'" :ref="name" />
							<WriteRoleInfo v-if="name == 'write-role-info'" :ref="name" />
							<ThirdAuth v-if="name == 'third-auth'" :ref="name" />
						</div>
						<div class="login-loading" v-else>
							<svg style="height:44px;width:44px" view-box="0 0 44 44" role="status"><path d="M15.542 1.487A21.507 21.507 0 0 0 .5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 0 0-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 1 0-.9-2.863z"></path></svg>
						</div>
					</div>
				</div>
			</div>
			`,
			data(){
				return {
					name : _self.name,
					loading : false,
					bigPage : _self.bigPage,
				}
			},
			mounted(){
				w.addEventListener('keydown',this.keyDown);
			},
			methods:{
				keyDown(e){
					if(e.keyCode != 13) return false
					if(!this.$refs[this.name]) return false
					if(!this.$refs[this.name].handleSubmit) return false
					return this.$refs[this.name].handleSubmit()
				},
				showLoading(a){
					this.loading = a
				},
			}
		})
	}
	registered(){
		this.registeredLogo();
		this.registeredLogoV1();
		this.registeredInputStyle();
		this.registeredSeleteStyle();
		this.registeredButtonStyle();
		this.registeredLinkList();
		this.registeredVerifyCodeInputBtnStyle();
		this.registeredNameInputStyle();
		this.registeredRoleTableTitle();
		switch(_self.name)
		{
			case 'login': 
				this.registeredLogin();
				break;
			case 'login-manage': 
				this.registeredLoginManage();
				break;
			case 'login-auth': 
				this.registeredLoginAuth();
				break;
			case 'login-qrcode':
				this.registeredLoginQRcode();
				break;
			case 'signup':
				this.registeredSignup();
				break;
			case 'forgot-password':
				this.registeredForgotPassword();
				break;
			case 'sent-email':
				this.registeredSentEmail();
				break;
			case 'sent-password':
				this.registeredSentPassword();
				break;
			case 'signup-information':
				this.registeredSignupInformation();
				break;
			case 'change-password':
				this.registeredChangePassword();
				break;
			case 'check-verify-code':
				this.registeredSentEmailCode();
				break;
			case 'set-account-role':
				this.registeredSetAccountRole();
				break;
			case 'write-role-info':
				this.registeredWriteRoleInfo();
				break;
			case 'third-auth':
				this.registeredThirdAuth();
				break;
			default : break;
		}
	}
	registeredLogo(){
		v.component("Logo",{
			template:`
			<div>
				<div class="col-xs-12 center-align login-box-logo p-0">
					<div class="logo"></div>
				</div>
				<div class="col-xs-12 p-0 log-box-introduce" v-if="introduce">
					<span class="introduce-top-title">${_self.translate.t6}</span>
					<div class="introduce-line"></div>
					<span class="introduce-content">${_self.translate.t61}</span>
				</div>
				<div class="col-xs-12 p-0 center-align log-box-shopify" v-if="shopify">
					<a v-if="typeName" href="//affiliateapi.channelwill.com/share?utm_source=trackingmore-web&utm_medium=signup&utm_campaign=default&utm_content=15F31DM17A7">
						<span class="log-box-shopify-icon"></span>
						<span>${_self.translate.t2}</span>
					</a>
					<a v-else href="//apps.shopify.com/trackingmore?surface_detail=trackingmore_signup">
						<span class="log-box-shopify-icon"></span>
						<span>${_self.translate.t2}</span>
					</a>
				</div>
				<div v-if="line" class="col-xs-12 p-0 log-box-line center-align"></div>
				<div class="col-xs-12 p-0" v-if="email">
					<i v-if="isShowback" class="back-btn" @click="previousPage"></i>
					<span class="test-email">{{email}}</span>
				</div>
				<span v-if="explain" class="p-test">{{ explain }}</span>
			</div>
			`,
			props:{
				explain : String,
				shopify : Boolean,
				introduce : Boolean,
				email: String,
				line: Boolean,
				isShowback: {
					type: Boolean,
					default: false
				},
				typeName: Boolean
			},
			methods: {
				previousPage() {
					history.go(-1)
				}
			}
		})
	}
	registeredLogoV1(){
		v.component("LogoV1",{
			template:`
			<div>
				<div class="col-xs-12 center-align login-box-logo p-0">
					<div class="logo"></div>
				</div>
				<span v-if="explain" class="col-xs-12 p-0" style="font-size: 16px;font-weight: 700;margin: 16px 0 8px;">{{ explain }}</span>
				<div class="col-xs-12 p-0 log-box-introduce" v-if="introduce">
					<span class="introduce-top-title">${_self.translate.t6}</span>
					<div class="introduce-line"></div>
					<span class="introduce-content">${_self.translate.t61}</span>
				</div>
				<div class="col-xs-12 p-0 center-align log-box-shopify" v-if="google">
					<a @click="googleAuth">
						<span class="log-box-google-icon"></span>
						<span>${_self.translate.t3}</span>
					</a>
				</div>
				<div class="col-xs-12 p-0 center-align log-box-shopify" v-if="shopify">
					<a v-if="typeName" href="//affiliateapi.channelwill.com/share?utm_source=trackingmore-web&utm_medium=signup&utm_campaign=default&utm_content=15F31DM17A7">
						<span class="log-box-shopify-icon"></span>
						<span>${_self.translate.t2}</span>
					</a>
					<a v-else href="//apps.shopify.com/trackingmore?surface_detail=trackingmore_signup">
						<span class="log-box-shopify-icon"></span>
						<span>${_self.translate.t2}</span>
					</a>
				</div>
				<div v-if="line" class="col-xs-12 p-0 log-box-line center-align"></div>
				<div class="col-xs-12 p-0" v-if="email">
					<i v-if="isShowback" class="back-btn" @click="previousPage"></i>
					<span class="test-email">{{email}}</span>
				</div>
			</div>
			`,
			props:{
				explain : String,
				shopify : Boolean,
				introduce : Boolean,
				email: String,
				line: Boolean,
				isShowback: {
					type: Boolean,
					default: false
				},
				typeName: Boolean,
				google: Boolean,
			},
			methods: {
				previousPage() {
					history.go(-1)
				},
				googleAuth(){
					if (_self.translate.google_auth) {
						window.google.accounts.oauth2.initCodeClient(
							JSON.parse(_self.translate.google_auth)
						).requestCode();
					}
				},
			}
		})
	}
	registeredInputStyle(){
		v.component("InputStyle",{
			template:`
				<div class="col-xs-12 p-0 log-box-input">
					<span :class=" error ? 'log-box-input-error' : ''">
						<input :type="inputType" :name="name" :placeholder="placeholder" :autocomplete="autocomplete" v-model="inputValue" :disabled="disabled" @blur="inputBlur" @focus="focusFunc"/>
						<span class="input-error-message" v-if="error && name !== 'newPassword'">{{ error }}</span>
						<span :class="inputType == 'password' ? 'input-hidden-password' : 'input-show-password'" v-if="showPass" @click="changeType"></span>
						<div class="pwdrolelist" v-if="name == 'newPassword' && roleShow" >
							<div class="pwdrole" :role="role1">
								<i class="pwdIcon"></i>
								<div class="test">${_self.translate.t1123?_self.translate.t1123:'Contains 8 - 20 characters'}</div>
							</div>
							<div class="pwdrole" :role="role2">
								<i class="pwdIcon"></i>
								<div class="test">${_self.translate.t1122?_self.translate.t1122:'Includes numbers, uppercase and lowercase letters'}</div>
							</div>
						</div>
					</span>
					<div v-if="error && errorName" :class="errorName === 'login-manage' ? 'col-xs-12 p-0 ForgotPassword' : '' "></div>
				</div>
			`,
			props : {
				type : {
					type : String,
					default : 'text',
				},
				placeholder : String,
				name : {
					type : String,
					default : '',
				},
				showPass : {
					type : Boolean,
					default : false,
				},
				disabled : {
					type : Boolean,
					default : false,
				},
				value : {
					type : String | Number,
					default : '',
				},
				optional : {
					type : Boolean,
					default : false,
				},
				autocomplete : {
					type : String,
					default : 'on',
				},
			},
			data(){
				return {
					error : null,
					errorName : _self.translate.name,
					inputValue : this.value,
					inputType : this.type,
					roleShow: false,
					role1: 2,
					role2: 2
				}
			},
			methods:{
				focusFunc() {
					if(this.name === 'newPassword') this.roleShow = true
				},
				showError(message){
					this.error = message
				},
				changeType(){
					this.inputType = this.inputType == 'password' ? 'text' : 'password'
				},
				inputBlur(){
					if(this.name != 'password') this.inputValue = this.inputValue.trim()
					return this.checkValue(this.inputValue,false)
				},
				checkValue(value,bool){
					if(!value) return this.showError(null)
					switch(this.name){
						case 'email' :
							if(this.checkEmailFormat(value)) return this.showError(null)
							return bool ? false : this.showError(_self.translate.t111)
							break
						case 'password' : 
							if(this.checkPasswordFormat(value)) return this.showError(null)
							return bool ? false : this.showError(_self.translate.t112)
							break
						case 'username' : 
							if(this.checkUsernameFormat(value)) return this.showError(null)
							return bool ? false : this.showError(_self.translate.t115)
							break
						case 'company' : 
							if(this.checkCompanyFormat(value)) return this.showError(null)
							return bool ? false : this.showError(_self.translate.t111)
							break
						case 'website' : 
							if(this.checkWebsiteFormat(value)) return this.showError(null)
							return bool ? false : this.showError(_self.translate.t112)
							break
						case 'firstname' :
							if(this.checkFirstnameFormat(value)) return this.showError(null)
							return bool ? false : this.showError(_self.translate.t117)
							break
						case 'lastname' :
							if(this.checkLastnameFormat(value)) return this.showError(null)
							return bool ? false : this.showError(_self.translate.t118)
							break
						case 'newPassword' :
							this.checkNewPassword(value)
					}
				},
				checkPasswordFormat(password){
					if (_self.translate.name1 || _self.pageData.isManage) {
						return password.length >= 16 && password.length <= 20
					} else {
						return password.length >= 6 && password.length <= 20
					}
				},
				checkUsernameFormat(username){
					return username.length >= 3 && username.length <= 100
				},
				checkCompanyFormat(company){
					return company.length >= 3 && company.length <= 255
				},
				checkWebsiteFormat(website){
					if(this.optional && !website) return true
					return /[0-9a-z-_]+\.[0-9a-z-_]+/i.test(website)
				},
				checkEmailFormat(email){
					let patternEmail = new RegExp("(^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$)")
					let forbidEmail = /nwytg\.net$/i
					if(forbidEmail.test(email)) return false
					if(patternEmail.test(email)) return true
					return false
				},
				checkFirstnameFormat(username){
					return username.length >= 1 && username.length <= 32
				},
				checkLastnameFormat(username){
					return username.length >= 1 && username.length <= 32
				},
				checkNewPassword(pwd){
					// this.error = false
					let reg2 = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/
					if (_self.translate.name1) {
						this.role1 = pwd.length > 15 ? 1 : 2
					}else{
						this.role1 = pwd.length > 7 && pwd.length < 21 ? 1 : 2
					}
					this.role2 = reg2.test(pwd) ? 1 : 2
					this.error = (this.role1 === 2 || this.role2 === 2)
				},
				cCheckNewPassword(pwd){
					let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}$/
					return reg.test(pwd)
				}
			},
			watch:{
				inputValue(value,oldValue){
					this.checkValue(value,true)
					this.$emit('changeValue', value)
					if(this.$listeners['change']) return this.$emit('change', value, oldValue)
					return false;
				}
			},
			model:{
				prop: 'value',
				event: 'changeValue',
			}
		})
	}
	registeredButtonStyle()
	{
		v.component("ButtonStyle",{
			template:`
			<div class="col-xs-12 p-0 log-box-button">
				<button @click="handleSubmit" :class="loading ? 'button-loading' : ''" :disabled="loading">
					<span v-if="!loading">{{ text }}</span>
					<svg v-else class="button-loading-icon" style="height:20px;width:20px" view-box="0 0 20 20" role="status"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z"></path></svg>
				</button>
			</div>
			`,
			data(){
				return {
					loading : false,
					success : '',
				}
			},
			props:{
				text : String,
			},
			methods:{
				handleSubmit(e){
					if(this.$listeners["click"]) this.$emit("click",e)
					return false
				}
			}
		})
	}
	registeredSeleteStyle()
	{
		v.component("SeleteStyle",{
			template:`
			<div class="col-xs-12 p-0 log-box-input log-box-select" v-if="option.length > 0">
				<span :class=" error ? 'log-box-input-error' : ''" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<input type="text" :name="name" :placeholder="placeholder" readonly="readonly" :value="inputValue" />
					<span class="input-error-message" v-if="error">{{ error }}</span>
					<span class="caret input-icon-right"></span>
				</span>
				<ul class="dropdown-menu">
					<li v-for="(value,key) in option" :key="key"><a href="javascript:;" @click="select(value)">{{ value.name }}</a></li>
				</ul>
			</div>
			`,
			data(){
				return {
					error : null,
					inputValue : '',
				}
			},
			props:{
				option : {
					type : Array,
					default : [],
				},
				name : {
					type : String,
					default : '',
				},
				value : {
					type : String | Number,
					default : 0,
				},
				placeholder : String,
			},
			methods:{
				showError(message){
					this.error = message
				},
				select(value){
					if(this.error) this.error = null
					this.inputValue = value.name ? value.name : ''
					if(value.value){
						this.$emit('changeValue', value.value)
						if(this.$listeners['change']) return this.$emit('change', value.value)
					}
				}
			},
			model:{
				prop: 'value',
				event: 'changeValue',
			}
		})
	}
	registeredLinkList()
	{
		v.component("LinkList",{
			template:`
			<div class="col-xs-12 p-0 center-align log-box-link" v-if="link.length > 0">
				<ul>
					<li v-for="(value,k) in link" :key="k">
						<a :href="value.href" v-if="value.href">{{ value.value ? value.value : '' }}</a>
						<span v-else v-html="value.value ? value.value : ''"></span>
					</li>
				</ul>
			</div>
			`,
			props:{
				link : {
					type : Array,
					default : [],
				}
			}
		})
	}
	registeredSignup(){
		v.component("Signup",{
			template:`
			<div class="login-box-content">
				<LogoV1 :shopify="true" :line="true" explain="${_self.translate.t1}" :typeName="true" :google="true"/>
				<div style="display: flex;column-gap:8px" class="col-xs-12 p-0">
					<InputStyle ref="firstname" name="firstname" placeholder="${_self.translate.t71}" v-model="firstname" autocomplete="off" />
					<InputStyle ref="lastname" name="lastname" placeholder="${_self.translate.t72}" v-model="lastname" autocomplete="off" />
				</div>
				<InputStyle ref="email" name="email" placeholder="${_self.translate.t31}" v-model="email" autocomplete="off" />
				<InputStyle ref="newPassword" type="password" name="newPassword" placeholder="${_self.translate.t41}" :showPass="true" autocomplete="new-password" v-model="password" />
				<ButtonStyle ref="button" text="${_self.translate.t5}" @click="handleSubmit" />
				<div :class="'col-xs-12 p-0 center-align error-message-style' + (errorMessage ? ' log-box-error-message' : '')">
					<span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>
				</div>
				<div class="col-xs-12 p-0 center-align" style="margin-top: 16px;margin-bottom: 4px">
					<span>${_self.translate.clause}</span>
				</div>
				<div v-for="(value,k) in link" :key="k" class="col-xs-12 p-0 center-align">
					<a :href="value.href" v-if="value.href">{{ value.value ? value.value : '' }}</a>
					<span v-else v-html="value.value ? value.value : ''"></span>
				</div>
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					link : _self.link,
					email : _self.email,
					// username : '',
					password : '',
					firstname : '',
					lastname : '',
					errorMessage : '',
				}
			},
			methods:{
				showError(message){
					this.errorMessage = message
				},
				handleSubmit(e){
					this.errorMessage = ''
					if(e) e.stopPropagation()
					if(!this.firstname) return this.$refs.firstname.showError(_self.translate.t113)
					if(!this.$refs.firstname.checkFirstnameFormat(this.firstname)) return this.$refs.firstname.showError(_self.translate.t119)
					if(!this.lastname) return this.$refs.lastname.showError(_self.translate.t113)
					if(!this.$refs.lastname.checkLastnameFormat(this.lastname)) return this.$refs.lastname.showError(_self.translate.t119)
					if(!this.email) return this.$refs.email.showError(_self.translate.t113)
					if(!this.$refs.email.checkEmailFormat(this.email)) return this.$refs.email.showError(_self.translate.t111)
					if(!this.password) return this.$refs.newPassword.error = true
					if(!this.$refs.newPassword.cCheckNewPassword(this.password)) return this.$refs.newPassword.error = true
					this.$refs.button.loading = true
					let _that = this
					
					grecaptcha.ready(function() {
						grecaptcha.execute(_self.googleRecaptcheClientKey, {action: 'submit'}).then(function(token) {
							_self.sendRequest({
								type : _self.name,
								email : _that.email,
								password : _that.password,
								firstname : _that.firstname,
								lastname : _that.lastname,
								// username : this.username,
								token: token,
							},_that.handleResponse)
						});
					});
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			},
		})
	}
	registeredLogin(){
		v.component("Login",{
			template:`
			<div class="login-box-content">
				<LogoV1 :shopify="true" :line="line" explain="${_self.translate.t1}" :google="true"/>
				<InputStyle ref="email" name="email" placeholder="${_self.translate.t31}" v-model="email" />
				<InputStyle style="margin-bottom: 0" ref="password" type="password" name="password" placeholder="${_self.translate.t41}" :showPass="true" v-model="password" />
				<div class="col-xs-12 p-0 ForgotPassword">
					<a style="text-decoration: none" href="${_self.forgoturl.url}">${_self.forgoturl.name}</a>
				</div>
				<ButtonStyle ref="button" text="${_self.translate.t5}" @click="handleSubmit" />
				<div :class="'col-xs-12 p-0 center-align error-message-style' + (errorMessage ? ' log-box-error-message' : '')">
					<span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>
				</div>
				<div class="col-xs-12 p-0 center-align" style="margin-top: 16px;margin-bottom: 4px">
					<span>${_self.translate.clause}</span>
				</div>
				<div v-for="(value,k) in link" :key="k" class="col-xs-12 p-0 center-align">
					<a :href="value.href" v-if="value.href">{{ value.value ? value.value : '' }}</a>
					<span v-else v-html="value.value ? value.value : ''"></span>
				</div>
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					link : _self.link,
					errorMessage : '',
					email : _self.email,
					password : '',
					loading : false,
					line: true
				}
			},
			methods:{
				showError(message){
					this.errorMessage = message
				},
				handleSubmit(e){
					this.errorMessage = ''
					if(e) e.stopPropagation()
					if(!this.email) return this.$refs.email.showError(_self.translate.t113)
					if(!this.$refs.email.checkEmailFormat(this.email)) return this.$refs.email.showError(_self.translate.t111)
					if(!this.password) return this.$refs.password.showError(_self.translate.t113)
					if(!this.$refs.password.checkPasswordFormat(this.password)) return this.$refs.password.showError(_self.translate.t112)
					this.$refs.button.loading = true

					_self.sendRequest({
						type : _self.name,
						email : this.email,
						password : this.password,
						forward : _self.pageData.forward,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredLoginManage(){
		v.component("LoginManage",{
			template:`
			<div class="login-box-content">
				<Logo />
				<div class="col-xs-12 p-0 fgp-title" style="margin: 16px 0 30px 0">
					<span style="margin-bottom: 30px">${_self.translate.t1}</span>
				</div>
				<InputStyle ref="email" name="email" placeholder="${_self.translate.t31}" v-model="email" />
				<InputStyle style="margin-bottom: 0;" ref="password" type="password" name="password" placeholder="${_self.translate.t41}" :showPass="true" v-model="password" />
				<div :class="error ? 'eClass col-xs-12 p-0 ForgotPassword' : 'col-xs-12 p-0 ForgotPassword' ">
				</div>
				<ButtonStyle ref="button" text="${_self.translate.t5}" @click="handleSubmit" />
				<div :class="'col-xs-12 p-0 center-align error-message-style' + (errorMessage ? ' log-box-error-message' : '')">
					<span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>
				</div>
				<LinkList :link="link" />
				<div class="col-xs-12 p-0 ForgotPassword" style="margin-bottom:0px !important;text-align:center !important;">
					<a style="text-decoration: none" href="${_self.forgoturl.url}">${_self.forgoturl.name}</a>
				</div>
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					link : _self.link,
					errorMessage : '',
					error : '',
					email : _self.email,
					password : '',
					loading : false,
					line: false
				}
			},
			methods:{
				showError(message){
					this.errorMessage = message
				},
				handleSubmit(e){
					this.errorMessage = ''
					if(e) e.stopPropagation()
					if(!this.email) return this.$refs.email.showError(_self.translate.t113)
					if(!this.$refs.email.checkEmailFormat(this.email)) return this.$refs.email.showError(_self.translate.t111)
					if(!this.password) return this.$refs.password.showError(_self.translate.t113)
					if(!this.$refs.password.checkPasswordFormat(this.password)) return this.$refs.password.showError(_self.translate.t112)
					this.$refs.button.loading = true
					_self.sendRequest({
						type : _self.name,
						email : this.email,
						password : this.password,
						forward : _self.pageData.forward,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredLoginAuth(){
		v.component("LoginAuth",{
			template:`
			<div class="login-box-content">
				<Logo />
				<div class="col-xs-12 p-0">
					<i class="back-btn" @click="previousPage"></i>
					<span class="test-email">{{email}}</span>
				</div>
				<div class="col-xs-12 p-0 log-box-verify-code-text-title">
					<span v-html="title"></span>
				</div>
				<div class="col-xs-12 p-0 log-box-verify-code-text-content" v-if="sendText">
					<span v-html="sendText"></span>
				</div>
				<InputStyle ref="email" name="email" placeholder="${_self.translate.t31}" v-model="email" style='display:none;' />
				<VerifyCodeInputBtnStyle ref="code" name="code" placeholder="${_self.translate.t41}" v-model="code" autocomplete="off"/>
				<ButtonStyle ref="button" text="${_self.translate.t5}" @click="handleSubmit" />
				<div :class="'col-xs-12 p-0 center-align error-message-style' + (errorMessage ? ' log-box-error-message' : '')">
					<span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>
				</div>
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					link : _self.link,
					errorMessage : '',
					email : _self.email,
					password : '',
					code : '',
					loading : false,
					title : _self.translate.t1,
					sendText : _self.pageData.sendText,
					line: true
				}
			},
			methods:{
				previousPage() {
					history.go(-1)
				},
				showError(message){
					this.errorMessage = message
				},
				handleSubmit(e){
					this.errorMessage = ''
					if(e) e.stopPropagation()
					if (!this.code) return this.$refs.code.showError(_self.translate.t113)
					if (this.code.length !== 6) return this.$refs.code.showError(_self.translate.t115)
					this.$refs.button.loading = true
					_self.sendRequest({
						type : _self.name,
						email : this.email,
						code : this.code,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredSentEmailCode1(){
		v.component("SentEmailCode",{
			template:`
				<div class="login-box-content">
					<div class="col-xs-12 center-align login-box-logo p-0">
						<div class="logo"></div>
					</div>
					<div class="col-xs-12 p-0">
						<i class="back-btn" @click="previousPage"></i>
						<span class="test-email">{{email}}</span>
					</div>
					<div class="col-xs-12 p-0 log-box-verify-code-text-title">
						<span v-html="title"></span>
					</div>
					<div class="col-xs-12 p-0 log-box-verify-code-text-content" v-if="sendText">
						<span v-html="sendText"></span>
					</div>
					<VerifyCodeInputBtnStyle ref="verifycode" name="verifycode" placeholder="${_self.translate.t2}" v-model="verifycode" autocomplete="off"/>
					<ButtonStyle ref="button" text="${_self.translate.t3}" @click="handleSubmit" />
					<div style="clear: both;"></div>
				</div>
			`,
			data(){
				return {
					title : _self.pageData.translate.t1,
					sendText : _self.pageData.sendText,
					verifycode : '',
					email : _self.email,
				}
			},
			methods:{
				previousPage() {
					history.go(-1)
				},
				handleSubmit(e, s){
					if(e) e.stopPropagation()
					if(s) return this.handleConfirm()
					if(!this.email) return this.$refs.email.showError(_self.translate.t112)
					if(!this.$refs.verifycode.subCheckVerifyCode(this.verifycode)) return this.$refs.verifycode.showError(_self.translate.t111)
					this.$refs.button.loading = true
					_self.sendRequest({
						type : _self.name,
						email : this.email,
						verifycode : this.verifycode,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					this.verifycode = ''
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredLoginAuth1(){
		v.component("LoginAuth",{
			template:`
			<div class="login-box-content">
				<Logo :line="line" explain="${_self.translate.t1}"/>
				<InputStyle ref="email" name="email" placeholder="${_self.translate.t31}" v-model="email" style='display:none;' />
				<InputStyle ref="code" name="code" placeholder="${_self.translate.t41}" v-model="code" />
				<ButtonStyle ref="button" text="${_self.translate.t5}" @click="handleSubmit" />
				<div :class="'col-xs-12 p-0 center-align error-message-style' + (errorMessage ? ' log-box-error-message' : '')">
					<span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>
				</div>
				<LinkList :link="link" />
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					link : _self.link,
					errorMessage : '',
					email : _self.email,
					password : '',
					code : '',
					loading : false,
					line: true
				}
			},
			methods:{
				showError(message){
					this.errorMessage = message
				},
				handleSubmit(e){
					this.errorMessage = ''
					if(e) e.stopPropagation()
					if (!this.code) return this.$refs.code.showError(_self.translate.t113)
					if (this.code.length !== 6) return this.$refs.code.showError(_self.translate.t115)
					this.$refs.button.loading = true
					_self.sendRequest({
						type : _self.name,
						email : this.email,
						code : this.code,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredLoginQRcode(){
		v.component("LoginQRcode",{
			template:`
			<div class="login-box-content">
				<Logo :line="line" explain="${_self.translate.t2}"/>
				<div class="col-xs-12">
                    <h5>第一步：</h5>
                    <p style='text-align:left;'>登录手机应用，通过搜索关键词 “ Authenticator ” 下载任意一款两步验证应用</p>
                    <h5>第二步：</h5>
                    <p style='text-align:left;'>打开两步验证应用，然后扫描下方二维码获取应用授权，最后在两步验证页面，输入两步验证码即可提交登录</p>
                </div>
                <div class="col-xs-12 center-align" style='min-height:200px;min-width:200px;'>
                    <img :src="qrsrc" title='QRcode'></img>
                </div>
				<div :class="'col-xs-12 p-0 center-align error-message-style' + (errorMessage ? ' log-box-error-message' : '')">
					<span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>
				</div>
				<LinkList :link="link" />
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					link : _self.link,
					// errorMessage : '',
					errorMsg : _self.pageData.status,
					errorMessage : _self.translate.t116,
					email : _self.email,
					password : '',
					code : '',
					qrsrc: _self.pageData.qrsrc,
					status: _self.pageData.status,
					loading : false,
					line: true
				}
			},
			methods:{
				showError(message){
					this.errorMessage = message
				},
				handleSubmit(e){
					this.errorMessage = ''
					if(e) e.stopPropagation()
					if (!this.code) return this.$refs.code.showError(_self.translate.t113)
					if (this.code.length !== 6) return this.$refs.code.showError(_self.translate.t115)
					this.$refs.button.loading = true
					_self.sendRequest({
						type : _self.name,
						email : this.email,
						code : this.code,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredForgotPassword(){
		v.component("ForgotPassword",{
			template:`
			<div class="login-box-content">
				<Logo />
				<div class="col-xs-12 p-0 fgp-title">
					<span>${_self.translate.t5}</span>
				</div>
				<div class="col-xs-12 p-0 fgp-describe">
					<span>${_self.translate.describe}</span>
				</div>
				<InputStyle ref="email" name="email" placeholder="${_self.translate.t31}" v-model="email" />
				<ButtonStyle ref="button" text="${_self.translate.t5}" @click="handleSubmit" />
				<LinkList :link="link" />
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					link : _self.link,
					email : '',
					isManage : _self.pageData.isManage,
				}
			},
			methods:{
				handleSubmit(e){
					if(e) e.stopPropagation()
					if(!this.email) return this.$refs.email.showError(_self.translate.t113)
					if(!this.$refs.email.checkEmailFormat(this.email)) return this.$refs.email.showError(_self.translate.t111)
					this.$refs.button.loading = true

					let _that = this
					
					grecaptcha.ready(function() {
						grecaptcha.execute(_self.googleRecaptcheClientKey, {action: 'submit'}).then(function(token) {
							_self.sendRequest({
								type : _self.name,
								email : _that.email,
								isManage : _that.isManage,
								token: token,
							},_that.handleResponse)
						});
					});
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredChangePassword(){
		v.component("ChangePassword",{
			template:`
			<div class="login-box-content">
				<Logo />
				<div class="col-xs-12 p-0 fgp-title" style="margin: 16px 0 30px 0">
					<span style="margin-bottom: 30px">${_self.translate.t5}</span>
				</div>
				<div class="col-xs-12 p-0 fgp-title" style="margin: 16px 0 30px 0">
					<span style="color:red" v-if="t1">{{ t1 }}</span>
				</div>
				<InputStyle ref="email" name="email" placeholder="${_self.translate.t31}" :disabled="true" value="${_self.email}" style="pointer-events: none"/>
				<InputStyle ref="newPassword" type="password" name="newPassword" placeholder="${_self.translate.t41}" :showPass="true" autocomplete="off" v-model="password1" />
				<InputStyle ref="password2" type="password" name="password" placeholder="${_self.translate.t51}" :showPass="true" v-model="password2" />
				<ButtonStyle ref="button" text="${_self.translate.t5}" @click="handleSubmit" />
				<LinkList :link="link" />
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					link : _self.link,
					password1 : '',
					password2 : '',
					isManage : _self.pageData.isManage,
					t1 : _self.translate.t1,
				}
			},
			watch: {
				password2() {
					this.$refs.password2.showError(null)
				}
			},
			methods:{
				handleSubmit(e){
					if(e) e.stopPropagation()
					if(!this.password1) return this.$refs.newPassword.error = true
					if(!this.$refs.newPassword.cCheckNewPassword(this.password1)) return this.$refs.newPassword.error = true
					if(!this.password2) return this.$refs.password2.showError(_self.translate.t114)
					if(this.password1 !== this.password2) return this.$refs.password2.showError(_self.translate.t6)
					this.$refs.button.loading = true
					_self.sendRequest({
						type : _self.name,
						password1 : this.password1,
						password2 : this.password2,
						isManage : this.isManage,
						encrypt : _self.pageData.encrypt,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredSentEmail(){
		v.component("SentEmail",{
			template:`
			<div class="login-box-content">
				<Logo />
				<div class="col-xs-12 p-0 log-box-text-content" v-if="sendText">
					<span v-html="sendText"></span>
				</div>
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					sendText : _self.pageData.sendText,
				}
			},
		})
	}
	registeredSentPassword(){
		v.component("SentPassword",{
			template:`
			<div class="login-box-content">
				<Logo />
				<div class="col-xs-12 p-0 fgp-title">
					<span>Reset Instructions</span>
				</div>
				<div class="col-xs-12 p-0 log-box-text-content fgp-describe" v-if="sendText">
					<span v-html="sendText"></span>
				</div>
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					sendText : _self.pageData.sendText,
				}
			},
		})
	}
	registeredSignupInformation(){
		v.component('vue-multiselect', w.VueMultiselect.default)
		v.component('vue-phone-number-input', w['vue-phone-number-input']);
		v.component("SignupInformation",{
			template:`
			<div class="login-box-content">
				<Logo :email="email" explain="Company Infomation" :isShowback="true"/>
				<InputStyle ref="company" name="company" placeholder="${_self.translate.t31}" v-model="company" />
				<InputStyle ref="website" name="website" placeholder="${_self.translate.t41}" v-model="website" :optional="true" />
				<div class="col-xs-12 p-0 log-box-input">
					<vue-phone-number-input @update="results = $event" v-model="mobile" :clearable="clearable" :no-flags="true" default-country-code="AS" :show-code-on-list="showCodeOnList" :translations="translations" color="red"/>
					<p class="customErrorMsg mobileerrormsg" style="text-align: left"></p>
				</div>
				<div class="col-xs-12 p-0">
					<div :class="['multiselectbutton', {'invalid': error.Industry}]">
						<vue-multiselect
							ref="Industry"
							selectedLabel=""
							deselectLabel=""
							selectLabel=""
							v-model="optionIndustryValue"
							:searchable="false"
							:options="optionIndustry"
							:multiple="true"
							:close-on-select="false"
							label="name"
							track-by="name"
							openDirection="bottom"
							placeholder="${_self.translate.t116}"
						/>
						<label class="typo__label form__label">
							<span v-show="error.Industry">{{error.Industry}}</span>
						</label>
					</div>
				</div>
				<div class="col-xs-12 p-0">
					<div :class="['multiselectbutton', {'invalid': error.Orders}]">
						<vue-multiselect
							ref="Orders"
					    	:allow-empty="false"
					    	selectedLabel=""
					    	deselectLabel=""
					    	selectLabel=""
					    	:searchable="false"
					    	v-model="OrdersListValue"
							:options="optionOrdersList"
							label="name"
							track-by="name"
							openDirection="bottom"
							placeholder="${_self.translate.t115}"
					   	/>
					   	<label class="typo__label form__label">
							<span v-show="error.Orders">{{error.Orders}}</span>
						</label>
					</div>
				</div>
				<ButtonStyle ref="button" text="${_self.translate.t5}" @click="handleSubmit" />
				<div :class="'col-xs-12 p-0 center-align error-message-style' + (errorMessage ? ' log-box-error-message' : '')">
					<span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>
				</div>
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					email : _self.email,
					errorMessage : null,
					company : '',
					website : '',
					mobile: '',
					optionOrdersList : _self.ordersList,
					OrdersListValue : [],
					optionIndustry : _self.industryList,
					optionIndustryValue: [],
					translations: {
						countrySelectorLabel: null,
						phoneNumberLabel: _self.translate.t118,
					},
					results: null,
					error: {
						Orders: false,
						Country: false,
						Industry: false
					},
				}
			},
			props: {
				defaultCountryCode: {
					type: String,
				},
				clearable : {
					type : Boolean,
					default : true,
				},
				showCodeOnList: {
					type: Boolean,
					default: true,
				},
			},
			watch: {
				OrdersListValue(val) {
					if(val) this.error.Orders = false
				},
				optionIndustryValue(val) {
					if(val) this.error.Industry = false
				},
			},
			methods:{
				showError(message){
					this.errorMessage = message
				},
				setError(key, value = null) {
					this.error[key] = value
					return false
				},
				handleData(data) {
					let dataArr = []
					if(data.length > 0) {
						data.map((v) => {
							if(v) dataArr.push(v.value)
						})
					}
					return dataArr.join(',')
				},
				handleSubmit(e){
					if(e) e.stopPropagation()

					if(!this.company) return this.$refs.company.showError(_self.translate.t315)
					if(!this.$refs.company.checkCompanyFormat(this.company)) return this.$refs.company.showError(_self.translate.t111)
					if(this.website && this.website.length > 100) return this.$refs.website.showError(_self.translate.t315)
					if(!this.$refs.website.checkWebsiteFormat(this.website)) return this.$refs.website.showError(_self.translate.t112)

					if(this.optionIndustryValue.length === 0) return this.setError('Industry', _self.translate.t116)
					this.setError('Industry')

					if(this.OrdersListValue.length === 0) return this.setError('Orders', _self.translate.t115)
					this.setError('Orders')

					let phoneCode = this.results ? (this.results.countryCallingCode != undefined ? this.results.countryCallingCode : '') : ''
					let nationalNumber = this.results ? (this.results.nationalNumber != undefined ? this.results.nationalNumber : '') : ''
					let phone = phoneCode + " " + nationalNumber
					if(this.mobile){
						if(!phone){
							return $('.mobileerrormsg').html(_self.translate.t314).show()
						}
						if(this.results.isValid == false) return $('.mobileerrormsg').html(_self.translate.t314).show()
						phone = "+" + phone
					}
					this.$refs.button.loading = true
					_self.sendRequest({
						email: this.email,
						type: _self.name,
						company: this.company,
						website: this.website,
						industry: this.handleData(this.optionIndustryValue),
						order_quantity: this.handleData([this.OrdersListValue]),
						phone: phone,
						encrypt: _self.pageData.encrypt,
						acticode: _self.pageData.acticode,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredNameInputStyle(){
		v.component("NameInputStyle",{
			template:`
				<span :class=" error ? 'log-box-input-error' : ''">
					<input :type="inputType" :name="name" :placeholder="placeholder" :autocomplete="autocomplete" v-model="inputValue" :disabled="disabled" @blur="inputBlur" />
					<span class="input-error-message" v-if="error">{{ error }}</span>
					<span :class="inputType == 'password' ? 'input-hidden-password' : 'input-show-password'" v-if="showPass" @click="changeType"></span>
				</span>
			`,
			props : {
				type : {
					type : String,
					default : 'text',
				},
				placeholder : String,
				name : {
					type : String,
					default : '',
				},
				showPass : {
					type : Boolean,
					default : false,
				},
				disabled : {
					type : Boolean,
					default : false,
				},
				value : {
					type : String | Number,
					default : '',
				},
				optional : {
					type : Boolean,
					default : false,
				},
				autocomplete : {
					type : String,
					default : 'on',
				},
			},
			data(){
				return {
					error : null,
					inputValue : this.value,
					inputType : this.type,
				}
			},
			methods:{
				showError(message){
					this.error = message
				},
				changeType(){
					this.inputType = 'text'
				},
				inputBlur(){
					this.inputValue = this.inputValue.trim()
					return this.checkValue(this.inputValue,false)
				},
				checkValue(value,bool){
					if(!value) return this.showError(null)
					switch(this.name){
						case 'firstname' :
							if(this.checkFirstnameFormat(value)) return this.showError(null)
							return bool ? false : this.showError(_self.translate.t117)
							break
						case 'lastname' :
							if(this.checkLastnameFormat(value)) return this.showError(null)
							return bool ? false : this.showError(_self.translate.t118)
							break
					}
				},
				checkFirstnameFormat(username){
					return username.length >= 1 && username.length <= 32
				},
				checkLastnameFormat(username){
					return username.length >= 1 && username.length <= 32
				},
			},
			watch:{
				inputValue(value,oldValue){
					this.checkValue(value,true)
					this.$emit('changeValue', value)
					if(this.$listeners['change']) return this.$emit('change', value, oldValue)
					return false;
				}
			},
			model:{
				prop: 'value',
				event: 'changeValue',
			}
		})
	}
	registeredSentEmailCode(){
		v.component("SentEmailCode",{
			template:`
				<div class="login-box-content">
					<div class="col-xs-12 center-align login-box-logo p-0">
						<div class="logo"></div>
					</div>
					<div class="col-xs-12 p-0">
						<i class="back-btn" @click="previousPage"></i>
						<span class="test-email">{{email}}</span>
					</div>
					<div class="col-xs-12 p-0 log-box-verify-code-text-title">
						<span v-html="title"></span>
					</div>
					<div class="col-xs-12 p-0 log-box-verify-code-text-content" v-if="sendText">
						<span v-html="sendText"></span>
					</div>
					<VerifyCodeInputBtnStyle ref="verifycode" name="verifycode" placeholder="${_self.translate.t2}" v-model="verifycode" autocomplete="off"/>
					<ButtonStyle ref="button" text="${_self.translate.t3}" @click="handleSubmit" />
					<div style="clear: both;"></div>
				</div>
			`,
			data(){
				return {
					title : _self.pageData.translate.t1,
					sendText : _self.pageData.sendText,
					verifycode : '',
					email : _self.email,
				}
			},
			methods:{
				previousPage() {
					history.go(-1)
				},
				handleSubmit(e, s){
					if(e) e.stopPropagation()
					if(s) return this.handleConfirm()
					if(!this.email) return this.$refs.email.showError(_self.translate.t112)
					if(!this.$refs.verifycode.subCheckVerifyCode(this.verifycode)) return this.$refs.verifycode.showError(_self.translate.t111)
					this.$refs.button.loading = true
					_self.sendRequest({
						type : _self.name,
						email : this.email,
						verifycode : this.verifycode,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					this.verifycode = ''
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredVerifyCodeInputBtnStyle(){
		v.component("VerifyCodeInputBtnStyle",{
			template:`
				<div class="col-xs-12 p-0 log-box-verify-code-input">
					<div class="verify-code-box">
						<div class="log-box-input p-0" style="width: 100%; max-width: 238px; margin-bottom: 0">
							<span :class=" error ? 'log-box-input-error' : ''">
								<input maxlength="6" onkeyup="value=value.replace(/[^\\d]/g,'')" type="text" :name="name" :placeholder="placeholder" :autocomplete="autocomplete" v-model="inputValue" :disabled="disabled" />
							</span>
						</div>
						<div class="log-box-verify-code-button">
							<span class="input-suffix">
								<span class="input-link-verify" v-show="!isSendCode" @click="getVerifycode" style="text-align: center">${_self.translate.t211}</span>
								<span class="verify-sended" v-show="isSendCode" style="text-align: center"><span class="verify-sended-time">{{second}}</span> S</span>
							</span>
						</div>
					</div>
					<span style="margin-bottom: 20px">
						<span class="input-error-message" v-if="error">{{ error }}</span>
					</span>
				</div>
			`,
			props : {
				type : {
					type : String,
					default : 'text',
				},
				placeholder : String,
				name : {
					type : String,
					default : '',
				},
				disabled : {
					type : Boolean,
					default : false,
				},
				value : {
					type : String | Number,
					default : '',
				},
				optional : {
					type : Boolean,
					default : false,
				},
				autocomplete : {
					type : String,
					default : 'on',
				},
			},
			data(){
				return {
					error : null,
					inputValue : this.value,
					isSendCode : false,
					second : 60,
					email : _self.email,
				}
			},
			mounted(){
				this.isSendCode = true
				this.handleCodeRespone(200)
			},
			methods:{
				showError(message){
					this.error = message
				},
				checkValue(value,bool){
					// if(!value) return this.showError(null)
					switch(this.name){
						case 'verifycode' :
							if(this.checkVerifyCode(value)) return this.showError(null)
							return bool ? false : this.showError(_self.translate.t111)
							break
					}
				},
				checkVerifyCode(verifycode){
					let pattern = new RegExp("(^[0-9]{6}$)")
					if (pattern.test(verifycode)) return true
					return false
				},
				subCheckVerifyCode(verifycode){
					let pattern = new RegExp("(^[0-9]{6}$)")
					if (pattern.test(verifycode)) return true
					this.inputValue = ''
					return false
				},
				getVerifycode(e){
					if(e) e.stopPropagation()
					if(!this.email) return this.$refs.email.showError(_self.translate.t112)
					this.isSendCode = true
					_self.sendRequest({
						type : 'get-verify-code',
						name : _self.name,
						email : this.email,
					}, this.handleCodeRespone)
				},
				handleCodeRespone(code, message, data){
					if (code !== 200)
					{
						this.isSendCode = false
						return this.showError(message)
					}
					const st = setInterval(() => {
						this.second --
						if (this.second <= 0)
						{
							clearInterval(st)
							this.isSendCode = false
							this.second = 60
							setTimeout(()=>{
								$('.input-link-verify').text(_self.translate.t211)
							},10)
						}
						$(".verify-sended>.verify-sended-time").text(this.second)
					}, 1000)
				},
				cleanCode(){
					this.inputValue = ''
				}
			},
			watch:{
				inputValue(value,oldValue){
					this.checkValue(value,true)
					this.$emit('changeValue', value)
					if(this.$listeners['change']) return this.$emit('change', value, oldValue)
					return false;
				},
				value(value){
					if(value === '') this.cleanCode()
				}
			},
			model:{
				prop: 'value',
				event: 'changeValue',
			}
		})
	}
	registeredSetAccountRole(){
		v.component("SetAccountRole",{
			template:`
					<div class="login-box-content register-box">
						<Logo explain="${_self.translate.t1}" :email="email"/>
						<div :class="['box', item.name, {ativehover: key === 0 ? false : false}]" style="padding: 26px 14px" @click="confirmRole(item.value)" v-for="(item, key) in roleList">
							<div>
								<div :class="['item-box']">
									<div class="text">
										<p class="name">{{ item.name }}</p>
										<p class="describe">{{ item.describe }}</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					`,
			data(){
				return {
					title : _self.pageData.translate.t1,
					sub_title : _self.pageData.translate.t2,
					email : _self.email,
					errorMessage : '',
					roleList : _self.pageData.role_list,
				}
			},
			methods:{
				showError(message){
					this.errorMessage = message
				},
				confirmRole(e){
					this.errorMessage = ''
					if(!this.email) return this.$refs.email.showError(_self.translate.t112)
					_self.sendRequest({
						type : _self.name,
						email : this.email,
						role_type : e,
					}, this.handleRespone)
				},
				handleRespone(code, message, data){
					if (code !== 200)
					{
						return this.showError(message)
					}
					let url = data.location ? data.location : ''
					url = decodeURIComponent(url)
					if(url) w.location.href = url
				},
			}
		})
	}
	registeredRoleTableTitle(){
		v.component("RoleTableTitle",{
			template:`
				<div class="col-xs-12 p-0 role-table-title">
					<span v-html="title"></span>
				</div>
			`,
			props:{
				title : {
					type : String,
					default : '',
				},
			},
		})
	}
	registeredWriteRoleInfo(){
		v.component('vue-phone-number-input', w['vue-phone-number-input']);
		v.component("WriteRoleInfo",{
			template:`
				<div class="register-box">
					<div class="set-role-box-content">
						<div class="col-xs-12 center-align register-box-logo p-0">
							<div class="logo"></div>
						</div>
						<div class="col-xs-12 p-0 write-role-info-container">
							<div class="role-info-table-box">
								<div class="col-xs-12 p-0 top-role-title">
									<div class="top-role-icon top-role-icon-${_self.pageData.role_name}"></div>
									<div class="top-role-text">I'm a ${_self.pageData.role_name}</div>
								</div>
								<div class="col-xs-12 p-0 content-container">
								
									<div class="col-xs-12 p-0 role-table-title" v-if="roleType == 2">
										<span>What is the <span style="font-weight: bold;">monthly</span> order quantity of your store?</span>
									</div>
									<div class="col-xs-12 p-0 select-radio-container" v-if="roleType == 2">
										<label class="select-radio-box" v-for="(item, index) in orderNumList" :key="index">
										   <input class="select-radio" type="radio" name="order_quantity" :value="item.value" v-model="orderQuantityValue"/>
										   <span class="span_radio"></span>
										   {{item.name}}
										</label>
									</div>
									<p class="customErrorMsg ordererrormsg"></p>
									
									<RoleTableTitle :title="t3" v-if="roleType != 3"/>
									<div class="col-xs-12 p-0 multiple-choice-container" v-if="roleType != 3">
										<div class="multiple-choice-box" v-for="(item,index) in platformsList">
											<div @click="checkedBox(item.value)" class="multiple-choice-text" name="platforms" :class="{'active': rSelect.indexOf(item.value)!=-1}">
											{{item.name}}
											</div>
										</div>
									</div>
									<p class="customErrorMsg platformserrormsg"></p>
									
									<RoleTableTitle :title="t5" v-if="roleType == 3"/>
									<div class="col-xs-12 p-0 select-radio-container" v-if="roleType == 3">
										<label class="select-radio-box" v-for="(item, index) in bussinessList" :key="index">
										   <input class="select-radio" type="radio" name="bussiness" :value="item.value" v-model="bussinessValue"/>
										   <span class="span_radio"></span>
										   {{item.name}}
										</label>
									</div>
									<p class="customErrorMsg bussinesserrormsg"></p>
									
									<RoleTableTitle :title="t7" v-if="roleType == 3"/>
									<InputStyle v-if="roleType == 3" ref="company_name" name="company_name" placeholder="" v-model="company_name" :optional="true" />
									
									<RoleTableTitle :title="t4"/>
									<div class="col-xs-12 p-0">
										<vue-phone-number-input @update="results = $event" v-model="mobile" :clearable="clearable" :default-country-code="defaultCountryCode" :show-code-on-list="showCodeOnList"/>
									</div>
									<p class="customErrorMsg mobileerrormsg"></p>
									
									<RoleTableTitle :title="t6" v-if="roleType == 2"/>
									<InputStyle v-if="roleType == 2" ref="website" name="website" placeholder="" v-model="website" :optional="true" />
									
									<div :class="'col-xs-12 p-0 center-align' + (errorMessage ? ' reg-box-error-message' : '')">
										<span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>
									</div>
									
									<ButtonStyle style="margin: 30px auto;" ref="button" text="${_self.translate.t1}" @click="handleSubmit" />
								</div>
								<div style="clear: both;"></div>
							</div>
						</div>
					</div>
				</div>
			`,
			data(){
				return {
					t2: _self.translate.t2,
					t3: _self.translate.t3,
					t4: _self.translate.t4,
					t5: _self.translate.t5,
					t6: _self.translate.t6,
					t7: _self.translate.t7,
					email : _self.email,
					roleType : _self.pageData.role_type,
					errorMessage: '',
					platformsList: _self.pageData.platforms,
					orderNumList: _self.pageData.order_quantity,
					bussinessList: _self.pageData.bussiness,
					company_name: '',
					website: '',
					mobile: '',
					results: null,
					bussinessValue: 0,
					orderQuantityValue: '',
					rSelect: [],
				}
			},
			props:{
				clearable : {
					type : Boolean,
					default : true,
				},
				title : {
					type : String,
					default : '',
				},
				defaultCountryCode: {
					type: String,
					default: 'US',
				},
				showCodeOnList: {
					type: Boolean,
					default: true,
				},
			},
			methods:{
				showError(message){
					this.errorMessage = message
				},
				checkedBox(e) {
					if (this.rSelect.indexOf(e) !== -1) {
						this.rSelect.splice(this.rSelect.indexOf(e), 1);
					} else {
						this.rSelect.push(e);
					}
				},
				checkWebsiteFormat(website){
					if(this.optional && !website) return true
					return /[0-9a-z-_]+\.[0-9a-z-_]+/i.test(website)
				},
				handleSubmit(e){
					this.errorMessage = ''
					if(e) e.stopPropagation()
					$('.ordererrormsg,.platformserrormsg,.bussinesserrormsg,.mobileerrormsg').hide();
					switch (this.roleType){
						case 1:
							if(this.rSelect.length <= 0) return $('.platformserrormsg').html(_self.translate.t316).show()
							break
						case 2:
							if(!this.orderQuantityValue) return $('.ordererrormsg').html(_self.translate.t312).show()
							if(this.rSelect.length <= 0) return $('.platformserrormsg').html(_self.translate.t311).show()
							if(this.website && this.website.length > 100) return this.$refs.website.showError(_self.translate.t315)
							break
						case 3:
							if(!this.bussinessValue) return $('.bussinesserrormsg').html(_self.translate.t313).show()
							break
						default:
							return this.showError(_self.translate.t310)
							break
					}
					let phoneCode = this.results ? (this.results.countryCallingCode != undefined ? this.results.countryCallingCode : '') : '';
					let nationalNumber = this.results ? (this.results.nationalNumber != undefined ? this.results.nationalNumber : '') : '';
					let phone = phoneCode + " " + nationalNumber
					if(this.mobile){
						if(!phone){
							return $('.mobileerrormsg').html(_self.translate.t314).show()
						}
						if(this.results.isValid == false) return $('.mobileerrormsg').html(_self.translate.t314).show()
						phone = "+" + phone
					}
					this.$refs.button.loading = true
					_self.sendRequest({
						type : _self.name,
						email : this.email,
						acticode : _self.pageData.acticode,
						phone : phone,
						role_type : this.roleType,
						order_quantity : this.orderQuantityValue,
						bussiness : this.bussinessValue,
						platforms : this.rSelect ? this.rSelect.toString() : "",
						company : this.company_name,
						website : this.website,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	registeredThirdAuth(){
		v.component("ThirdAuth",{
			template:`
			<div class="login-box-content">
				<LogoV1 explain="${_self.translate.t1}" />
				<div class="col-xs-12 p-0 third-auth-box">
					<div class="center-align">
						<div>
							<img src="https://s.trackingmore.com/images/icons/${_self.translate.auth_type_name}.png" alt="${_self.translate.auth_type_name}">
						</div>
						<span class="third-auth-email">{{email}}</span>
					</div>
					<div>
						<div>
							<img src="https://s.trackingmore.com/images/icons/convert.png" alt="convert">
						</div>
					</div>
					<div class="center-align">
						<div>
							<img src="https://s.trackingmore.com/images/icons/auth-logo.png" alt="tm-logo">
						</div>
						<span class="third-auth-email">{{email}}</span>
					</div>
				</div>
				<div class="col-xs-12 p-0" style="margin-bottom: 12px">
					<div class="center-align third-auth-code-tip">We've sent a 6-character code to</div>
					<div class="center-align third-auth-code-tip">{{email}}</div>
					<div class="center-align third-auth-code-tip">Please enter it below to verify your identity.</div>
				</div>
				<InputStyle ref="verifycode" type="text" name="verifycode" placeholder="" v-model="verifycode" />
				<ButtonStyle ref="button" text="${_self.translate.t5}" @click="handleSubmit" />
				<div class="col-xs-12 p-0 center-align" style="margin-top: 16px;padding: 0 32px;line-height: 180%">
					<span>Didn't receive it? Check your spam folder, or <span style="color:#ff6700;cursor: pointer" @click="sendAuthCode(false)">resend email</span>.</span>
				</div>
				<div :class="'col-xs-12 p-0 center-align error-message-style' + (errorMessage ? ' log-box-error-message' : '')">
					<span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>
				</div>
				<div style="clear: both;"></div>
			</div>
			`,
			data(){
				return {
					errorMessage : '',
					email : _self.email,
					verifycode : '',
					loading : false,
				}
			},
			created(){
				this.sendAuthCode(true)
			},
			methods:{
				showError(message){
					this.errorMessage = message
				},
				subCheckVerifyCode(verifycode){
					let pattern = new RegExp("(^[0-9]{6}$)")
					if (pattern.test(verifycode)) return true
					this.verifycode = ''
					return false
				},
				sendAuthCode(hideTip = false){
					_self.sendRequest({
						type : 'auth-send-code',
						email : this.email,
					}, (code, message, data) => {
						if (!hideTip) {
							return UIkit.notification({message: message , pos: 'top-center',timeout: 3000})
						}
					})
				},
				handleSubmit(e){
					this.errorMessage = ''
					if(e) e.stopPropagation()
					if(!this.subCheckVerifyCode(this.verifycode)) return this.$refs.verifycode.showError(_self.translate.t111)
					this.$refs.button.loading = true

					_self.sendRequest({
						type : _self.name,
						email : this.email,
						auth_type : _self.translate.auth_type_name,
						verifycode : this.verifycode,
					},this.handleResponse)
				},
				handleResponse(code,message,data){
					return _self.handleResponse(this,code,message,data)
				}
			}
		})
	}
	sendRequest(data,callback){
		if(_self.loading) return false
		_self.loading = true
		q.ajax({
			url : this.api,
			type : 'post',
			data : data,
			success : function(r){
				_self.loading = false
				try{
					let result = JSON.parse(r)
					let code = result.code ? parseInt(result.code) : 0
					let message = result.message ? result.message : 0
					let data = result.data ? result.data : {}
					if(callback) callback(code,message,data)
				}catch(e){
					if(callback) callback(0,'',{})
				}
			}
		})
	}
	handleResponse(_this,code,message,data){
		_this.$refs.button.loading = false
		try{
			if(code !== 200)
			{
				if(code === 302){
					let url = data.location ? data.location : ''
					url = decodeURIComponent(url)
					let time = data.time ? data.time : 0
					if(url) time > 0 ? setTimeout(() => {
						w.location.href = url
					},time) : w.location.href = url
				}
				let name = data.name ? data.name : ''
				if(!name || !_this.$refs[name] || !_this.$refs[name].showError){
					switch (name) {
						case 'Orders': {
							console.log(_this.$refs[name])
							return _this.error.Orders = message
						}
						case 'Country': {
							return _this.error.Country = message
						}
						case 'Industry': {
							return _this.error.Industry = message
						}
						default: {
							return _this.showError(message)
						}
					}
				}
				return _this.$refs[name].showError(message)
			}
			_this.$parent.showLoading(true)
			let url = data.location ? data.location : ''
			url = decodeURIComponent(url)
			let time = data.time ? data.time : 0
			if(url) time > 0 ? setTimeout(() => {
				w.location.href = url
			},time) : w.location.href = url
		}catch(e){
			return e
		}
	}
}
let ln = new Login()
})
}(Vue,window,document,$,{}))