<!--
 * @Author: XHC
 * @Date: 2025-05-26 11:59:36
 * @LastEditors: XHC
 * @LastEditTime: 2025-05-29 14:03:25
 * @Description: 系统反馈
-->
<template>
	<div class="feedback">
		<view class="tips">
			<view class="tips-icon"><uni-icons fontFamily="iconfont" color="#387ABC" size="20">{{'&#xe627;'}}</uni-icons> </view>
			<text>为更好解决问题，问题发生时请立即反馈。</text>
		</view>
		<uni-card :is-shadow="false">
			<uni-forms ref="feedbackForm" :modelValue="formData" :rules="rules">
				<uni-forms-item name="radio">
					<uni-section class="section" title="反馈类型" type="line"></uni-section>
					<uni-data-checkbox mode="tag" v-model="formData.radio" :localdata="radioData"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item name="described">
					<uni-section class="section" title="问题描述" type="line"></uni-section>
					<uni-easyinput type="textarea" v-model="formData.described" placeholder="请输入问题描述" />
				</uni-forms-item>
				<uni-forms-item name="imageValue">
					<uni-section class="section" title="问题截图" type="line"></uni-section>
					<uni-file-picker limit="9" v-model="formData.imageValue"><uni-icons type="camera-filled" color="#004894" size="50"></uni-icons></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item name="type">
					<uni-section class="section" title="问题类型" type="line"></uni-section>
					<uni-data-select v-model="formData.type" :localdata="range" placeholder="请输入问题类型"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item name="datetime">
					<uni-section class="section" title="发生时间" type="line"></uni-section>
					<uni-datetime-picker type="datetime" return-type="timestamp" v-model="formData.datetime" placeholder="请输入发生时间"/>
				</uni-forms-item>
			</uni-forms>
		</uni-card>
		<button type="primary" @click="submit('feedbackForm')">提交</button>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 表单数据
let feedbackForm = ref(null)
let formData = reactive({
	radio: 0,
	described: '',
	imageValue: [],
	type: '',
	datetime:''
})
// 单选数据
let radioData = reactive([
	{ text: '功能异常', value: 0 },
	{ text: '总结与意见', value: 1 },
])
// 下拉数据
let range = reactive([
	{ value: 0, text: "类型1" },
	{ value: 1, text: "类型2" },
])
// 表单校验
let rules = reactive( {
	// email: {
	// 	rules: [{
	// 		required: true,
	// 		errorMessage: '域名不能为空'
	// 	}, {
	// 		format: 'email',
	// 		errorMessage: '域名格式错误'
	// 	}]
	// }
})

// 表单提交
const submit = (ref) => {
	ref.value.validate().then(res => {
		console.log('success', res);
		uni.showToast({
			title: `校验通过`
		})
	}).catch(err => {
		console.log('err', err);
	})
}
</script>

<style lang="scss" scoped>
.feedback {
	.tips {
		border-radius: 10rpx;
		background: #ffffff3f;
		margin: 30rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		color: #fff;
		font-weight: 700;
		.tips-icon {
			background: #fff;
			border-radius: 50%;
			padding: 10rpx;
			margin: 10rpx;
		}
	}
	
	:deep(uni-button) {
		margin: 0 60rpx;
	}

	
}
</style>