<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' @click="uploadClick('人身保险',1)">
									<text class="rightText" v-if="userinfo.personal_insurance">已上传</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'>
								<view class='hs-list-hd'>
									健康证
								</view>
								<view class='hs-row-ft flex-center' @click="uploadClick('健康证',2)">
									<text class="rightText" v-if="userinfo.health_certificate">已上传</text>
									<view class="rightText2">待上传</view>
									<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' @click="showArea = true">
									<text class="rightText">{{areaText}}</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' @click="showType = true">
									<text class="rightText">
										{{typeText}}
										<!-- 电视回收、数码回收等 -->
										<text class="colorText">{{typeLength}}</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' @click="uploadClick('高空作业证',3)">
									<view class="rightText" v-if="userinfo.high_altitude_certificate">>已上传</view>
									<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'>
								<view class='hs-list-hd'  style="width: 180px;">电工证</view>
								<view class='hs-row-ft flex-center' @click="uploadClick('电工证',4)">
									<!-- <text class="rightText">已上传</text> -->
									<view class="rightText" v-if="userinfo.electrician_certificate">已上传</view>
									<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'>
								<view class='hs-list-hd'  style="width: 180px;">焊工证</view>
								<view class='hs-row-ft flex-center' @click="uploadClick('焊工证',5)">
									<text class="rightText" v-if="userinfo.welder_certificate">已上传</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'>
								<view class='hs-list-hd'  style="width: 180px;">绿色回收认证证书</view>
								<view class='hs-row-ft flex-center' @click="uploadClick('绿色回收认证证书',6)">
									<text class="rightText" v-if="userinfo.green_recycle_certificate">已上传</text>
									<view class="rightText2">待上传</view>
									<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="请输入真实姓名"/>
								</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="请输入手机号"/>
								</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>
		<u-popup :show="showUpload" mode="center" :round="10">
			<view style="padding: 30rpx;width: 600rpx;">
				<view class="flex-between" style="margin-bottom: 0rpx;">
					<!-- <text>{{poptitle}}上传</text> -->
					<text></text>
					<u-icon @click="showUpload = false" name="close" color="#282F38" size="16" style="margin-left: 19rpx;"></u-icon>
				</view>
				<view class="uploadTitle">{{poptitle}}上传</view>
				<commonUpload @imgList="imgList" :maxCount='9'></commonUpload>
				<view class="flex-between" style="margin-top: 20rpx;">
					<view class="cancleBtn flex-center" @click="showUpload = false">取消</view>
					<view class="confirmBtn flex-center" @click="showUpload = false">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showType" mode="bottom" :round="10">
			<view style="padding: 30rpx;">
				<view class="flex-between" style="margin-bottom: 30rpx;">
					<!-- <text>{{poptitle}}上传</text> -->
					<view class="uploadTitle" style="margin-bottom: 0;">选择回收类型</view>
					<u-icon @click="showType = false" name="close" color="#282F38" size="16" style="margin-left: 19rpx;"></u-icon>
				</view>
				<u-checkbox-group
					v-model="checkType"
					placement="column"
					@change="checkboxChange"
				>
					<u-checkbox
						:customStyle="{marginBottom: '8px'}"
						v-for="(item, index) in typelist"
						:key="index"
						:label="item.name"
						:name="item.id"
					>
					</u-checkbox>
				</u-checkbox-group>
				<view class="flex-center" style="margin-top: 20rpx;">
					<view class="cancleBtn flex-center" @click="showType = false">取消</view>
					<view class="confirmBtn flex-center" @click="conformType" style="margin-left: 30rpx;">确定</view>
				</view>
			</view>
		</u-popup>
		<u-picker :show="showArea" :defaultIndex="[areaIndex]" :columns="[areaList]" keyName="name" @cancel="showArea=false" @confirm="confirmArea"></u-picker>
		<view style="height: 20rpx;"></view>
		<view class="button-bottom"> 
			<button class="btn btn-success" @click="checkPassword()"  >保存</button>
		</view>
	</view>
</template>


