<template>
	<view class="content">
		<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top:20rpx"></text>
		<view class="band">
			<view class="contentItem">
				<text>姓名:</text>
				<input v-model="openForm.userNameChinese" class="user-input" type="text" placeholder="请输入姓名" :disabled="status == 3"/>
			</view>
			<view class="contentItem">
				<text>英文名:</text>
				<input class="user-input" v-model="openForm.userNameEnglish" maxlength="10" type="text"
					placeholder="请输入英文名" :disabled="status == 3"/>
			</view>
			<view class="contentItem">
				<text>手机号</text>
				<!-- userTel -->
				<text v-if="openForm.userTel == ''">{{openForm.userTel}}</text>
				<input v-else class="user-input" v-model="openForm.userTel" maxlength="10" type="text"
					placeholder="请输入手机号" :disabled="status == 3"/>
			</view>
			<view class="contentItem">
				<text>证件类型</text>
				<!-- <input v-model="openForm.userIdType" class="user-input" maxlength="10" type="text"
					placeholder="请输入证件类型" /> -->
				<picker v-if="erplizeList " @change="bindPickerChange($event,erplizeList)" :value="index"
					:range="erplizeList" range-key="name" :disabled="status == 3">
					<view style="background-color: white;">{{ erplizeList[index].name }}</view>
				</picker>
			</view>
			<view class="contentItem">
				<text>证件号</text>
				<input v-model="openForm.userIdNo" class="user-input" maxlength="20" type="text" placeholder="请输入证件号" :disabled="status == 3"/>
			</view>
			<view class="" style="margin-top: 20rpx;">
				<text>上传计划书</text>
			</view>
			<view class="" style="display: flex;margin-top: 20rpx;" v-if="openForm.fileName">
				<view class="" style="width: 20px;height: 30px;">
					<image class="imagegh" src="../../static/myteam/Pdf.png" mode=""></image>
				</view>
				<text style="margin-left: 10rpx;" @click="exportTo">{{openForm.fileName}}</text>
			</view>
			<view class="uploadpdf" v-if="status != 3">
				<view class="uploadimg">
					<text class="iconfont icon-weibiaoti553"></text>
					<p>点击添加计划书</p>
					<view class="uploadFileBox" v-if="status != 3">
						<uploadFile :deformats="formats" :opacity="0" ref="uploadRef" :widt="'100%'" :height="'320rpx'" :instantly="'true'" :requestVO="JSON.stringify(dataForm)" @sendPath="getPath"></uploadFile>
					</view>
				</view>
				<view class="footer-text">
					<text>(请上传pdf文件)</text>
				</view>
			</view>
		</view>
		<view class="footer" v-if="status != 3">
			<button class="user-button" @click="onsubmit()" :loading="loading" :disabled="loading">保存</button>
		</view>
		<view class="footer" v-else>
			<button class="user-button" @click="getBack()" :loading="loading" :disabled="loading">返回上一页</button>
		</view>
	</view>
</template>

<script>
	import {ref} from "vue";
	import uploadFile from "@/components/uploadFile/uploadFile.vue";
	import api from "@/api/api";
	export default {
		components:{uploadFile},
		data() {
			return {
				formats:'pdf',
				dataForm: {
					loginId: "1",
					targetType: "5",
					targetId: "1",
					targetNo: "7",
					targetUseFor: "12",
					targetSeq: "0"
				},
				openForm: {
					signupId: '',
					userTel: uni.getStorageSync('user_mobile'),
					userIdType: '1'
				},
				index: 0,
				loading: false,
				fileList: [],
				fileForm: {},
				erplizeList: null,
				status:'',
			}
		},
		onLoad(option) {
			this.status = option.status
			this.openForm.signupId = option.userSignupId
			
			this.geterpInitialize();
		},
		onShow() {
			
		},
		onBackPress() {
			uni.hideLoading();
		},
		methods: {
			goBack(){
				uni.navigateBack({  
					delta: 1  
				});
			},
			// 上传成功回调方法
			getPath(e,a){
				const param = JSON.parse(JSON.parse(e));
				this.openForm.fileName = a;
				this.openForm.planBookPdfUrl = param.data.filePath;
			},
			async getquerySignUpInfo() {
				let UserSignUpInfoQueryRequestVO = {
					userSignUpId:this.openForm.signupId
				}
				let res = await api.querySignUpInfo(UserSignUpInfoQueryRequestVO);
				 this.openForm = res.data;
				 this.openForm.userTel = res.data.userTel? res.data.userTel:uni.getStorageSync('user_mobile');
				 this.openForm.signupId = res.data.id;
				 for(let i =0;i<this.erplizeList.length;i++){
					 if(this.erplizeList[i].id==this.openForm.userIdType){
						 this.index=i;
					 }
				 }
			},
			getBack(){
				uni.navigateBack(1)
			},
			exportTo(){
				uni.navigateTo({
					url: '/pages/personalCenter/accountoperation/phonebinding?fileUrl='+ encodeURIComponent(this.openForm.planBookPdfUrl)
				})
			},
			// 获取证件类型
			async geterpInitialize() {
				let res = await api.erpInitialize();
				this.erplizeList = res.data.idTypes;
				this.getquerySignUpInfo();
			},
			bindPickerChange(e, storage) {
				this.openForm.userIdType = storage[e.detail.value].id
				this.index = e.detail.value;
			},
			onsubmit() {
				this.loading = true
				this.openForm.userIdType = this.openForm.userIdType?this.openForm.userIdType:'1'
				let requestVo = this.openForm
				// header:{
				// 	'content-type': 'application/json',
				// },
				api.uploadSignUpUserInfo(requestVo).then(res => {
					if(res['success']){
						// 
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
						//this.getquerySignUpInfo()
					}
					uni.showToast({
						title: res['message'],
						duration: 2000,
						icon: 'none'		
					});
					this.loading = false
				})
			},
			// 上传文件方法 -- 废弃
			uploadFile(event) {
				if(this.status == 3){
					uni.showToast({
						title: '不能进行上传操作',
						duration: 2000,
						icon: 'none'		
					});
					return false
				}else{
					
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		padding-top: 80rpx;
	}

	.signfile {
		display: flex;

	}

	.imagegh {
		width: 30rpx;
		height: 30rpx;
	}

	.user-input {
		text-align: right;
	}
	.icon-weibiaoti553{
		font-size: 120rpx;
		color: #627AB5;
	}
	.uploadimg {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.uploadFileBox{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.image {
			width: 50px;
			height: 43px;
		}
	}

	.user-textarea {
		border: 1px solid #C7C7C7;
		width: 540rpx;
		height: 270rpx;
		border-radius: 10rpx;
	}

	.band {
		margin: 0 20rpx;
		font-size: 26rpx;
	}

	.footer-text {
		text-align: center;
		margin-top: 10rpx;
		font-size: 20rpx;
		color: #666666;
	}

	.uploadpdf {
		width: 274px;
		height: 160px;
		background: #F8F8F8;
		border-radius: 2px 2px 2px 2px;
		opacity: 1;
		border: 1px solid #E3E3E3;
		margin: 10px auto;
	}

	.headportrait {
		width: 260rpx;
		height: 260rpx;
		border: 1rpx solid aqua;
		border-radius: 50%;
	}

	.contentItem {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #E4E4E4;
		padding: 10rpx;
	}

	.footer {
		width: 500rpx;
		height: 80rpx;
		opacity: 1;
		margin: 80rpx auto;
	}

	.user-button {
		color: #FFFFFF;
		background: #20269B;
		border-radius: 80px;
	}
</style>
