<template>
	<view class="personAttestation">
		<far-bottom></far-bottom>
		<scroll-view :style="{ height: phoneHight }" :scroll-y="true">
			<view class="mainView">
				<view class="informationView marginAuto">
					<!-- 基本信息 -->
					<view class="p30">
						<view>
							<view class="line inlineBlock verticalM"></view>
							<text class="colorBlack font28 verticalM marginL10">博主信息</text>
						</view>
						<view class="marginT29">
							<view class="inputView">
								<text class="colorBlack font24 verticalM">姓名/昵称</text>
								<input placeholder="请输入姓名/昵称" class="colorBlack font24 inlineBlock verticalM p0p50" v-model="bloggerInfo.name" />
							</view>
							<view class="inputView marginT18">
								<text class="colorBlack font24 verticalM">联系电话</text>
								<input placeholder="请输入您的联系电话" class="colorBlack font24 inlineBlock verticalM p0p50" v-model="bloggerInfo.mobile" />
							</view>
							<view class="inputView marginT18" style="display: flex;align-items: center;background: #fff;">
								<view class="inputView">
									<text class="colorBlack font24 verticalM">手机验证码</text>
									<input placeholder="请输入验证码" class="colorBlack font24 inlineBlock verticalM p0p50"
									 v-model="bloggerInfo.code" style="width:190upx;" />
								</view>
								<view class="colorBlack font24 verticalM marginL10"
								 style="background: #fafafa;border-radius: 10rpx;line-height: 83rpx;padding: 0px 10px;flex-shrink: 0;"
								 @click="getCode" >{{codeBtnText}}</view> 
							</view>
						</view>
					</view>
					<!-- 上传证件 -->
					<view class="p30">
						<view>
							<view class="line inlineBlock verticalM"></view>
							<text style="color: #f00;font-size: 12px;vertical-align: bottom;margin-left: 15rpx;">*</text>
							<text class="colorBlack font28 verticalM marginL15">其他平台粉丝截图</text>
						</view>
						<view class="marginT29 flex">
							<view class="uploadButton inlineBlock textC" @click="uploadFiles()" v-if="bloggerInfo.screenshot == '' || bloggerInfo.screenshot == undefined">
								<image :src="imageRootNew+'mb-plus.png'" class="upLoadImg"></image>
							</view>
							<view class="inlineBlock textC" v-else @click="uploadFiles()" style="position: relative;">
								<image :src="bloggerInfo.screenshot" class="imageHave" mode="aspectFit"></image>
								<image :src="imgfixUrls + 'merchant/close.png'" class="close" @click.stop="closePreview()" />
							</view>
						</view>
					</view>
				</view>
				
				<!-- 提交按钮 -->
				<!-- <view class="marginT70auto textC" :class="agree == true ? 'submitButton' : 'submitButton1'" @click="setInfo"> -->
				<view class="marginT70auto textC submitButton" @click="setInfo">
					<text class="lineHeight80 colorW font28">提交认证申请</text>
				</view>
				<!-- 提交按钮 -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
