<template>

	<view>

		<NavBar ref="nav" navTitle="真实信息" :showIcon="true" :supportChange="false">
		</NavBar>

		<loading-state ref="pageView" @request="request">

			<view @click="remark()" class="menu-item">
				<text class="text">姓名</text>
				<text class="explain">{{page.realName}}</text>
				<image class="more" src="../../static/more.png"></image>
			</view>

			<view class="line-thin"></view>

			<view @click="clickSex()" class="menu-item">
				<text class="text">性别</text>
				<text class="explain">{{page.sex}}</text>
				<image class="more" src="../../static/more.png"></image>
			</view>

			<view class="line-thin"></view>

			<uni-datetime-picker style="flex: 1;margin-top: 1px;" type="date" :value="page.birthDay" :start="startDate"
				:end="endData" v-model="page.birthDay" :disabledDate="[]">
				<view class="menu-item">
					<text class="text">生日</text>
					<text class="explain">{{stringIsEmpty(page.birthDay) ?"请选择生日":page.birthDay}}</text>
					<image class="more" src="../../static/more.png"></image>
				</view>
			</uni-datetime-picker>

			<view class="line-thin"></view>
			<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
				<view class="menu-item">
					<text class="text">地区</text>
					<text class="explain">{{stringIsEmpty(page.regionName) ?"请选择地区":page.regionName}}</text>
					<image class="more" src="../../static/more.png"></image>
				</view>
			</pick-regions>

			<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B); position: absolute; bottom: 30px;
				width: 90%;border-radius: 100rpx;height: 80rpx;display: flex;margin-left: 5%;
				flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;"
				@click="realInfoAttestation">
				保存</view>

		</loading-state>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改姓名" :value="page.realName" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>

	</view>


</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		created() {
			this.startDate = this.TimeFormat(this.CurrentMillions() - 100 * 365 * 24 * 60 * 60 * 1000);
			this.endData = this.TimeFormat(this.CurrentMillions());
		},
		data() {
			return {
				region: [],
				defaultRegion: ['北京市', '市辖区', '东城区'],
				defaultRegionCode: '110101',
				region_sid_path: "",
				address_path: "北京市/市辖区/东城区",
				startDate: "1921-01-01",
				endData: "",
				pickerDate: "",
				page: {
					"birthDay": "",
					"realName": "",
					"regionCode": "",
					"regionName": "",
					"sex": ""
				},
				contorl: {
					listSex: ["男", "女"]
				},
			}
		},
		onLoad(options) {
			this.request()
		},
		methods: {
			// 修改姓名
			remark() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				this.page.realName = val
			},
			request() {
				let _this = this
				_this.$api.getRealInfo(getApp().globalData.sid).then((resp) => {
					console.log(JSON.stringify(resp));
					_this.page = resp
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})
				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},
			clickSex() {
				let _this = this;
				uni.showActionSheet({
					itemList: this.contorl.listSex,
					success: function(res) {
						_this.selectSex(res.tapIndex + 1)
					}
				});
			},
			selectSex(id) {
				let _this = this
				switch (id) {
					case 1:
						this.page.sex = '男'
						break;
					case 2:
						this.page.sex = '女'
						break;
					case 3:
						break
				}
			},
			modibirthDay(e) {
				this.page.birthDay = e
			},
			realInfoAttestation() {
				this.page.userSid = getApp().globalData.sid
				let _this = this
				_this.$api.saveRealInfo(this.page).then((resp) => {
					uni.$emit("real-info")
					uni.navigateBack()
				}).catch(e => {
					console.log(e);
				})
			},
			// 获取选择的地区
			handleGetRegion(region) {
				let code = region.map(item => item.code)
				let name = region.map(item => item.name)
				this.page.regionCode = code[2]
				this.page.regionName = name[0] + "/" + name[1] + "/" + name[2]
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f2f3;
	}


	.menu-item {
		height: 112rpx;
		width: auto;
		display: flex;
		flex-direction: row;
		background-color: #fff;
		align-items: center;
		padding-left: 36rpx;
		padding-right: 36rpx;
	}

	.more {
		width: 35rpx;
		height: 35rpx;
		float: right;
	}

	.menu-item .icon {
		width: 69rpx;
		height: 35rpx;
	}

	.menu-item .text {
		font-size: 32rpx;
		color: #101010;
		flex: 1;
		float: left;
	}

	.menu-item .explain {
		font-size: 28rpx;
		color: #828282;
		margin-right: 10rpx;
	}

	.line-thin {
		height: 1rpx;
		width: 100%;
		background-color: #eee;
	}
</style>