<template>
	<view class="add-user-view">
		<navBar :name="$t('添加成员')" left="0"/>
		<view class="flex-row email-input-view">
			<input class="email-input-style" type="email" v-model="email" :placeholder="$t('请输入被邀人邮箱号')"  placeholder-style="font-size: 32rpx; font-weight: 400; color: #BAC1D0;">
			<img @click="clearInput" class="clear-btn" src="https://qiniu.bms16.com/Fjpf2YnHUK1_CFf20kKRvjX9YdC3" alt="">
		</view>
		<view @click="nextFn" class="next-btn" :class="{'next-btn-i':!isEmailFn(email)}">{{ $t('下一步') }}</view>
	</view>
</template>

<script>
	var config = require('../../common/config_gyq.js');
	var http = require('../../common/request.js');
	import { isEmail } from '../../utils/util.js';
	import { msg } from '../../utils/util.js';
	export default {
		data() {
			return {
				email:""
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
		},
		methods: {
			isEmailFn(str){
				return isEmail(str)
			},
			async nextFn(){
				let {data} = await http.postApi(config.API_ACCOUNT_CHECK_SHARE_ACCOUNT_EXIST,{
					email:this.email
				})
				if(data.code == 200){
					if(data.data.exist){
						uni.navigateTo({
							url:`/pages/powerSetting/powerSetting?email=${this.email}&headimg=${data.data.headimg}&nickname=${data.data.nickname}&isSet=1`
						})
					}else{
						msg(this.$t('该用户不存在！'))
					}
				}else{
					msg(data.msg)
				}
			},
			
			clearInput() {
				this.email = ''
			}
		}
	};
</script>
<style>
.add-user-view{
	background-color: #FFF;
	height: 100vh;
	padding: 32rpx;
	/* margin-top: 32rpx; */
}
.email-input-style{
	width: 100%;
	padding: 20rpx 60rpx 20rpx 20rpx;
	margin-bottom: 20px;
	border-radius: 24rpx;
	border: 4rpx solid #060809;
	font-weight: 400;
	font-size: 32rpx;
	color: #333;
	caret-color: #0A59F7;
}
.email-input-view{
	position: relative;
}
.next-btn{
	height: 88rpx;
	line-height: 88rpx;
	font-weight: 600;
	font-size: 32rpx;
	color: #FFFFFF;
	text-align: center;
	background: #060809;
	border-radius: 44rpx;
}
	
.next-btn-i{
	opacity: 0.2;
}
.clear-btn{
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	right: 36rpx;
	top: 28rpx;
}
</style>