import { defineComponent, reactive, ref, onMounted } from "vue";
import styles from "./index.module.less";
import iconClose from "../icons/close2.svg";
import { Button, Cell, Field, Tab, Tabs, showToast } from "vant";
import iconSubmit from "../icons/icon-submit.svg";
import { sysSuggestionAdd, getSuggestionList } from "/src/page-instrument/api";
import { storeData } from "/src/store";
import state, { IPlatform } from "/src/state";

export default defineComponent({
	name: "recommendation",
	emits: ["close"],
	setup(props, { emit }) {
		const suggestionTypeList = ref([] as any);
		const tags = ["识别不准", "无法评测", "不出评测结果", "曲谱不一致", "指法错误", "其他"];
		const recommenData = reactive({
			loading: false,
			active: "识别不准",
			message: "",
			suggestId: null,
		});
		// 获取建议类别
		const getTypeList = async () => {
			try {
				const res = await getSuggestionList({ rows: 9999, page: 1 });
				suggestionTypeList.value = res.data.rows || [];
			} catch (e) {
				//
			}
		};

		/** 提交意见反馈 */
		const handleSubmit = async () => {
			if (!recommenData.message || !recommenData.suggestId) {
				const desc = !recommenData.suggestId ? '请先选择问题类型' : '请先填写意见反馈'
				showToast({
					message: desc,
					position: "top",
				});
				return;
			}
			recommenData.loading = true;
			try {
				await sysSuggestionAdd({
					content: recommenData.message,
					type: "SMART_PRACTICE",
					suggestionTypeId: recommenData.suggestId,
					mobileNo: storeData.user?.phone
				});
				showToast({
					message: "意见反馈已提交",
					position: "top",
				});
				emit("close");
				recommenData.suggestId = null
				recommenData.message = ''
			} catch (error) {}
			recommenData.loading = false;
		};
		onMounted(() => {
			getTypeList();
		});
		return () => (
			<div class={[styles.content, state.platform === IPlatform.PC && styles.pcContent]}>
				{ state.platform === IPlatform.PC && <div class={'top_drag'}></div> }
				<Tabs lineHeight={0} color="#1A1A1A">
					<Tab title="意见反馈">
						<Cell border={false} title="请选择问题类型" />
						<div class={styles.tags}>
							{suggestionTypeList.value.map((item: any) => (
								<span
									class={[styles.tag, recommenData.suggestId === item.id && styles.active]}
									onClick={() => (recommenData.suggestId = item.id)}
								>
									{item.name}
								</span>
							))}
						</div>
						<Field
							v-model={recommenData.message}
							rows="2"
							autosize={{ maxHeight: 44 }}
							border={false}
							type="textarea"
							maxlength={200}
							placeholder="请详细描述您遇到的问题，以便我们尽快为您解决！"
							show-word-limit
						/>
						<Cell>
							<img class={styles.btn} src={iconSubmit} onClick={handleSubmit} />
						</Cell>
					</Tab>
				</Tabs>
			</div>
		);
	},
});