<script>  
	import commonUpload from '@/components/commonUpload.vue'
	export default { 
		data() {
			return { 
				userinfo:{},
				headflag:false, 
				nickname:'微信用户', 
				avatar:'/static/img/t2.png', 
				isConfigPassword: false,
				yuanPassword: '',
				pay_password: '',
				rePassword: '',
				areaList: [],
				showArea: false,
				showUpload: false,
				showType: false,
				areaIndex: 0,
				typelist: [],
				poptitle: '',
				checkType: [],
				imgStatus: '',
				typeText: '',
				typeLength: '',
				areaText: '',
				areaId: '',
				personal_insurance: '', // | 人身保险 |
				health_certificate: '', // | 健康证 |
				high_altitude_certificate: '', // | 高空作业证 |
				electrician_certificate: '', // | 电工证 |
				welder_certificate: '', // | 焊工证 |
				green_recycle_certificate: '' // | 绿色回收认证证书 |
			}
		},
		components:{ 
			commonUpload
		},
		onLoad() { 
			this.userinfo = uni.getStorageSync('userInfo');  
			// this.getAgreement()
			this.checkPayPassword()
			this.getdata()
		},
		onShow() {
			var token = uni.getStorageSync('userToken');  
			if (!token) {
				return false;
			} 
			this.getauth()
		},
		methods: {
			conformType(){
				console.log(this.checkType)
				this.showType = false
			},
			checkboxChange(res) {
				// setTimeout(()=>{
				// 	console.log(res,this.checkType,'gggg')
				// },2000)
				let arr = []
				console.log(res,this.typelist,'gggg')
				this.typelist.some((item,index)=>{
					console.log(item)
					if(res.indexOf(item.id)!=-1){
						arr.push(item.name)
					}
				})
				// console.log(arr,this.deelData(arr),'ggggggggg')
				this.typeText = this.deelData(arr);
				this.typeLength = res.length;
			},
			getdata(){
				let data = { 
				}
				this.$api.indexpage(data,res=>{ 
					if(res.code == '1'){
						this.typelist = res.data.type
					}
				})
			}, 
			confirmArea(val,i){
				console.log(val.value[0],i)
				this.areaId = val.value[0].id;
				this.areaText = val.value[0].name;
				this.areaList.some((item,index)=>{
					if(item.id == this.areaId){
						this.areaIndex = index;
					}
				})
				// let view = this.areaList.find(ele=> ele.id == this.areaId);
				// console.log(view,'gggg',this.areaIndex)
				this.showArea = false
			},
			selectArea(){
				console.log(this.userinfo)
				var _this = this;
				_this.$api.cityarealist({
					pid: this.userinfo.city_id
				},res=>{
					if(res.code == '1'){ 
						console.log(res.data)
						this.areaList = res.data
						res.data.some((item,index)=>{
							if(item.id == _this.userinfo.area_id){
								_this.areaIndex = index;
								console.log(index,'====')
							}
						})
						// uni.showToast({ title: res.msg , icon: 'success' })
						
					}
				})
			},
			uploadClick(val, type){
				this.showUpload = true;
				this.poptitle = val
				this.imgStatus = type
			},
			imgList(list){
				console.log(list,'jjj')
				switch(this.imgStatus){
					case 1:
					this.personal_insurance = list;
					break;
					case 2:
					this.health_certificate = list;
					break;
					case 3:
					this.high_altitude_certificate = list;
					break;
					case 4:
					this.electrician_certificate = list;
					break;
					case 5:
					this.welder_certificate = list;
					break;
					case 6:
					this.green_recycle_certificate = list;
					break;
				}
				// personal_insurance: this.personal_insurance, // | 人身保险 |
				// health_certificate: this.health_certificate, // | 健康证 |
				// high_altitude_certificate: this.high_altitude_certificate, // | 高空作业证 |
				// electrician_certificate: this.electrician_certificate, // | 电工证 |
				// welder_certificate: this.welder_certificate, // | 焊工证 |
				// green_recycle_certificate: this.green_recycle_certificate 
			},
			deelData(data){
				let str = ''
				data.some((item,index)=>{
					if(index==0){
						str += item
					} else if(index<2){
						str += ',' + item
					}
				})
				return str+'等'
			},
			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.yuanPassword){
					if(!this.pay_password){
						uni.showToast({ title: '请输入支付密码', icon: 'none' })
						return false;
					}
					if(!this.rePassword){
						uni.showToast({ title: '请输入确认密码', icon: 'none' })
						return false;
					}
					if(this.pay_password != this.rePassword){
						uni.showToast({ title: '密码和确认密码不一致', icon: 'none' })
						return false;
					}
					_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;
				
				let data = {
					// realname: this.userinfo.nickname,
					mobile: this.userinfo.mobile,
					// pay_password: this.pay_password,
					area_id: this.areaId,
					type_ids: this.checkType.join(","),
					personal_insurance: this.personal_insurance, // | 人身保险 |
					health_certificate: this.health_certificate, // | 健康证 |
					high_altitude_certificate: this.high_altitude_certificate, // | 高空作业证 |
					electrician_certificate: this.electrician_certificate, // | 电工证 |
					welder_certificate: this.welder_certificate, // | 焊工证 |
					green_recycle_certificate: this.green_recycle_certificate // | 绿色回收认证证书 |
				}
				if(this.pay_password){
					if(this.pay_password != this.rePassword){
						uni.showToast({ title: '密码和确认密码不一致', icon: 'none' })
						return false;
					}
					data.pay_password = this.pay_password
				}
				console.log('data',data)
				// return
				_this.$api.editperson(data,res=>{
					if(res.code == '1'){ 
						console.log(res.data)
						uni.showToast({ title: res.msg , icon: 'success' })
						setTimeout(()=>{
							uni.navigateBack({
							  delta: 1
							})
						}, 2000)
					}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
						// res.data.person
						this.typeText = this.deelData(res.data.person.type_ids_show)
						// res.data.person
						this.typeLength = res.data.person.type_ids_show.length
						_this.userinfo = res.data.person
						_this.areaId = res.data.person.area_id
						_this.areaText = res.data.person.area_ids_show
						_this.checkType = []
						let arr = res.data.person.type_ids.split(',')
						arr.some((item,index)=>{
							_this.checkType.push(Number(item))
						})
						_this.selectArea();
						console.log(_this.userinfo,'hhhhhh')
					}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%);
	}
	.cancleBtn{
		width: 260rpx;
		height: 90rpx;
		background: #F2F2F2;
		border-radius: 45rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #444444;
	}
	.confirmBtn{
		width: 260rpx;
		height: 90rpx;
		background: #FB8F0C;
		border-radius: 45rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.uploadTitle{
		margin-bottom: 30rpx;
		font-size: 33rpx;
		font-weight: 600;
	}
</style>