<template>
	<view class="content">
		<view class="content-form">
			<u--form label-position="top" labelWidth="100" :model="model" :rules="rules" ref="form">
				<u-form-item
					required
					label="标题"
					prop="title"
					borderBottom
					:customStyle="{
						'flex-direction': 'row !important'
					}"
				>
					<u--input inputAlign="right" maxlength="-1" border="none" v-model="model.title" placeholder="请填写标题"></u--input>
				</u-form-item>
				<u-form-item required label="备注" prop="remarks" borderBottom>
					<u--textarea
						:customStyle="{
							marginTop: '20rpx',
							background: '#F5F5F5',
							border: 'none'
						}"
						v-model="model.remarks"
						placeholder="备注说明"
						height="128rpx"
					></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<u-button
			text="提交反馈"
			color="#2C66FF"
			:customStyle="{
				width: '710rpx',
				height: '80rpx',
				borderRadius: '10rpx',
				padding: '0rpx',
				position: 'absolute',
				bottom: '142rpx',
				left: '20rpx'
			}"
		></u-button>
	</view>
</template>

<script>
import apiBaseConfig from '@/config/index.js';
export default {
	data() {
		return {
			imgBgUrl: apiBaseConfig.imgBgUrl,
			globalData: getApp().globalData,
			scrollTopHeader: 0,
			model: {
				title: '',
				remarks: ''
			},
			rules: {
				title: {
					type: 'string',
					required: true,
					message: '请填写标题',
					trigger: ['blur', 'change']
				},
				remarks: {
					type: 'string',
					required: true,
					message: '请填写备注说明',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	onLoad() {},
	onReady() {
		//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
		this.$refs.form.setRules(this.rules);
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.content {
	&-form {
		margin: 30rpx 20rpx;
		width: calc(100% - 20rpx * 2);
		/deep/ .u-form {
			width: calc(100% - 20rpx * 2);
			margin: 0rpx 20rpx;
		}
	}
}
</style>