<template>
	<view class="feedback-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="form-page">
			<u--form labelPosition="left" :model="feedbackData" :rules="rules" ref="form1">
				<u-form-item required label="主题" prop="userInfo.name" borderBottom ref="item1">
					<u--input placeholder="请输入主题" v-model="feedbackData.userInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item required label="姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="手机" prop="userInfo.name" borderBottom ref="item1">
					<u--input placeholder="请输入手机" v-model="feedbackData.userInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="QQ" prop="userInfo.name" borderBottom ref="item1">
					<u--input placeholder="请输入QQ" v-model="feedbackData.userInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="邮箱" prop="userInfo.name" borderBottom ref="item1">
					<u--input placeholder="请输入邮箱" v-model="feedbackData.userInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="图片" prop="userInfo.name" borderBottom ref="item1">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="6"></u-upload>
				</u-form-item>
				<u-form-item label="反馈" prop="userInfo.name" borderBottom ref="item1">
					<u--textarea placeholder="请输入反馈信息" v-model="feedbackData.intro" count></u--textarea>
				</u-form-item>
			</u--form>
			<u-button class="buttonSty" shape="circle" type="primary" text="提交" customStyle="margin-top: 17rpx" @click="submit"></u-button>
			<!-- #ifdef MP -->
			<view style="height: 18rpx;"></view>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view style="height: 72rpx;"></view>
			<!-- #endif -->
		</view>
		<view style="height: 20rpx;"></view>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';

export default {
	components: {
		fTabbar
	},
	data() {
		return {
			feedbackData: {
				userInfo: {
					name: '',
					intro: ''
				}
			},
			fileList1: []
		};
	},
	onLoad() {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	methods: {
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.feedback-page {
	min-height: 100vh;
	background-color: #f8f9fa;
	padding-top: 9rpx;
	padding-left: 27rpx;
}
.form-page {
	width: 700rpx;
	background-color: #ffffff;
	border-radius: 20px;
	margin-top: 20rpx;
	padding-left: 15rpx;
	padding: 0 20rpx;
}
//#ifndef MP
.buttonSty {
	margin-top: 80rpx !important;
}
//#endif
</style>