<template>
	<view class="content">
		<view class="content-top">
					<view class='hs-box'>
						<view class="infoBox" style="margin-top: 17rpx;">
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									人身保险
								</view>
								<view class='hs-row-ft flex-center'>
									<text class="rightText">已上传</text>
									<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
								</view>
							</view>
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									健康证
								</view>
								<view class='hs-row-ft flex-center'>
									<text class="rightText">已上传</text>
									<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
								</view>
							</view>
						</view>
						<view class="infoBox" style="margin-top: 17rpx;">
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									服务区域
								</view>
								<view class='hs-row-ft flex-center'>
									<text class="rightText">建邺区</text>
									<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
								</view>
							</view>
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									回收分类
								</view>
								<view class='hs-row-ft flex-center'>
									<text class="rightText">电视回收、数码回收等<text class="colorText">3</text>个</text>
									<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
								</view>
							</view>
						</view>
						<view style="margin-top: 17rpx;" class="infoBox">
							<view class="modelLabel">
								资质证件
							</view>
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'  style="width: 180px;">高空作业证</view>
								 
								<view class='hs-list-na flex-center'>
									<view class="rightText2">待上传</view>
									<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
								</view>
							</view> 
							<view class='hs-list flex-between' @click="linkDetail('about')">
								<view class='hs-list-hd'  style="width: 180px;">电工证</view>
								<view class='hs-row-ft flex-center'>
									<!-- <text class="rightText">已上传</text> -->
									<view class="rightText2">待上传</view>
									<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
								</view>
							</view> 
							<view class='hs-list flex-between' @click="linkDetail('userProt')">
								<view class='hs-list-hd'  style="width: 180px;">焊工证</view>
								<view class='hs-row-ft flex-center'>
									<text class="rightText">已上传</text>
									<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
								</view>
							</view> 
							<view class='hs-list flex-between' @click="linkDetail('privacy')">
								<view class='hs-list-hd'  style="width: 180px;">绿色回收认证证书</view>
								<view class='hs-row-ft flex-center'>
									<text class="rightText">已上传</text>
									<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
								</view>
							</view> 
						</view>
						<!-- <view class="escLogin" @click="escLogin">退出登录</view> -->
						<view class="infoBox" style="margin-top: 17rpx;">
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									真实姓名
								</view>
								<view class='hs-row-ft flex-center'>
									<input v-model="userinfo.nickname" type="text" placeholder="请输入真实姓名"/>
									<!-- <u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon> -->
								</view>
							</view>
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									手机号码
								</view>
								<view class='hs-row-ft flex-center'>
									<input v-model="userinfo.mobile" type="text" placeholder="请输入手机号"/>
									<!-- <u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon> -->
								</view>
							</view>
						</view>
						<view class="infoBox" style="margin-top: 17rpx;" v-if="isConfigPassword">
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									原支付密码
								</view>
								<view class='hs-row-ft flex-center'>
									<input v-model="yuanPassword" type="password" placeholder="请输入原密码"/>
									<!-- <u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon> -->
								</view>
							</view>
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									新支付密码
								</view>
								<view class='hs-row-ft flex-center'>
									<input v-model="pay_password" type="password" placeholder="请输入新密码"/>
									<!-- <u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon> -->
								</view>
							</view>
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									确认密码
								</view>
								<view class='hs-row-ft flex-center'>
									<input v-model="rePassword" type="password" placeholder="请确认密码"/>
									<!-- <u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon> -->
								</view>
							</view>
						</view>
						<view class="infoBox" style="margin-top: 17rpx;" v-else>
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									支付密码
								</view>
								<view class='hs-row-ft flex-center'>
									<input v-model="pay_password" type="password" placeholder="请输入支付密码"/>
								</view>
							</view>
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'>
									确认密码
								</view>
								<view class='hs-row-ft flex-center'>
									<input v-model="rePassword" type="password" placeholder="请输入确认密码"/>
								</view>
							</view>
						</view>
					</view>
				</view>
		  <view style="height: 20rpx;"></view>
		<view class="button-bottom"> 
			<button class="btn btn-success" @click="checkPassword()"  >保存</button>
		</view>
	</view>
