<template>
	<view class="feedback-page">
		<view class="hero-card">
			<TnIcon name="service" :size="54" color="#F97316" />
			<view>
				<text class="hero-title">帮助与反馈</text>
				<text class="hero-desc">告诉我们你遇到的问题或想要的功能。</text>
			</view>
		</view>

		<view class="form-card">
			<TnInput v-model="content" type="textarea" placeholder="请输入反馈内容..."
				:border="false" :max-length="500" />
		</view>

		<TnButton text-color="#FFFFFF" shape="round" :bold="true" :custom-style="primaryButtonStyle"
			width="100%" height="88" :font-size="28" @click="submitFeedback">
			提交反馈
		</TnButton>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'

const content = ref('')
const primaryButtonStyle = {
	background: 'linear-gradient(135deg, #F97316, #FB923C)',
}

function submitFeedback() {
	if (!content.value.trim()) {
		uni.showToast({ title: '请先填写反馈内容', icon: 'none' })
		return
	}
	const list = uni.getStorageSync('feedbackList') || []
	list.unshift({ content: content.value.trim(), createdAt: Date.now() })
	uni.setStorageSync('feedbackList', list)
	content.value = ''
	uni.showToast({ title: '感谢反馈', icon: 'success' })
}
</script>

<style lang="scss" scoped>
.feedback-page {
	min-height: 100vh;
	background: #F8FAFC;
	padding: 28rpx;
	box-sizing: border-box;
}

.hero-card,
.form-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
}

.hero-card {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 28rpx;
}

.hero-title {
	display: block;
	font-size: 36rpx;
	font-weight: 900;
	color: #0F172A;
}

.hero-desc {
	display: block;
	margin-top: 8rpx;
	font-size: 25rpx;
	color: #64748B;
}

.form-card {
	margin: 24rpx 0;
	padding: 24rpx;
	min-height: 260rpx;
}
</style>
