import { defineComponent, onMounted, reactive, watch } from "vue";
import styles from "./index.module.less";
import state from "/src/state";
import icon1 from "../icons/1.png";
import { storeData } from "/src/store";
import { evaluatingData } from "/src/view/evaluating";
import icons from "../icons/index.json";
import imgs from "./index.json";
import iconBadge from "./img/icon-badge.svg";
import icon_expression0 from "./img/icon_expression0.svg";
import icon_expression1 from "./img/icon_expression1.svg";
import icon_expression2 from "./img/icon_expression2.svg";
import icon_expression3 from "./img/icon_expression3.svg";
import icon_expression4 from "./img/icon_expression4.svg";
import { getQuery } from "/src/utils/queryString";
import { browser, getBehaviorId } from "/src/utils";
import { api_musicPracticeRecordSave } from "../../api";
import { getAudioDuration } from "/src/view/audio-list";

export default defineComponent({
	name: "evaluatResult",
	emits: ["close"],
	setup(props, { emit }) {
		const query = getQuery();
		const data = reactive({
			saveLoading: true,
		});

		/** 添加评测记录 */
		const handleAddRecord = async () => {
			// console.log("结束", evaluatingData.resultData);
			const body = {
				deviceType: browser().android ? "ANDROID" : "IOS", // 设备类型
				intonation: evaluatingData.resultData.intonation, // 音准
				cadence: evaluatingData.resultData.cadence, // 节奏
				integrity: evaluatingData.resultData.integrity, // 完成度
				scoreData: JSON.stringify(evaluatingData.resultData.scoreData), // 评测数据
				behaviorId: getBehaviorId(), // 行为id
				sourceTime: getAudioDuration(), // 音频时长
				partIndex: state.partIndex, // 音轨
				speed: state.speed, // 速度
				practiceSource: query.workRecord ? "LESSON_TRAINING" : "EVALUATION", // 练习来源
				score: evaluatingData.resultData.score, // 分数
				clientType: storeData.user.clientType, // 客户端类型
				musicSheetId: state.examSongId, // 乐谱id
				feature: "EVALUATION", // 特征
				playTime: evaluatingData.resultData.playTime / 1000, // 播放时长
				heardLevel: state.setting.evaluationDifficulty, // 听力等级
				recordFilePath: evaluatingData.resultData.url, // 录音文件路径
			};
			data.saveLoading = true;
			const res = await api_musicPracticeRecordSave(body);
			if (res?.code === 200){
				evaluatingData.resultData.recordId = res.data
			}
			data.saveLoading = false;
		};

		onMounted(() => {
			handleAddRecord();
		});

		watch(() => evaluatingData.resulstMode, (val) => {
			if (val) {
				handleAddRecord();
			}
		})
		return () => (
			<div class={styles.evaluatResult}>
				<div class={styles.closeBtn} onClick={() => emit("close")}>
					<img src={icons["arrow-left-background"]} />
				</div>

				{
				!state.isHideEvaluatReportSaveBtn &&
				<div class={styles.headerButton}>
					<div class={[styles.headBtn, evaluatingData.resultData.recordId ? '' : styles.disabled]} onClick={() => emit("close", "update")}>
						保存演奏
					</div>
				</div>
				}

				<div class={styles.fraction}>
					<img class={styles.bg} src={imgs.bg} />
					<div class={styles.top}>
						{evaluatingData.resultData.score > 79 && (
							<img style={{}} class={styles.badge} src={iconBadge} />
						)}
						<div class={styles.text}>
							<div>
								<span class={styles.num}>{evaluatingData.resultData.score}</span>分
							</div>
							<div style={{ marginLeft: "6px" }}>{evaluatingData.resultData.clxmome}</div>
						</div>
						<img
							style={{ display: evaluatingData.resultData.leve === 0 ? "" : "none" }}
							class={styles.rightBadge}
							src={icon_expression0}
						/>
						<img
							style={{ display: evaluatingData.resultData.leve === 1 ? "" : "none" }}
							class={styles.rightBadge}
							src={icon_expression1}
						/>
						<img
							style={{ display: evaluatingData.resultData.leve === 2 ? "" : "none" }}
							class={styles.rightBadge}
							src={icon_expression2}
						/>
						<img
							style={{ display: evaluatingData.resultData.leve === 3 ? "" : "none" }}
							class={styles.rightBadge}
							src={icon_expression3}
						/>
						<img
							style={{ display: evaluatingData.resultData.leve === 4 ? "" : "none" }}
							class={styles.rightBadge}
							src={icon_expression4}
						/>
					</div>
					{state.isPercussion ? (
						<div class={styles.percussion}>
							<img class={styles.leftIcon} src={evaluatingData.resultData.img || icon1} />
							<div class={styles.scoreDes}>
								<span class={styles.scoreNum}>{evaluatingData.resultData.score}</span>分
								<span style={{ marginLeft: "8px" }}>{evaluatingData.resultData.mome}</span>
							</div>
						</div>
					) : (
						<div class={styles.detail}>
							<div class={styles.progressitem}>
								<div class={styles.intonation}>音准</div>
								<span>{evaluatingData.resultData.intonation}分</span>
							</div>
							<div class={styles.progressitem}>
								<div class={styles.cadence}>节奏</div>
								<span>{evaluatingData.resultData.cadence}分</span>
							</div>
							<div class={styles.progressitem}>
								<div class={styles.integrity}>完成度</div>
								<span>{evaluatingData.resultData.integrity}分</span>
							</div>
						</div>
					)}

					<div class={styles.tips}>{evaluatingData.resultData.clxtip}</div>
					<div class={styles.ctrls}>
						<img
							style={{ display: query.workRecord ? "none" : "" }}
							src={imgs.btn1}
							class={styles.ctrlsBtn}
							onClick={() => emit("close", "practise")}
						/>
						<img src={imgs.btn2} class={styles.ctrlsBtn} onClick={() => emit("close", "tryagain")} />
						<img
							src={imgs.btn3}
							class={[styles.ctrlsBtn, data.saveLoading ? styles.disablued : ""]}
							onClick={() => emit("close", "look")}
						/>
					</div>
				</div>
			</div>
		);
	},
});