</template>


<script>  
	export default { 
		data() {
			return { 
				userinfo:{},
				headflag:false, 
				nickname:'微信用户', 
				avatar:'/static/img/t2.png', 
				isConfigPassword: false,
				yuanPassword: '',
				pay_password: '',
				rePassword: ''
			}
		},
		components:{ 
		},
		onLoad() { 
			this.userinfo = uni.getStorageSync('userInfo');  
			// this.getAgreement()
			this.checkPayPassword()
		},
		onShow() {
			var token = uni.getStorageSync('userToken');  
			if (!token) {
				return false;
			} 
			this.getauth()
		},
		methods: {
			checkPayPassword(){
				var _this = this;
				_this.$api.checkPayPassword({},res=>{
					if(res.code == '1'){ 
						console.log(res.data)
						this.isConfigPassword = res.data.has_pay_password
						// uni.showToast({ title: res.msg , icon: 'success' })
						
					}
				})
			},
			checkPassword() {
				var _this = this;
				if(this.isConfigPassword){
					_this.$api.verifyPayPassword({
						pay_password: this.yuanPassword
					},res=>{
						if(res.code == '1'){ 
							console.log(res.data)
							this.setConfig()
						}else{ 
							uni.showToast({ title: res.msg , icon: 'none' })
						}
					})
				}else{
					this.setConfig()
				}
			},
			setConfig() {
				var _this = this;
				if(this.pay_password != this.rePassword){
					uni.showToast({ title: '密码和确认密码不一致', icon: 'none' })
					return false;
				}
				let data = {
					realname: this.userinfo.nickname,
					mobile: this.userinfo.mobile,
					pay_password: this.pay_password
				}
				_this.$api.editperson(data,res=>{
					if(res.code == '1'){ 
						console.log(res.data)
						uni.showToast({ title: res.msg , icon: 'success' })
						
					}else{ 
						uni.showToast({ title: res.msg , icon: 'none' })
					}
				})
			},
			escLogin(){
				this.$api.escLogin({},res=>{
					if(res.code == '1'){   
						uni.removeStorageSync('userToken')
						uni.showToast({ title: res.msg , icon: 'success' })
						setTimeout(()=>{
							uni.navigateBack({
							  delta: 1
							})
						}, 2000)
					}else{ 
						uni.showToast({ title: res.msg , icon: 'fail' })
					}
				})
			},
			linkDetail(type){
				uni.navigateTo({
					url: '/pages/mine/detail?type='+type
				}) 
			},
			// getAgreement(){
			// 	var _this = this;
			// 	_this.$api.agreementInfo({},res=>{
			// 		if(res.code == '1'){ 
			// 			console.log(res.data)
			// 			// if(res.data.user.avatar){
			// 			// 	_this.avatar = res.data.user.avatar
			// 			// } 
			// 			_this.nickname = res.data.user.nickname
			// 			_this.userinfo = res.data.user
			// 		}else{ 
			// 		}
			// 	})
			// },
			getnicheng({detail}){
				this.nickname = detail.value ;
			},  
			getauth(){
				var _this = this;
				_this.$api.userInfo({},res=>{ 
					if(res.code == '1'){   
						if(res.data.user.avatar){
							_this.avatar = res.data.user.avatar
						} 
						_this.nickname = res.data.user.nickname
						_this.userinfo = res.data.user
					}else{ 
					}
				})
			},   
			getinfo(){
				var token = uni.getStorageSync('userToken');  
				if (token) {
					this.headflag = true 
					 
				}else{
					this.headflag = false
				}
			},  
			onChooseAvatar(e) { 
			    const { avatarUrl } = e.detail 
				this.edithead(avatarUrl  ); 
			},
			edithead(avatarUrl){ 
				var token =uni.getStorageSync('userToken');
				uni.uploadFile({
					url: this.$api.api_url + 'api/common/upload?token='+ token	,  
					filePath: avatarUrl,
					fileType: 'image',
					name: 'file',
					sizeType:['original','compressed'],
					headers: {
						'Accept': 'application/json',
						'Content-Type': 'multipart/form-data',
					},
					formData: {
						'method': 'images.upload',
						'upfile': avatarUrl
					},
					success: (res) => { 
						var res = JSON.parse(res.data);   
						  if(res.code == '1'){
							this.avatar = res.data.fullurl  
							uni.showToast({ title: res.msg , icon: 'success' })  
						}else{
							uni.showToast({ title: res.msg , icon: 'none' }) 
						}  
					},
					fail: (error) => {
						if (error && error.response) {
							uni.showToast({ title: error.response , icon: 'none' }) 
						}
					}, 
				}); 
			},
			toAdd(){ 
				if(this.avatar == '/static/img/t2.png' ){ 
					uni.showToast({ title: "请上传自己的头像" , icon: 'none' })  
					return false;
				}
				this.$api.edituser({
					avatar:this.avatar,
					nickname:this.nickname
				},res=>{ 
					if(res.code == '1'){
						 
						uni.showToast({ title: res.msg , icon: 'success' })  
						uni.navigateBack({
						  delta: 1
						})
						return false
					}else{
						uni.showToast({ title: res.msg , icon: 'none' }) 
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		padding: 8rpx 35rpx;
		background: #F5F5FA;
		height: 100%;
		overflow: auto;
	}
	.hs-row{
		width: 100%;
		margin-left: 0;
		padding: 40rpx 45rpx 40rpx 69rpx;
		border-radius: 30rpx;
	}
.hs-row-ft	button{
		height: 144rpx;
		width: 144rpx;
		padding: 0;
		border-radius: 50%;background-color: #fff;line-height: 108px;
		 
	}
.hs-row-ft	button::after{
		border: none;
	}
	
		.user-head {
			height: 140rpx;
		}
	
		.user-head-img {
			height: 90upx;
			width: 90upx;
			border-radius: 50%;
		}
	 
	
		.hs-row-na {
			color: #666;
			font-size: 26upx;    text-align: right;    padding-right: 15px;
    width: 100%;
		}
	
		.hs-hd {
			width: 160rpx;
		}
	
		.down {
			top: 50%;
			transform: translateY(-50%);
		}
		.infoBox{
			background: #fff;
			border-radius: 30rpx;
			overflow: hidden;
			padding: 10rpx 0 10rpx;
		}
		.hs-list{
			// padding: 33rpx 45rpx;
			margin: 33rpx 45rpx 0;
			padding-bottom: 33rpx;
			border-bottom: 1px solid #DEDEDE;
			overflow: hidden;
		}
		.hs-list:last-child{
			border-bottom: none;
		}
	.escLogin{
		padding: 40rpx 0;
		border-radius: 30rpx;
		background: #fff;
		text-align: center;
		font-weight: 500;
		font-size: 30rpx;
		color: #282F38;
		margin-top: 20rpx;
	}
	.rightText{
		font-weight: 400;
		font-size: 30rpx;
		color: #282F38;
	}
	.colorText{
		color:#FB8F0C;
	}
	.modelLabel{
		font-weight: bold;
		font-size: 32rpx;
		color: #282F38;
		padding: 42rpx 42rpx 20rpx;
	}
	.rightText2{
		width: 115rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: rgba(251,143,12,0.1);
		border-radius: 10rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FB8F0C;
	}
	.button-bottom{
		background: #fff;
		left: 0;
		padding: 10rpx 35rpx;
		height: unset!important;
	}
	.btn-success{
		background: linear-gradient(90deg, #FFAD38 0%, #FF884E 100%);
	}
</style>