<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通過setRules方法設置rules規(guī)則 -->
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
			<u-form-item label="昵稱" prop="userInfo.userName" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.userName" border="none"></u--input>
			</u-form-item>
			<u-form-item label="頭像" prop="userInfo.userImg" borderBottom ref="item1">
				<u-avatar :src="model1.userInfo.userImg" shape="circle" v-model="model1.userInfo.userImg"
					@click="chooseTheImg()"></u-avatar>
			</u-form-item>
			<u-form-item label="性別" prop="userInfo.gender" borderBottom @click="showGender = true; hideKeyboard()"
				ref="item1">
				<u--input v-model="model1.userInfo.gender" disabled disabledColor="#ffffff" placeholder="請選擇性別"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="生日" prop="userInfo.birthday" borderBottom @click="showBirthday = true; hideKeyboard()"
				ref="item1">
				<u--input v-model="model1.userInfo.birthday" disabled disabledColor="#ffffff" placeholder="請選擇生日"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="簡介" prop="userInfo.intro" borderBottom ref="item3">
				<u--textarea placeholder="不低于3個字" v-model="model1.userInfo.intro" count></u--textarea>
			</u-form-item>
		</u--form>
		<u-button @click="submit">提交</u-button>
		<u-action-sheet :show="showGender" :actions="actions" title="請選擇性別" description="如果選擇保密會報錯"
			@close="showGender = false;genderClose()" @select="genderSelect()">
		</u-action-sheet>
		<u-datetime-picker :show="showBirthday" :value="birthday" mode="date" closeOnClickOverlay
			@confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				showGender: false, // 是否顯示性別選擇
				showBirthday: false, // 是否展示生日選擇
				model1: {
					userInfo: {
						userName: 'uView UI',
						gender: '',
						userImg: '/static/logo.png',
						birthday: '',
						intro: '',
					}
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					}

				],
				rules: {
					'userInfo.userName': {
						type: 'string',
						required: true,
						message: '請?zhí)顚戧欠Q',
						trigger: ['blur', 'change']
					},
					'userInfo.gender': {
						type: 'string',
						max: 1,
						required: true,
						message: '請選擇男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.userImg': {
						type: 'string',
						required: true,
						message: '請上傳頭像',
						trigger: ['blur', 'change']
					},
					'userInfo.birthday': {
						type: 'string',
						required: true,
						message: '請選擇生日',
						trigger: ['change']
					},
					'userInfo.intro': {
						type: 'string',
						required: true,
						message: '請?zhí)顚懞喗?,
						trigger: ['change']
					}
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			// 隱藏鍵盤
			hideKeyboard() {
				uni.hideKeyboard()
			},
			//選擇圖片
			chooseTheImg() {
				uni.chooseImage({
					count: 1, //圖片可選擇數(shù)量
					sizeType: ['original', 'compressed'], //original 原圖，compressed 壓縮圖，默認二者都有
					sourceType: ['album', 'camera', '海報圖庫'], //album 從相冊選圖，camera 使用相機，默認二者都有。
					success: res => {
						let imgFiles = res.tempFilePaths //圖片的本地文件路徑列表
						console.log('本地地址', imgFiles)
						this.uploadTheImg(imgFiles)
					}
				})
			},
			//上傳圖片
			uploadTheImg(imgFiles) {
				uni.uploadFile({
					url: `XXXXXX`, //后端用于處理圖片并返回圖片地址的接口
					header: {
						"Content-Type": "multipart/form-data", // formdata提交格式
					},
					filePath: imgFiles[0],
					name: 'uploadfile', // 默認
					formData: { // 其他的formdata參數(shù)
						fileType: '2',
						uid: '10001',
						fileContainerName: 'default'
					},
					success: res => {
						let data = JSON.parse(res.data) //返回的是字符串，需要轉成對象格式，打印data如下圖
						if (data.code == 200) {
							console.log(data.msg) //圖片地址
						}
					},
					fail: () => {}
				})
			},
			// 顯示性別列表并校驗性別是否為那女
			genderSelect(e) {
				this.model1.userInfo.gender = e.name
				this.$refs.form1.validateField('userInfo.gender')
				// 校驗頭像是否上傳
				// this.$refs.form1.validateField('userInfo.userImg')
			},
			// 性別選擇關閉,校驗是否選擇性別
			genderClose() {
				this.$refs.form1.validateField('userInfo.gender')
			},
			// 生日選擇關閉時校驗生日格式以及是否為空
			birthdayConfirm(e) {
				this.showBirthday = false
				this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.$refs.form1.validateField('userInfo.birthday')
			},
			// 生日列表關閉時校驗是否為空			
			birthdayClose() {
				this.showBirthday = false
				this.$refs.form1.validateField('userInfo.birthday')
			},
			submit() {
				this.$refs.form1.validate().then(res => {
					console.log("提交表單信息:" + JSON.stringify(this.model1.userInfo))
					// uni.$u.toast('校驗通過')
					// 調用服務端入表接口
				}).catch(errors => {
					console.log("失敗信息:" + JSON.stringify(errors))
					// uni.$u.toast('校驗失敗')
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校驗規(guī)則中含有方法等，只能通過setRules方法設置規(guī)則。
			this.$refs.form1.setRules(this.rules)
		}

	};
</script>

<style lang="scss">

</style>

<u-input  placeholder="請輸入密碼" customStyle="border: 5rpx solid #36373d;border-radius: 20rpx;"></u-input>

photo: [
          {
            // 自定義驗證函數(shù)，見上說明
            validator: (rule, value, callback) => {
              if (this.form.imgUrl) {
                return true
              }
              if (!this.form.imgUrl) {
                return false
              }
            },
            message: '請選擇圖片',
            // 觸發(fā)器可以同時用blur和change
            trigger: ['blur', 'change'],
          },
        ],