<template>
	<view class="content">
		<view class="lanBox">
			<view class="headbox">
				<view class="touxiang">
					<uni-file-picker :imageStyles="imageStyles" @select="handleimg" file-mediatype="image"
						disable-preview limit="1" :del-icon="false">
						<image v-if="memInfo.headimg" :src="memInfo.headimg" class="headimage" />
						<icon v-else class="headimage t-icon t-icon-nvtouxiang"></icon>
					</uni-file-picker>



				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">昵称</view>
				<view class="right">
					<input name="name" type="text" v-model="memInfo.name" placeholder="请输入昵称" class="name" />
					<icon class="iconfont icon-bianji" v-if="!memInfo.name"></icon>
					<icon class="iconfont icon-error" v-else @click="memInfo.name=''"></icon>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">性别</view>
				<view class="right">
					<picker mode="selector" :range="sexItem" @change="onsexArr">
						<view class="uni-input">{{!memInfo.sex?'请选择性别':memInfo.sex==1?'男':'女'}}</view>
						<icon class="iconfont icon-arrow-down"></icon>
					</picker>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">年龄</view>
				<view class="right">
					<picker mode="selector" :range="ageArr" @change="onageArr">
						<view class="uni-input">{{!memInfo.age?'请选择年龄':memInfo.age+'岁'}}</view>
						<icon class="iconfont icon-arrow-down"></icon>
					</picker>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">身高</view>
				<view class="right">
					<input type="digit" v-model="memInfo.height" placeholder="请输入身高" />
					<text>cm</text>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">体重</view>
				<view class="right">
					<input type="digit" v-model="memInfo.weight" placeholder="请输入体重" />
					<text>kg</text>
				</view>
			</view>
		</view>

		<view class="btn" @click="confirmInfo">提交</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				imageStyles: {
					width: 65,
					height: 65,
					border: {
						radius: '50%'
					},
				},
				ageArr: [],
				sexItem: [
					"男",
					"女"
				],
				isEdit: false,
				memInfo: {
					age: "",
					height: "",
					weight: "",
					sex: "",
					name: "",
					headimg: ""
				},
			};
		},
		computed: {
			...mapState(["user", "appTheme"]),
		},
		methods: {
			// 提交
			confirmInfo() {
				let that = this
				if (!this.memInfo.name) {
					this.$tools.msg("请输入昵称")
					return;
				}
				if (!this.memInfo.sex) {
					this.$tools.msg("请选择性别")
					return;
				}
				if (!this.memInfo.age) {
					this.$tools.msg("请选择年龄")
					return;
				}
				if (!this.memInfo.height) {
					this.$tools.msg("请输入身高")
					return;
				}
				if (!this.memInfo.weight) {
					this.$tools.msg("请输入体重")
					return;
				}
				// console.log("提交", this.memInfo)
				that.subInfo(this.memInfo)
			},
			subInfo(data) {
				let that = this
				that.$model.getsubmit(data).then(res => {
					if (res.code == 0) {
						that.$tools.msg("提交成功");
						uni.navigateBack({
							delta: 1
						});
					} else {
						that.$tools.msg(res.message);
					}
				});
			},
			//确定性别
			onsexArr(e) {
				this.memInfo.sex = this.sexItem[e.target.value] == "男" ? 1 : 2
			},
			// 确定年龄
			onageArr(e) {
				this.memInfo.age = this.ageArr[e.target.value]
			},
			// 上传头像
			handleimg(e) {
				let that = this
				that.memInfo.headimg = e.tempFilePaths[0]
			}
		},
		onLoad(options) {
			// 
			var agedata = []
			for (var i = 12; i <= 80; i++) {
				agedata.push(i);
			}
			this.ageArr = agedata
			// 编辑
			if (options.familayData) {
				let info = options.familayData
				this.memInfo = JSON.parse(info)
				this.isEdit = true
				console.log("编辑", this.memInfo)
			}
			// 添加
			if (options.type) {
				this.isEdit = false
				this.memInfo = {
					age: "",
					height: "",
					weight: "",
					sex: "",
					name: "",
					headimg: ""
				}
			}
		},
	};
</script>

<style scoped="scoped" lang="scss">
	.content {
		padding: 0 15px;
	}

	.lanBox {
		margin-top: 15px;
		padding: 15px 15px 0;
		width: calc(100% - 30px);
		background: #fff;
		border-radius: 10px;

		.headbox {
			text-align: center;
			position: relative;
			display: flex;
			justify-content: center;
			height: 65px;
			margin-bottom: 15px;

			.headimage {
				display: block;
				width: 65px;
				height: 65px;
				font-size: 65px;
				border-radius: 50%;
			}
		}
	}

	.lan {
		display: flex;
		align-items: center;
		font-size: 14px;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #f7f7f7;

		.left {
			width: 24%;
			text-align: left;
		}


		.right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 76%;
			height: 50px;
			position: relative;
			text-align: right;


			/deep/input {
				height: 50px;
				line-height: 50px;
				border: none;
				background: inherit;
				width: 100%;
			}

			.name {
				padding-right: 25px;
			}

			picker {
				width: 100%;
				text-align: right;
				border: none;
				margin-right: 8px;

				view {
					padding-right: 18px;
					color: #828282;
					font-size: 14px;
				}
			}

			text {
				display: inline-block;
				width: 30px;
				text-align: right;
				color: #828282;
			}

			.iconfont {
				color: #828282;
				position: absolute;
				right: 0px;
				top: 0;
				width: 30px;
				justify-content: flex-end;
			}
		}
	}

	.btn {
		color: #fff;
		width: 100%;
	}
</style>