// import popAgreement from '@/components/template/popAgreement';
export default {
	components: {
		// popAgreement
	},
	data() {
		return {
			agree: false,
			phoneHight: null,
			show: false,
			userInfo: {},
			bloggerInfo: {
				name:'',
				mobile:'',
				code:'',
				screenshot:''
			},
			id: null,
			codeBtnText: '获取验证码',
			getSmsCode: '',
		};
	},
	computed: {
		
	},
	onLoad(e) {
		let _this = this;
		uni.getSystemInfo({
			success(res) {
				_this.phoneHight = res.windowHeight + 'px';
			}
		});
		uni.getStorage({
			key: 'userinfo',
			success: async function(res) {
				_this.init(res.data.mid);
				_this.id = res.data.mid;
			}
		});
	},
	methods: {
		init(mid) {
			let _this = this;
			_this.getInfo(mid);
		},
		// 信息设置接口
		getInfo(mid) {
			let _this = this;
			let data = {
				mid: mid
			};
			App._post_form('&p=Certified&do=initApplyCertified', data, res => {
			}, (err)=>{
				console.log(err.data.message);
				uni.navigateBack({
					delta: 1
				})
			});
		},
		setInfo() {
			let _this = this;
			let data = {
				name: _this.bloggerInfo.name,
				mobile: _this.bloggerInfo.mobile,
				code: _this.bloggerInfo.code,
				screenshot: _this.bloggerInfo.screenshot
			};
			if(data.name==''){
				uni.showToast({
					icon:'none',
				    title: '姓名不能为空',
				    duration: 2000
				});
				return ;
			}
			if(data.mobile==''){
				uni.showToast({
					icon:'none',
				    title: '联系电话不能为空',
				    duration: 2000
				});
				return ;
			}
			if(data.code==''){
				uni.showToast({
					icon:'none',
				    title: '验证码不能为空',
				    duration: 2000
				});
				return ;
			}
			if(data.documents==''){
				uni.showToast({
					icon:'none',
				    title: '请上传截图',
				    duration: 2000
				});
				return ;
			}
			setTimeout(()=>{
				App._post_form('&p=certified&do=applyBloggerCertified',data, res => {
					if(res.errno==0){
						uni.showToast({
							title: res.message
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						}, 2000)
					}
				});
			})
		},
		// 文件上传接口
		async uploadFiles() {
			let _this = this;
			// #ifdef H5
			if(App.getClientType() == 2){
				let res = await App.browser_upload(6);
				for (let i = 0; i < res.tempFilePaths.length; i++) {
				let aa = await App._upLoad(res.tempFilePaths[i]);

				}
				return
			}
			wxApi.choseImage(res => {
				wxApi.uoloadIg(res.localIds[0], data => {
					if (data.errMsg === 'uploadImage:ok') {
						uni.showLoading({});
						let requestData = {
							upload_type: 2,
							id: data.serverId
						};
						App._post_form(
							'&do=uploadFiles',
							requestData,
							res => {
								if (res.errno === 0) {
									
								}
							},
							false,
							() => {
								uni.hideLoading();
							}
						);
					} else {
						uni.hideLoading();
						App.showError('上传失败');
					}
				});
			});
			// #endif
			// #ifndef H5
			wx.chooseImage({
				count: 1,
				sourceType: ['album', 'camera'],
				success: async function(res) {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						let result = await App._MYupLoad(res.tempFilePaths[i]);
						console.log(result.data.img, result);
						_this.bloggerInfo.screenshot = result.data.img;
						uni.showToast({
							title: result.message
						})
					}
				}
			});
			// #endif
		},
		// 获取验证码
		getCode(){
			if(this.codeBtnText!='获取验证码'){
				return;
			}
			let _this = this;
			if (_this.bloggerInfo.mobile == '' || _this.bloggerInfo.mobile.length !== 11) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号',
					duration: 2000
				});
				return;
			}
			let data = {
				phone: _this.bloggerInfo.mobile,
				type: 4,
				is_verifycode: 1
			};
			App._post_form('&do=PIN', data, res => {
				let timer_num = 60;
				let timeClock = setInterval(function() {
					timer_num--;
					_this.codeBtnText = timer_num + 's后重试';
					// _this.timeCount = timer_num;
					if (timer_num == 0) {
						clearInterval(timeClock);
						_this.codeBtnText='获取验证码';
					}
				}, 1000);
				_this.getSmsCode = res.data.code;
			});
		},
		closePreview(){
			this.bloggerInfo.screenshot = '';
		}
	}
};
</script>

<style lang="less" scoped>
.submitButton1 {
	width: 690upx;
	height: 80upx;
	background: #999999;
	border-radius: 40upx;
	pointer-events: none;
}
.personAttestation {
	padding-bottom: 100upx;
	font-size: 0;
	background-color: #f8f8f8;
}
.informationView {
	width: 690upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
	margin-top: 10px!important;
}
.marginAuto {
	margin: auto;
}
.mainView {
	width: 750upx;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.line {
	width: 8upx;
	height: 27upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 4upx;
}
.colorBlack {
	color: rgba(51, 51, 51, 1);
}
.font28 {
	font-size: 28upx;
}
.font24 {
	font-size: 24upx;
}
.inlineBlock {
	display: inline-block;
}
.verticalM {
	vertical-align: middle;
}
.marginL10 {
	margin-left: 10upx;
}
.marginL15 {
	margin-left: 15upx;
}
.p30 {
	padding: 30upx;
}
.marginT29 {
	margin-top: 29upx;
}
.inputView {
	width: 630upx;
	height: 83upx;
	background: rgba(250, 250, 250, 1);
	border-radius: 10upx;
	> text {
		display: inline-block;
		line-height: 83upx;
		width: 160upx;
		text-align: right;
		position: relative;
	}
	> text::before {
		content: '*';
		position: absolute;
		top: 2px;
		left: 6px;
		color: #f00;
	}
	> input {
		height: 100%;
		width: 365upx;
	}
}
.marginT18 {
	margin-top: 18upx;
}
.marginT30auto {
	margin: 30upx auto 0 auto;
}
.p0p50 {
	padding: 0 50upx;
}
.uploadButton {
	width: 160upx;
	height: 160upx;
	background: rgba(248, 248, 248, 1);
	border-radius: 10upx;
	border: 1px solid #e0e0e0;
}
.imageHave{
	width:630upx;
}
.flex {
	display: flex;
	justify-content: space-between;
}
.upLoadImg {
	width: 48upx;
	height: 48upx;
	margin: 56upx auto;
}
.textC {
	text-align: center;
}
.submitButton {
	width: 690upx;
	height: 80upx;
	background: #509DFD;
	border-radius: 40upx;
}
.marginT70auto {
	margin: 0upx auto 70upx auto;
}
.lineHeight80 {
	line-height: 80upx;
}
.colorW {
	color: rgba(255, 255, 255, 1);
}
.close {
	width: 32upx !important;
	height: 32upx !important;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 30;
}
</style>
