<template>
	<h-dark :title="t('feedback.title')"></h-dark>
	<view class="mx-[30rpx]">
		<view class="py-[20rpx]">
			{{t('feedback.type')}}
		</view>
		<view class="bg-[#2C326B] rounded-lg p-[24rpx] mb-[20rpx]">
			<u-radio-group v-model="formData.cid" :wrap="true">
				<u-radio v-for="(item, index) in data.cates" :key="index" :name="item.id" @change="handelChange(item)">
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>
		<view class="py-[20rpx]">
			{{t('feedback.opinion')}}
		</view>
		<view class="bg-[#2C326B] rounded-lg p-[24rpx]">
			<u-input v-model="formData.content" type="textarea" height="200" maxlength="256"
				:placeholder="t('feedback.opinionPlaceholder')" />
		</view>

	</view>
	<view class="max-w-[750px] fixed bottom-[50rpx] w-4/5 ml-[10%]">
		<u-button type="primary" @click="handleSubmit"> {{t('common.submit')}} </u-button>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue'
	import { feedback, getFeedbackCate } from '@/api/user'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('feedback.title') })

	const data = reactive<{
		cates : any[]
	}>({
		cates: [],
	})

	const formData = reactive({
		cid: '',
		content: '',
	})

	const getData = async () => {
		const res = await getFeedbackCate()
		data.cates = res.cates
		if (data.cates.length > 0) {
			formData.cid = data.cates[0]['id']
		}
	}
	const handelChange = async (item : any) => {
		formData.cid = item.id
	}

	const handleSubmit = async () => {
		if (!formData.cid) return uni.$u.toast(t('feedback.typeEmpty'))
		if (!formData.content) return uni.$u.toast(t('feedback.opinionEmpty'))
		await feedback(formData)
		formData.content = ''
		uni.$u.toast(t('feedback.feedbackSuccess'))
		setTimeout(() => {
			handleBack()
		}, 1500)
	}

	const handleBack = async () => {
		let canNavBack = getCurrentPages()
		if (canNavBack && canNavBack.length > 1) {
			uni.navigateBack()
		} else {
			history.back();
		}
	}
	getData()
</script>

<style lang="scss">
</style>