<template>
	<view class="container">
		<view class="card">
			<view class="title-wrap">
				<view class="title">问题和意见</view>
				<view class="right" @click="showSheet = true">快速键入</view>
			</view>
			<view class="ipt-wrap">
				<up-textarea v-model="form.content" placeholder="请详细描述你的问题和意见..." count></up-textarea>
			</view>
		</view>
		<view class="card">
			<view class="title-wrap">
				<view class="title">QQ/邮箱</view>
			</view>
			<view class="ipt-wrap">
				<up-input v-model="form.contact" placeholder="方便我们联系你 " count></up-input>
			</view>
		</view>
		<view class="btn">
			<up-button color="#ff7581" :loading="loaing" loading-text="提交中..." @click="confirmHandle">提交</up-button>
		</view>
		<up-action-sheet
			:actions="list"
			:show="showSheet"
			cancelText="取消"
			closeOnClickAction
			closeOnClickOverlay
			@close="showSheet = false"
			@select="selectSheet"
		></up-action-sheet>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { sendMessage } from '@/api/me/me.js';

const list = ref([
	{
		name: '界面显示错乱'
	},
	{
		name: '启动缓慢，卡出翔了'
	},
	{
		name: 'UI无法直视，丑哭了'
	},
	{
		name: '偶发性崩溃'
	}
]);
const showSheet = ref(false);

const loaing = ref(false);
const form = reactive({
	content: '',
	contact: ''
});

function selectSheet(e) {
	if (!form.content.length) {
		form.content = e.name;
	} else {
		form.content += `、${e.name}`;
	}
}

// 提交
async function confirmHandle() {
	try {
		if (!form.content) {
			uni.showToast({
				title: '请输入内容',
				icon: 'none'
			});
			return;
		}
		if (!form.contact) {
			uni.showToast({
				title: '请输入联系方式',
				icon: 'none'
			});
			return;
		}
		loaing.value = true;
		await sendMessage({
			content: JSON.stringify({ score: 5, ...form }),
			state: 2,
			title: form.contact
		});
		uni.showToast({
			title: '提交成功',
			icon: 'none',
			mask: true
		});
		setTimeout(() => {
			uni.navigateBack();
		}, 1000);
	} catch (error) {
		console.log(error);
	}
	loaing.value = false;
}
</script>

<style scoped lang="scss">
.container {
	padding: 0 20upx;
	font-size: 28upx;
}
.card {
	margin-bottom: 28upx;
	.title-wrap {
		padding: 28upx 0;
		color: #999;
		display: flex;
		justify-content: space-between;
	}
}
.btn {
	padding: 28upx 0;
}
</style>
