<style >
	.basicdata{
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
		padding: 20px 15px;
	}
	.basicdata .topbox .text-o{
		font-size: 25px;
		color: #111111;
		font-weight: Heavy;
	}
	.basicdata .topbox .text-t{
		font-size: 14px;
		color: #999999;
		margin-top: 14px;
		
	}
	.basicdata .basicdata-box .box-xingbie{
		padding: 30px 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	.basicdata .tx{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 13px;
		color: #999999;
	}
	.basicdata .tx-img{
		width: 228upx;
		height: 250upx;
		
	}
	.basicdata .tx-text{
		width: 200upx;
		height: 30px;
		background: #F8F8F8;
		border-radius: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		color: #999999;
	}
	.basicdata .btns{
		display: flex;flex-direction: row;align-items: center;justify-content: space-around;padding: 30px 20px;
	}
	.basicdata .xueli_item{
		margin-top: 17px;
		width: 100%;
		height: 80px;
		border-radius: 10px;
		background: #F8F8F8;
		display: flex;
		flex-direction: row;
		font-size: 15px;
		color: #111111;
	}
	.basicdata .xueli_item_l{
		width: 50%;
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.basicdata .xueli_item_r{
		width: 50%;
		height: 100%;
		
	}
	.basicdata .sfz{
		width: 100%;
		height: 130px;
		border-radius: 10px;
		margin-top: 15px;
		background: #F8F8F8;
		display: flex;
		flex-direction: row;
		padding: 17px 20px;
		justify-content: space-between;
	}
	.basicdata	.sfz-l-title{
		font-size: 17px;
		color: #111111;
		font-weight: bold;
		margin-top: 10px;
	}
	.basicdata .sfz-l-c{
		font-size: 12px;
		color: #999999;
		margin-top: 10px;	
	}
	.basicdata .sfz-r{
		width: 286upx;
		height: 97px;
		
	}
	.basicdata .input-style{
		width: 100%;
		height: 43px;
		margin-top: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid #E2E2E2;
	}
	.basicdata .input-style-l{
		width: 80px;
		font-size: 14px;
		color: #111111;
	}
	.basicdata .tjiao{
		width: 100%;
		height: 44px;
		margin-top: 35px;
		border-radius: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #FFFFFF;
	}
</style>
<template>
	<view class="basicdata">
		<view class="topbox" style="padding: 0 15px;" v-if='step!=5'>
			<view class="text-o">请告诉我您的情况</view>
			<view class="text-t">请真实选择身体的数值信息</view>
		</view>
		<view class="basicdata-box" style="padding: 0 15px;" v-show="step==1">
			<view class="box-xingbie">
				<view class="tx" @click="addmsg.gender=1">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/male-y.png" class="tx-img" v-if="addmsg.gender==1"></image>
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/male-n.png" class="tx-img" v-else></image>
					<view class="tx-text" :style="{'color':addmsg.gender==1?mainColor:'#999999','border':addmsg.gender==1?'1px solid '+mainColor:'none','box-shadow':addmsg.gender==1?'0 3px 8px 0px '+mainColor:'0'}">
						我是男生
					</view>
				</view>
				<view class="tx" @click="addmsg.gender=2">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/female-y.png" class="tx-img" v-if="addmsg.gender==2"></image>
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/female-n.png" class="tx-img" v-else></image>
					<view class="tx-text" :style="{'color':addmsg.gender==2?mainColor:'#999999','border':addmsg.gender==2?'1px solid '+mainColor:'none','box-shadow':addmsg.gender==2?'0 3px 8px 0px '+mainColor:'0'}">
						我是女生
					</view>
				</view>
			</view>
			<view class="box-birth">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rili.png" style="width: 13px;height: 13px;"></image>
					<text style="font-size: 13px;color: #888888;margin-left: 5px;">出生日期（年龄大于18岁）</text>
				</view>
				<view style="padding: 20px 0;">
					<mypicker mode="time"  v-model="showp" :params="params" :end-year='endyear' @confirm='getTime' :default-time='addmsg.birth'></mypicker>
				</view>
			</view>
		</view>
		<view style="padding: 0 15px;" v-if="step==2">
			<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;;margin-top: 35px;">
				<view style="display: flex;flex-direction: row;align-items: center">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-weight.png" style="width: 13px;height: 13px;"></image>
					<text style="font-size: 13px;color: #888888;margin-left: 5px;">体重(kg)</text>
				</view>
				<view style="display: flex;flex-direction: row;align-items: flex-end;color: #111111;">
					<text style="font-size: 14px;">{{addmsg.weight}}</text>
					<text style="font-size: 12px;margin-left: 5px;">kg</text>
				</view>
			</view>
			<scroll-choose @scroll="scroll" :scrollStart="weightStart" :scrollEnd="weightEnd" :scrollLeft="addmsg.weight" :maginL="maginL"></scroll-choose>
			<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;;margin-top: 35px;">
				<view style="display: flex;flex-direction: row;align-items: center">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-height.png" style="width: 13px;height: 13px;"></image>
					<text style="font-size: 13px;color: #888888;margin-left: 5px;">身高(cm)</text>
				</view>
				<view style="display: flex;flex-direction: row;align-items: flex-end;color: #111111;">
					<text style="font-size: 14px;">{{addmsg.height}}</text>
					<text style="font-size: 12px;margin-left: 5px;">cm</text>
				</view>
			</view>
			<scroll-choose @scroll="scroll2" :scrollStart="heightStart" :scrollEnd="heightEnd" :scrollLeft="addmsg.height" :maginL="maginL"></scroll-choose>
		</view>
		<view style="padding: 0 15px;" v-if="step==3">
			<view class="xueli_item" v-for="(x,y) in xuelist" :key='y' @click="addmsg.xueli= x.Id" :style="{'border':addmsg.xueli==x.Id?'1px solid '+mainColor:'none','box-shadow':addmsg.xueli==x.Id?'0 3px 8px 0px '+mainColor:'0'}">
				<view class="xueli_item_l">
					<image src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/xueilibg.png' style="width: 70px;height: 63px;position: absolute;left: 12px;bottom: 0;"></image>
					<image :src='x.img_y' v-if="addmsg.xueli==x.Id" style="width: 66px;height: 70px;margin-top: 5px;"></image>
					<image :src='x.img_n' v-else style="width: 66px;height: 70px;margin-top: 5px;"></image>
				</view>
				<view class="xueli_item_r">
					<view style="font-weight: bold;margin-top: 23px;">
						<text :style="{'color':addmsg.xueli==x.Id?mainColor:'#111111',}">{{x.name}}</text>
					</view>
					<view style="font-size: 12px;color: #A1A0A7;margin-top: 9px;">选此学历</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 15px;" v-if="step==4">
			<view class="xueli_item" v-for="(x,y) in marriagelist" :key='y' @click="addmsg.marriage= x.Id" :style="{'border':addmsg.marriage==x.Id?'1px solid '+mainColor:'none','box-shadow':addmsg.marriage==x.Id?'0 3px 8px 0px '+mainColor:'0'}">
				<view class="xueli_item_l">
					<image :src='xueilibg' style="width: 70px;height: 63px;position: absolute;left: 12px;bottom: 0;"></image>
					<image :src='x.img_y' v-if="addmsg.marriage==x.Id" style="width: 66px;height: 70px;margin-top: 5px;"></image>
					<image :src='x.img_n' v-else style="width: 66px;height: 70px;margin-top: 5px;"></image>
				</view>
				<view class="xueli_item_r">
					<view style="font-weight: bold;margin-top: 23px;">
						<text :style="{'color':addmsg.marriage==x.Id?mainColor:'#111111',}">{{x.name}}</text>
					</view>
					<view style="font-size: 12px;color: #A1A0A7;margin-top: 9px;">选此婚姻状态</view>
				</view>
			</view>
		</view>
		<view class="btns" :style="{'justify-content':step==1?'center':'space-around'}" v-if="step!=5">
			<image v-if="step!=1" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-left.png" style="width: 136upx;height: 136upx;" @click="laststep"></image>
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-right.png" style="width: 136upx;height: 136upx;" @click="nextstep"></image>
		</view>
		<view v-if="step==5">
			<view style="font-size: 17px;color:#111111;font-weight: bold;">请上传身份证正反面</view>
			<view class="sfz">
				<view>
					<view class="sfz-l-title">头像面</view>
					<view class="sfz-l-c">上传您的身份证头像面</view>
				</view>
				<view class="sfz-r" @click="upimg(1)">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/sfz-z.png" style="width: 100%;height: 100%;" v-if="addmsg.sfz_z==''"></image>
					<image :src="addmsg.sfz_z" style="width: 100%;height: 100%;" v-else></image>
				</view>
			</view>
			<view class="sfz">
				<view>
					<view class="sfz-l-title">国徽面</view>
					<view class="sfz-l-c">上传您的身份证国徽面</view>
				</view>
				<view class="sfz-r" @click="upimg(2)">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/sfz-f.png" style="width: 100%;height: 100%;" v-if="addmsg.sfz_f==''"></image>
					<image :src="addmsg.sfz_f" style="width: 100%;height: 100%;" v-else></image>
				</view>
			</view>
			<view style="font-size: 17px;color:#111111;font-weight: bold;margin-top: 20px;">请完善您的个人信息</view>
			<view class="input-style">
				<view class="input-style-l">姓名</view>
				<input type="text" v-model="addmsg.name" style="width: 1px;flex: 1;border: none;" placeholder='请输入姓名'>
			</view>
			<view class="input-style">
				<view class="input-style-l">身份证号</view>
				<input type="idcard" v-model="addmsg.IDNo" style="width: 1px;flex: 1;border: none;" placeholder='请输入本人身份证号'>
			</view>
			<view class="tjiao" :style="{background:mainColor}">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import mypicker from './components/picker.vue'
	import scrollChoose from './components/scroll-choose/scroll-choose.vue'
	
	import cwx from './components/profunc.js'
	export default{
		components:{
			mypicker,
			scrollChoose
		},
		data(){
			return{
				pageTitle:'基础资料',
				mainColor: '',
				secondary: '',
				step:1,
				addmsg:{
					gender:1,//性别
					birth:'1990-03-01',
					weight:60,
					height:160,
					xueli:0,
					marriage:0,
					sfz_z:'',
					sfz_f:'',
					name:'',
					IDNo:'',
				},
				endyear:'',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				 showp:false,
				weightStart: 30,//体重的开始值
				weightEnd: 200,//体重结束值
				heightStart: 30,//身高的开始值
				heightEnd: 250,//身高结束值
				maginL: 5,//线间距
				xuelist:[
					{Id:0,name:'高中及以下',img_n:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/gaozhong-n.png',img_y:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/gaozhong-y.png'},
					{Id:1,name:'大专',img_n:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/dazhuan-n.png',img_y:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/dazhuan-y.png'},
					{Id:2,name:'本科',img_n:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/benke-n.png',img_y:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/benke-y.png'},
					{Id:3,name:'硕士及以上',img_n:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/suoshi-n.png',img_y:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/suoshi-y.png'},
				],
				marriagelist:[
					{Id:0,name:'未婚',img_n:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weihui-n.png',img_y:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weihui-y.png'},
					{Id:1,name:'离异',img_n:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/liyi-n.png',img_y:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/liyi-y.png'},
					{Id:2,name:'丧偶',img_n:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/shangou-n.png',img_y:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/shangou-y.png'},
					
				],
				data:{},//百度的返回数据
			}
		},
		onLoad(options) {
			this.getBDtoken()
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			var myDate = new Date();
			this.endyear = myDate.getFullYear();
		},
		methods:{
			getTime(e){
				console.log(e)
			},
			laststep(){//上一步
				this.step--
			},
			nextstep(){//下一步
				this.step++
				if(this.step==5){
					uni.setNavigationBarTitle({
						title: '实名认证',
					});
				}
			},
			 scroll(val){//体重
				this.addmsg.weight = val
			},
			scroll2(val){//身高
				this.addmsg.height = val
			},
			getBDtoken(){
				var that = this;
				setTimeout(()=>{
					that.showp = true
				},10)
				 uni.showLoading({
				        title: '正在连接服务...'
				      })
				      return new Promise(resolve => {
				        uni.request({
				          url: 'https://aip.baidubce.com/oauth/2.0/token', // 百度获取token接口地址
				          data: {
				            'grant_type': 'client_credentials', // 固定写死
				            'client_id': 'QWTnMLORmrozodmfIyOjHGoB',
				            'client_secret': 'DcsUjSai1OnIHd61B2xIX4zlYqv8E1bP'
				          },
				          method: 'GET',
				          success(res) {
				            that.data = res.data
							uni.hideLoading()
				          },
				          fail(e) {
				            uni.hideLoading()
				            Modal.toast('连接服务出错，请稍后再试!')
				          }
				        })
				      })

			},
			upimg(type){//身份证上传
				var that = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success: function (res) {
						
				        //核心代码 身份证识别
				        wx.getFileSystemManager().readFile({
				          filePath: res.tempFilePaths[0],
				          encoding: 'base64', //编码格式
				          success(ans) {
				            wx.showLoading({ title: '识别中' })
				            wx.request({
				              url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + that.data.access_token,
				              method: 'POST',
				              header: {
				                'Content-Type': 'application/x-www-form-urlencoded'
				              },
				              data: {
				                image: ans.data,
				                id_card_side: 'front'
				              },
				              success(_res) {
				                wx.hideLoading();
				                console.log(_res.data)
								if(_res.data.image_status=='normal' && type==1){//身份证为正面
									that.upFile(res.tempFilePaths[0],type)
									that.addmsg.name = _res.data.words_result['姓名'].words?_res.data.words_result['姓名'].words:'';
									that.addmsg.IDNo = _res.data.words_result['公民身份号码'].words?_res.data.words_result['公民身份号码'].words:'';
								}
								if(_res.data.image_status=='reversed_side' && type==2){//身份证反面
									that.upFile(res.tempFilePaths[0],type)
								}
								if(_res.data.image_status=='normal' && type==2){
									wx.showToast({
									  title: '请上传反面身份证',
									  icon:'none'
									})
								}
								if(_res.data.image_status=='reversed_side' && type==1){
									wx.showToast({
									  title: '请上传正面身份证',
									  icon:'none'
									})
								}
								if(_res.data.image_status=='non_idcard' ){
									wx.showToast({
									  title: '上传的图片中不包含身份证',
									  icon:'none'
									})
								}
								if(_res.data.image_status=='blurred' ){
									wx.showToast({
									  title: '其他类型证照',
									  icon:'none'
									})
								}
								if(_res.data.image_status=='other_type_card' ){
									wx.showToast({
									  title: '身份证关键字段反光或过曝',
									  icon:'none'
									})
								}
								if(_res.data.image_status=='over_exposure' ){
									wx.showToast({
									  title: '身份证模糊',
									  icon:'none'
									})
								}
								if(_res.data.image_status=='over_dark' ){
									wx.showToast({
									  title: '身份证欠曝（亮度过低）',
									  icon:'none'
									})
								}
								if(_res.data.image_status=='unknown' ){
									wx.showToast({
									  title: '未知状态',
									  icon:'none'
									})
								}
				              }, fail(_res) {
				                wx.hideLoading();
				                wx.showToast({
				                  title: '请求出错',
								  icon:'none'
				                })
				                console.log(_res)
				              }
				            })
				          }
				        })  
				    }
				});
				     
			},
			upFile(img,type){
				//图片上传
				var that = this;
				wx.showLoading({ title: '上传中' })
				let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo").MallBaseId :1;
				let action = that.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
				uni.uploadFile({
					url: action,
					filePath: img,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						if (uploadFileRes.statusCode == 200) {
							let data = JSON.parse(uploadFileRes.data)
							if(type==1){
								that.addmsg.sfz_z = data.data
							}else{
								that.addmsg.sfz_f = data.data
							}
						}
					},
					fail: function(res) {
						console.log(res)
						wx.showToast({
							title: '上传失败!',
							icon: 'none',
							duration: 1000
						})
					}
				});
			}
			
		}
	}
</script>


