<template>
	<!-- 意见反馈 -->
	<view class="snapshot">
		<uni-forms :modelValue="formData" :rules="rules" ref="valiForm">
			<uni-forms-item label="您的意见" required label-width="100%" name="describ">
				<uni-easyinput type="textarea" autoHeight v-model="formData.describ" placeholder="请输入您的意见" />
			</uni-forms-item>
			<uni-forms-item label="现场图片(最多3张)" required label-width="100%" name="coverPhotosFileList">
				<UploadImage
					ref="imagesUp"
					:saveFileArr="formData.coverPhotosFileList"
					:limit="3"
					:refField="'complaintPhotos'"
					:refType="'public_project_miniuser_comment'"
				/>
			</uni-forms-item>
			<button type="primary" @click="submitData">提交意见反馈</button>
		</uni-forms>
	</view>
</template>

<script setup name="snapshot">
import { ref } from 'vue';
import { wechartSuggestAdd } from '@/utils/homeApi.js';
import { onTabItemTap } from '@dcloudio/uni-app';
import UploadImage from '@/pages/components/imageUpload.vue'; //公共上传图片

const valiForm = ref(null);
const imagesUp = ref(null);
const formData = ref({
	describ: null,
	coverPhotosFileList: [],
	openId: uni.getStorageSync('openidXGWXMN')
});
const rules = ref({
	describ: {
		rules: [{ required: true, errorMessage: '意见不能为空' }]
	},
	coverPhotosFileList: {
		rules: [{ required: true, type: 'array', errorMessage: '请上传图片' }]
	}
});

// 提交意见
function submitData() {
	valiForm.value
		.validate()
		.then((res) => {
			wechartSuggestAdd(formData.value).then((res) => {
				uni.showToast({
					icon: 'none',
					title: '提交成功'
				});
				formData.value.coverPhotosFileList = [];
				formData.value.describ = null;
				imagesUp.value.clearImages(); //图片清空
			});
		})
		.catch((err) => {
			console.log('err', err);
		});
}

onTabItemTap((e) => {
	formData.value.coverPhotosFileList = [];
	formData.value.describ = null;
});
</script>

<style lang="scss">
.snapshot {
	padding: 30rpx;

	.uni-forms-item {
		display: flex;
		font-size: 30rpx;
	}

	.uni-forms-item.is-direction-left {
		flex-direction: column;
	}
}
</style>