<template>
	<view class="page-container">
		<u--form label-width="auto" labelAlign="right"
			ref="uForm"
			:model="model"
			:rules="rules"
			:labelStyle="{
				fontSize: '28rpx',
				fontWeight: '500',
			}"
		>
			<u-cell-group :border="false">
				
				<u-cell :border="true" :isLink="false" :clickable="true">
					<view slot="value" class="value">
						<u-form-item label="用户昵称" prop="form.nickName" :required="true">
							<u--input
								v-model="model.form.nickName" 
								placeholder="请输入用户昵称" 
								border="none"
								type="text"
								:clearable="true"
								inputAlign="right"
							>
							</u--input>
						</u-form-item>
					</view>	
				</u-cell>
				
				<u-cell :border="true" :isLink="false" :clickable="true">
					<view slot="value" class="value">
						<u-form-item label="角色">
							{{renderItem(userInfo,'roles',[]).length>0 ?userInfo.roles[0].roleName : ''}}
						</u-form-item>
					</view>	
				</u-cell>
				
				<u-cell :border="true" :isLink="false" :clickable="true">
					<view slot="value" class="value">
						<u-form-item label="所属单位">
							{{renderItem(userInfo,'deptName','--')}}
						</u-form-item>
					</view>	
				</u-cell>
				
				<u-cell :border="true" :isLink="false" :clickable="true">
					<view slot="value" class="value">
						<u-form-item label="手机号码" prop="form.phonenumber" :required="true">
							<u--input
								v-model="model.form.phonenumber" 
								placeholder="请输入手机号码" 
								border="none"
								type="text"
								:clearable="true"
								inputAlign="right"
								maxlength="11"
							>
							</u--input>
						</u-form-item>
					</view>	
				</u-cell>
					
			</u-cell-group>
			
		</u--form>
		
		<view class="footer">
			<u-row style="margin-top: 40rpx;">
				<u-col :span="12" style="padding: 0 30rpx;">
					<u-button type="primary" shape="circle" 
            color="linear-gradient(to right, #41B5FF, #4573FC)" 
            :custom-style="{
							width: '100%',
							height: '38px'
						  }"  @click="handleSubmit">提交
					</u-button>
				</u-col>	
			</u-row>
		</view>
	</view>
</template>

<script>
import {updateUserProfile ,userProfile} from '@/api/common/user.js'

export default {
	components: {
	},
	data() {
		return {
			model: {
				  form: {
					nickName: "",
					phonenumber: "",
				  }
			},
			rules: {
				'form.nickName': [
					{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					},	
				],
				'form.phonenumber': [
					{
						type: 'string',
						required: true,
						message: '请输入手机号码',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				
			},
			userInfo: null,
		}
	},
	onLoad() {
		this.getUserInfo()
	},
	onShow() {
		
	},
	onHide() {
		
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)		
	},
	methods: {
		getUserInfo() {
			userProfile().then((res) => {
				this.userInfo = res.data
				this.model.form.nickName = res.data.nickName
				this.model.form.phonenumber = res.data.phonenumber
			})
		},
		// 提交
		async handleSubmit() {
			  this.$refs.uForm.validate().then(async res => {
					  let ajaxData = {
						  ...this.model.form,
					  }

					  let { data, code } = await updateUserProfile(ajaxData) 
					  
					  if (code == 0) {
							this.$modal.msgSuccess('修改成功')	
							// uni.navigateBack()
					  }	
				  
			  }).catch(errors => {
				  console.log('校验失败',errors)
			  })
		},
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	background: #fff;
	font-size: 28rpx;
	min-height: 100%;
	position: relative;
	.footer {
		padding: 10rpx 0;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}	


::v-deep {

	.u-cell__body {
		.u-cell__body__content {
			width: auto;
			flex: none;
			
		}
		
		.value {
			flex: 1;
			
			.u-form-item__body {
				padding: 0;
			}
		}
		.u-form-item__body__right__content__slot {
			flex: 1;
			justify-content: flex-end;
			text-align: right;
		}
	}
	
}
</style>
