<template>
	<view class="evan-form-show">
		<view class="bottom-border flex-between">
			<view class="left-border"><text class="mgl10">基本信息</text></view>
			<text class="btn-col" @click="submitForm('form')">保存</text>
		</view>
		<uni-forms :value="formData" ref="form" validate-trigger="bind" err-show-type="toast">
			<uni-forms-item name="name" label="姓名">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入姓名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="gender" label="性别">
				<uni-data-checkbox v-model="formData.gender" :localdata="genderList"></uni-data-checkbox>
			</uni-forms-item>
			<uni-forms-item name="departments" label="部门">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="formData.departments" placeholder="请选择部门"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="positions" label="职位">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="formData.positions" placeholder="请输入职位"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="jobNumber" label="工号">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="formData.jobNumber" placeholder="请输入工号"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="birthday" label="生日">
				<picker class="disabled" disabled mode="date" :value="formData.birthday">
					<view class="picker-view flex-between">
						<text>{{formData.birthday ? formData.birthday : '请选择'}}</text>
						<text class="cuIcon-unfold lg text-gray"></text>
					</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item name="officePhone" label="办公电话">
				<uni-easyinput type="text" :inputBorder="true" v-model="formData.officePhone" placeholder="请输入办公电话"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required name="phone" label="手机号码">
				<uni-easyinput type="text" :inputBorder="true" v-model="formData.phone" placeholder="请输入手机号码"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required name="companyMail" label="公司邮箱">
				<uni-easyinput type="text" :inputBorder="true" v-model="formData.companyMail" placeholder="请输入公司邮箱"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="spareMail" label="备用邮箱">
				<uni-easyinput type="text" :inputBorder="true" v-model="formData.spareMail" placeholder="请输入备用邮箱"></uni-easyinput>
			</uni-forms-item>		
		</uni-forms>
	</view>
</template>

<script>
import utils from '@/components/evan-form/utils.js'
export default{
	data(){
		return{
			formData: {
				name: '',//姓名
				gender: '',//性别
				departments: '',//部门
				positions: '',//职位
				jobNumber: '',//工号
				birthday: '',//生日
				officePhone: '',//办公电话
				phone: '',//手机号
				companyMail: '',//公司邮箱
				spareMail: '',//备用邮箱
			},
			genderList: [{
				text: '男',
				value: 1
			},
			{
				text: '女',
				value: 0
			}],//性别列表
			rules: {
				phone: {
					rules: [{
						required: true,
						errorMessage: '请输入手机号码',
					},{
						validateFunction: function(rule, value, data, callback) {
							let pattern = /^1[3456789]\d{9}$/
							if (!pattern.test(value)) {
								callback('请输入正确的手机号码')
							}
							return true
						}
					}]						
				},
				companyMail: {
					rules: [{
						required: true,
						errorMessage: '请输入邮箱地址',
					},{
						format: 'email',
						errorMessage: '请输入正确的邮箱地址',
					}]
				}
			},
		}
	},
	mounted(){
		this.workUserMsg()
	},
	onReady() {
		this.$refs.form.setRules(this.rules)
	},
	methods: {
		// 用户信息
		async workUserMsg() {
			try{
				let res = await this.$http.get('/api-hrms/hrms/user/info');
				this.formData = res.data;
			}catch(err){
			}
		},
		// 修改信息
		submitForm(form) {
			this.$refs[form].submit()
				.then((res) => {
					let params = {
						companyMail: this.formData.companyMail,
						phone: this.formData.phone,
						gender: this.formData.gender,
						officePhone:this.formData.officePhone,
						spareMail:this.formData.spareMail,
						
					}
					this.$http.post('/api-hrms/hrms/user/update',params).then(res => {
						uni.switchTab({
						    url: '/pages/user/user'
						});
						uni.showToast({title: '编辑成功'})
					}).catch(function (error) {});
				}).catch((errors) => {
					
				})
		}	
	}
}
</script>

<style lang="scss" scoped>
.btn-col{
	color: #00B9FF;
}

/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}

	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 28rpx;
		line-height: inherit;
	}

	.example {
		padding: 0 30rpx 30rpx;
	}

	.example-info {
		padding: 30rpx;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 28rpx;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 30rpx;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 30rpx;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.example-info-text {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #3b4144;
	}

	.example-body {
		flex-direction: column;
		padding: 30rpx;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		height: 96rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.example {
		padding: 0 20rpx 20rpx;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 28rpx;
		color: #666;
		border: 2rpx #e5e5e5 solid;
		border-radius: 40rpx;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 40rpx;
		height: 70rpx;
	}

	.uni-textarea-border {
		padding: 20rpx;
		height: 160rpx;
	}

	.label-box {
		margin-right: 20rpx;
	}

	.transform-scale {
		transform: scale(0.7);
	}

	.button {
		margin: 20rpx auto;
	}
</style>
