<template>
	<view class="cotainer">
		<view class="orderForm">
			<u-form :model="form" ref="uForm">
				<u-form-item label="联系人" label-width="150" required prop="name" label-position="left">
					<u-input v-model="form.name" placeholder="请填写联系人" />
				</u-form-item>
				<u-form-item label="联系电话" label-width="150" required prop="mobile" label-position="left">
					<u-input v-model="form.mobile" placeholder="请填写联系电话" />
				</u-form-item>
				<u-form-item label="意见反馈" required prop="content" label-position="top">
					<u-input v-model="form.content" placeholder="请填写意见反馈" type="textarea" />
				</u-form-item>
			</u-form>
			<view class="orderForm-btn">
				<u-button type="primary" @click="submit">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		isMobile,
		isNull
	} from '@/common/util.js'
	export default {
		data() {
			return {
				form: {
					name: '',
					mobile: '',
					content:''
				},
				showArea: false,
				rules: {
					content: [{
						required: true,
						message: '请填写意见反馈',
						trigger: ['blur'],
					}],
					name: [{
						required: true,
						message: '请填写联系人',
						trigger: ['blur'],
					}],
					mobile: [{
						required: true,
						message: '请填写联系电话',
						trigger: ['blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);

		},
		onLoad() {
			
		},
		methods: {
			
			submit() {
				this.$refs.uForm.validate(valid => {
					
					if (valid) {
						this.$u.api.saveFeedback(this.form).then(res=>{
							toast('提交成功')
							setTimeout(function(){
								uni.redirectTo({
									url:"/pages/me/me"
								})
							},1500)
						})

					} else {
						console.log('验证失败');
					}
				});
			}
		}

	}
</script>

<style lang="scss">
	.cotainer {
		padding: 40rpx;
		.orderForm {
			&-address {
				height: 72rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 72rpx;
				padding-top: 20rpx;
				position: relative;

				text {
					text {
						position: absolute;
						left: -16rpx;
						vertical-align: middle;
						color: #fa3534;
						padding-top: 6rpx;
					}
				}
			}

			&-btn {
				margin: 40rpx;
			}
		}
	}
</style>