<template>
	<view class="feedback-page">
		<view class="feedback-container">
			<!-- 公共组件-每个页面必须引入 -->
			<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>
						<u--input placeholder="请输入主题" v-model="feedbackData.feedbackInfo.title" border="none">
						</u--input>
					</u-form-item>
					<u-form-item required label="姓名" prop="feedbackInfo.name" borderBottom>
						<u--input placeholder="请输入姓名" v-model="feedbackData.feedbackInfo.name" border="none"></u--input>
					</u-form-item>
					<u-form-item required label="反馈" prop="feedbackInfo.message" borderBottom>
						<u--textarea placeholder="请输入反馈信息" v-model="feedbackData.feedbackInfo.message" count>
						</u--textarea>
					</u-form-item>
					<view class="feed-back-text upload-text">上传图片(最多6张)</view>
					<view class="info">
						<view class="info-contain">
							<u-form-item label="图片" prop="feedbackInfo.images" borderBottom>
								<u-upload :capture="capture" :fileList="fileList1" @afterRead="afterRead"
									@delete="deletePic" name="1" multiple :maxCount="6"></u-upload>
							</u-form-item>
						</view>
						<view class="info-button">
							<!-- #ifdef MP -->
							<u-button class="buttonSty button-sty" shape="circle" type="primary" text="提交"
								customStyle="margin-top: 280rpx" @click="submit"></u-button>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<u-button class="buttonSty button-sty" shape="circle" type="primary" text="提交"
								customStyle="margin-top: 880rpx" @click="submit"></u-button>
							<!-- #endif -->
						</view>
					</view>
				</u--form>
			</view>
			<!-- #ifdef MP -->
			<view style="height: 18rpx;"></view>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view style="height: 52rpx;"></view>
			<!-- #endif -->
		</view>
		<view style="height: 20rpx;"></view>
	</view>
	</view>
</template>

<script>
	import baseUrl from '@/config/baseUrl.js';
	import {
		mapState
	} from 'vuex';
	import api from '@/api/index.js'
	import { rules } from './config/data.js'
	import { UPLOAD_FILE_SIZE } from '@/constant/index.js'

	export default {
		data() {
			return {
				capture: ['album'],
				feedbackData: {
					feedbackInfo: {
						title: '',
						name: '',
						images: [],
						message: ''
					}
				},
				fileList1: [],
				rules
			};
		},
		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 => {
					if (item.size > UPLOAD_FILE_SIZE) {
						this[`fileList${event.name}`].push({
							...item,
							status: 'error',
							message: '上传失败'
						});
					} else {
						this[`fileList${event.name}`].push({
							...item,
							status: 'uploading',
							message: '上传中'
						});
					}
				});
				for (let i = 0; i < lists.length; i++) {
					const judgeImageSize = lists[0].size
					if (judgeImageSize > UPLOAD_FILE_SIZE) {
						return uni.$u.toast('图片限定5M')
					} else {
						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) => {
					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.statusCode === 200) {
									if (res.data) {
										let objImage = JSON.parse(res.data);
										if (this.feedbackData.feedbackInfo.images.length < 6) {
											this.feedbackData.feedbackInfo.images.push(objImage
												.fileStaticUri);
										}
										resolve(res.data?.fileStaticUri);
									}
								} else {
									return uni.$u.toast('图片上传失败')
								}
							}, 1000);
						}
					});
				});
			},
			submit() {
				this.$refs.myfeedBackFormRef
					.validate()
					.then(async res => {
						if (res) {
							let data = {
								title: this.feedbackData.feedbackInfo.title,
								name: this.feedbackData.feedbackInfo.name,
								images: this.feedbackData.feedbackInfo.images.length == 0 ? '' : JSON
									.stringify(
										this.feedbackData.feedbackInfo.images),
								message: this.feedbackData.feedbackInfo.message
							};
							const res = await api.feedbackApi.postFeedBackApi(data)
							uni.$u.toast('意见反馈提交成功~');
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						}
					})
					.catch(errors => {
						uni.$u.toast('请填写或者请填写正确格式的数据');
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "./static/feedback.scss";

	//#ifndef MP
	.buttonSty {
		margin-top: 30rpx !important;
	}

	//#endif
</style>