<template>
 <view style="width: 100%;height: 100%;background-color: #FFFFFF;">
		<!-- 头像 -->
		<view style="padding: 36rpx 28rpx;" class="flex align-center justify-around">
			<view style="width: 80%;font-size: 28rpx;background-color: ;">头像</view>
			<view class="flex align-center">
				<image style="border-radius: 50%;margin-right:20rpx;width: 88rpx;height: 88rpx;"  @click="ChooseImage" :src='imgList[0]' mode='aspectFill'></image>
				<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
			</view>
		</view>
		<!-- 个人标签 -->
		<view style="margin: 36rpx 28rpx;" class="flex align-center justify-around">
			<view style="width: 40%;font-size: 28rpx;">个人标签</view>
			<view class="flex align-center" style="width: 60%;">
				<u-input v-model="value" type="text" :placeholder="placeholder1" input-align="right" :clearable="false"
				 :customStyle="inputStyle" />
			</view>
		</view>
		<!-- 服务简介和输入域 -->
		<view style="margin: 40rpx 28rpx;">
			<view style="font-size: 28rpx;margin-bottom: 20rpx;">服务简介</view>
			<view style="">
				<textarea @blur="bindTextAreaBlur" style="height: 200rpx;width: 100%;" :placeholder="placeholder2" />
				</view>
		</view>
		<!-- 分隔 -->
		<u-gap height="30" bg-color="#e1e1e1"></u-gap>
		<!-- 修改密码 -->
		<view style="padding: 36rpx 28rpx;" class="flex align-center justify-around" @click="next">
			<view style="width: 95%;font-size: 28rpx;background-color: ;">修改密码</view>
			<view class="flex align-center">
				<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottomButton" @click="bc">
			保存
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					//头像数组
					imgList:[],
					//头像
					src:'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png',
					// 标签输入
					value: '',
					//标签样式
					inputStyle:{
						width:'420rpx',
					},
					//标签占位符
					placeholder1:'请输入个人标签，用于展示给患者',
					//输入域值
					areaValue:'',
					//输入域占位符
					placeholder2:'请填写服务范围、经验等信息，用于展示给患者。'
				}
			},
			methods: {
				//修改密码
				next(){
					uni.navigateTo({
						url:'modifypassword'
					})
				},
				//输入框焦点消失事件
				bindTextAreaBlur({detail}){
					console.log(detail.value)
					this.areaValue = detail.value
				},
				//保存按钮
				bc(e){
					uni.switchTab({
						url:'/pages/index/index'
					})
				},
				ChooseImage() {
				    uni.chooseImage({
				     count: 1, //默认9
				     sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				     sourceType: ['album', 'camera'], //从相册选择
				     success: (res) => {
				      this.imgList = res.tempFilePaths
				     }
				    });
				   },
			}
		}
</script>

<style>
	page{
		background-color: #e1e1e1;
	}
	.bottomButton {
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #0B73B9;
			color: #FFFFFF;
			font-size: 32rpx;
			z-index: 1;	
		
	}

</style>
