<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;
		
	}
</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"  :params="params" :end-year='endyear' @confirm='getTime'></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-weight.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='xueilibg' 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="zfz_z" style="width: 100%;height: 100%;" v-if="addmsg.sfz_z==''"></image>
					<image :src="addmsg.zfz_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="zfz_f" 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>
	</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:5,
				addmsg:{
					gender:1,//性别
					birth:'1990-01-01',
					weight:60,
					height:160,
					xueli:0,
					marriage:0,
					sfz_z:'',
					sfz_f:'',
				},
				endyear:'',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				 
				weightStart: 30,//体重的开始值
				weightEnd: 200,//体重结束值
				heightStart: 30,//身高的开始值
				heightEnd: 250,//身高结束值
				maginL: 5,//线间距
				xuelist:[
					{Id:0,name:'高中及以下',img_n:require('./image/gaozhong-n.png'),img_y:require('./image/gaozhong-y.png')},
					{Id:1,name:'大专',img_n:require('./image/dazhuan-n.png'),img_y:require('./image/dazhuan-y.png')},
					{Id:2,name:'本科',img_n:require('./image/benke-n.png'),img_y:require('./image/benke-y.png')},
					{Id:3,name:'硕士及以上',img_n:require('./image/suoshi-n.png'),img_y:require('./image/suoshi-y.png')},
				],
				marriagelist:[
					{Id:0,name:'未婚',img_n:require('./image/weihui-n.png'),img_y:require('./image/weihui-y.png')},
					{Id:1,name:'离异',img_n:require('./image/liyi-n.png'),img_y:require('./image/liyi-y.png')},
					{Id:2,name:'丧偶',img_n:require('./image/shangou-n.png'),img_y:require('./image/shangou-y.png')},
					
				],
				xueilibg:require('./image/xueilibg.png'),
				zfz_z:require('./image/sfz-z.png'),
				zfz_f:require('./image/sfz-f.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++
			},
			 scroll(val){//体重
				this.addmsg.weight = val
			},
			scroll2(val){//身高
				this.addmsg.height = val
			},
			getBDtoken(){
				var that = this;
				 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;
				  cwx.OcrIdCard(that.data.access_token).then(function(_res){
					var trdata = _res.data.words_result;
					console.log(trdata)
					// that.setData({
					//   name: trdata['姓名'].words,
					//   idcard: trdata['公民身份号码'].words,
					//   userloc: trdata['住址'].words
					// })
				})      
			}
			
		}
	}
</script>


