<template>
	<view style="height: 100vh;background: #F9FAFF;">
		<view class="myinfo-top">
			<navs :top='top' :page='pageName' :color='color'></navs>
		</view>
		<view class="myinfo-box">
			<view class="info">
				<view>
					<view class="">头像</view>
					<view style="flex: 1;text-align: right;padding-right: 23rpx;">
						<button type="default" plain="true" open-type="chooseAvatar" class="chavatar"
							@chooseavatar="chooseavatar">
							<image src="@/static/image/default-avatar.svg" mode=""></image>
						</button>
					</view>
					<view class="iconfont icon-tubiaoyanse"></view>
				</view>
				<view>
					<view class="">昵称</view>
					<view style="flex: 1;text-align: right;padding-right: 23rpx;">
						<input type="nickname" :value="wxname" @blur="inputWxName" class="nut-input-text" />
					</view>
					<view class="iconfont icon-tubiaoyanse"></view>
				</view>
				<view>
					<view class="">简介</view>
					<view style="flex: 1;text-align: right;padding-right: 23rpx;">
						<input type="text" :value="jianjie" class="nut-input-text" />
					</view>
					<view class="iconfont icon-tubiaoyanse"></view>
				</view>
				<view>
					<view class="">手机号</view>
					<view style="flex: 1;text-align: right;padding-right: 23rpx;">
						<input type="text" :value="telephone" class="nut-input-text" />
					</view>
					<view class="iconfont icon-tubiaoyanse"></view>
				</view>
				<view>
					<view class="">公司</view>
					<view style="flex: 1;text-align: right;padding-right: 23rpx;">
						<input type="text" :value="company" class="nut-input-text" />
					</view>
					<view class="iconfont icon-tubiaoyanse"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageName: '个人信息',
				color: 1,
				top: 0,
				wxname: '我是昵称',
				jianjie: '这人很懒，不想写简介',
				telephone: '1237899****',
				company: 'xxxx公司'
			};
		},
		onLoad() {
			this.top = uni.getMenuButtonBoundingClientRect().top;
		},
		methods: {
			chooseavatar: function(e) {
				const {
					avatarUrl
				} = e.detail;
				console.log('---头像', avatarUrl);
			},
			inputWxName: function(e) {
				this.wxname = e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	.myinfo-top {
		background-color: #fff;
		padding-bottom: 8rpx;
	}

	.myinfo-box {
		padding: 31rpx 30rpx 0;

		.info {
			padding: 0 25rpx;
			border-radius: 30rpx;
			background: #ffffff;

			>view {
				display: flex;
				color: #333;
				font-size: 28rpx;
				border-bottom: 1rpx solid #F0F0F0;
				height: 88rpx;
				line-height: 88rpx;

				&:first-child {
					height: 168rpx;
					line-height: 168rpx;
				}

				&:last-child {
					border: none;
					height: 96rpx;
					line-height: 96rpx;
				}

				.chavatar {
					width: 100%;
					height: 100%;
					background-color: #fff;
					padding: 0;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					image {
						width: 108rpx;
						height: 108rpx;
						border-radius: 50%;
					}
				}

				button[plain] {
					border: 0
				}

				.nut-input-text {
					width: 100%;
					height: 100%;
				}

				.icon-tubiaoyanse {
					font-size: 24rpx;
					color: #A4A4A4;
				}
			}
		}
	}
</style>
