<template>
	<view class="feedback-page">
		<view style="overflow-y: scroll;overflow: hidden;height: 1500rpx;">
			<!-- 公共组件-每个页面必须引入 -->
			<public-module></public-module>
			<view class="form-page">
				<u--form labelPosition="left" :model="feedbackData" :rules="rules" ref="myfeedBackFormRef">
					<u-form-item required label="主题" prop="feedbackInfo.title" borderBottom ref="item1">
						<u--input placeholder="请输入主题" v-model="feedbackData.feedbackInfo.title" border="none"></u--input>
					</u-form-item>
					<u-form-item required label="姓名" prop="feedbackInfo.name" borderBottom ref="item1">
						<u--input placeholder="请输入姓名" v-model="feedbackData.feedbackInfo.name" border="none"></u--input>
					</u-form-item>
					<u-form-item label="手机" prop="feedbackInfo.phone" borderBottom ref="item1">
						<u--input placeholder="请输入手机" v-model="feedbackData.feedbackInfo.phone" border="none"></u--input>
					</u-form-item>
					<u-form-item label="QQ" prop="feedbackInfo.qq" borderBottom ref="item1">
						<u--input placeholder="请输入QQ" v-model="feedbackData.feedbackInfo.qq" border="none"></u--input>
					</u-form-item>
					<u-form-item label="邮箱" prop="feedbackInfo.email" borderBottom ref="item1">
						<u--input placeholder="请输入邮箱" v-model="feedbackData.feedbackInfo.email" border="none"></u--input>
					</u-form-item>
					<view class="info">
						<view class="info-contain">
							<u-form-item label="反馈" prop="feedbackInfo.message" borderBottom ref="item1">
								<u--textarea placeholder="请输入反馈信息" v-model="feedbackData.feedbackInfo.message" count></u--textarea>
							</u-form-item>
						</view>
					</view>
					<view class="feed-back-text" style="margin: 15px 0px 0px -16rpx;">上传图片(最多6张)</view>
					<view class="info" style="margin-top: 15rpx;background: rgba(1, 1, 1, 0);">
						<view class="info-contain">
							<u-form-item label="图片" prop="feedbackInfo.images" borderBottom ref="item1">
								<u-upload :sizeType="compressed" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="6"></u-upload>
							</u-form-item>
						</view>
					</view>
				</u--form>
				<view style="width:427rpx;margin:0 auto;">
						<u-button class="buttonSty button-sty" shape="circle" type="primary" text="提交" customStyle="margin-top: 129rpx" @click="submit"></u-button>
					</view>
				</view>
				<!-- #ifdef MP -->
				<view style="height: 18rpx;"></view>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<view style="height: 52rpx;"></view>
				<!-- #endif -->
			</view>
			<view style="height: 20rpx;"></view>
			<f-tabbar></f-tabbar>
		</view>
	</view>
</template>

<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import baseUrl from '@/config/baseUrl.js';
import { mapState } from 'vuex';

export default {
	components: {
		fTabbar
	},
	data() {
		return {
			feedbackData: {
				feedbackInfo: {
					title: '',
					name: '',
					phone: '',
					qq: '',
					email: '',
					images: [],
					message: ''
				}
			},
			fileList1: [],
			rules: {
				'feedbackInfo.title': [
					{
						type: 'string',
						required: true,
						message: '请填写主题',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.chinese(value);
						},
						message: '主题必须为中文',
						trigger: ['change', 'blur']
					}
				],
				'feedbackInfo.name': [
					{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.chinese(value);
						},
						message: '姓名必须为中文',
						trigger: ['change', 'blur']
					}
				],
				'feedbackInfo.phone': [
					{
						type: 'number',
						required: true,
						message: '请填写手机号码',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				],
				'feedbackInfo.email': [
					{
						type: 'string',
						required: true,
						message: '请填写邮箱',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.email(value);
						},
						message: '邮箱不正确',
						trigger: ['change', 'blur']
					}
				],
				'feedbackInfo.message': [
					{
						type: 'string',
						required: true,
						message: '请填写意见反馈',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.chinese(value);
						},
						message: '意见反馈必须为中文',
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	onReady() {
		// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		this.$refs.myfeedBackFormRef.setRules(this.rules);
	},
	onLoad() {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			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) {
			let token;
			token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;
			// #ifdef H5
			token = window.sessionStorage.getItem('userInfo').isToken;
			// #endif
			if (!token) return uni.$u.toast('请登录后上传图片');
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: `${baseUrl.baseUrl}/yt/oss/upload`,
					filePath: url,
					name: 'file',
					header: {
						'content-type': 'multipart/form-data',
						Authorization: 'Bearer ' + token
					},
					formData: {},
					success: res => {
						setTimeout(() => {
							if (res) {
								let objImage = JSON.parse(res.data);
								if (this.feedbackData.feedbackInfo.images.length < 6) {
									this.feedbackData.feedbackInfo.images.push(objImage.fileStaticUri);
								}
								resolve(res.data?.fileStaticUri);
							}
						}, 1000);
					}
				});
			});
		},
		submit() {
			this.$refs.myfeedBackFormRef
				.validate()
				.then(res => {
					let contactInfo = {
						qq: this.feedbackData.feedbackInfo?.qq,
						email: this.feedbackData.feedbackInfo?.email,
						phone: this.feedbackData.feedbackInfo?.phone
					};
					let httpData = {
						title: this.feedbackData.feedbackInfo.title,
						name: this.feedbackData.feedbackInfo.name,
						contact: JSON.stringify(contactInfo),
						images: this.feedbackData.feedbackInfo.images.length == 0 ? '' : JSON.stringify(this.feedbackData.feedbackInfo.images),
						message: this.feedbackData.feedbackInfo.message
					};
					uni.$u.http
						.post('/yt/opinion', httpData)
						.then(res => {
							if (res) {
								uni.showToast({
									title: '意见反馈提交成功~',
									icon: 'none'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 500);
							}
						})
						.catch(e => {
							uni.$u.toast(e.data?.message);
						});
				})
				.catch(errors => {
					uni.$u.toast('校验失败');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.feedback-page {
	min-height: 100vh;
	background-color: #f8f9fa;
	padding-top: 9rpx;
	padding-left: 27rpx;
	overflow-y: scroll;
	overflow: hidden;
}
.form-page {
	width: 700rpx;
	background-color: #ffffff;
	border-radius: 10px;
	margin-top: 20rpx;
	padding-left: 15rpx;
	padding: 0 20rpx;
	height: 500rpx;
	.info {
		width: 700rpx;
		background-color: #ffffff;
		border-radius: 10px;
		margin-top: 80rpx;
		height: 256rpx;
		margin-left: -20rpx;
		.info-contain {
			margin: 0rpx 27rpx;
			/deep/ .u-line {
				display: none !important;
			}
			/deep/ .u-form-item__body__left__content__label {
				display: none !important;
			}
			/deep/.u-form-item__body__right {
				margin-left: -106rpx;
			}
			/deep/.u-textarea--radius {
				border: none !important;
			}
		}
	}
	/deep/.u-button--primary{
		background-color: #377DFF!important;
		border-color: #377DFF!important;
	}
}
//#ifndef MP
.buttonSty {
	margin-top: 30rpx !important;
}
//#endif


</style>