import { Popup } from "@varlet/ui";
import { defineComponent, ref } 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 { Progress } from "vant";
import { evaluatingData } from "/src/view/evaluating";
import icons from "../icons/index.json";
import imgs from "./index.json";
import iconBadge from "./img/icon-badge.svg";

export default defineComponent({
	name: "evaluatResult",
	emits: ["close"],
	setup(props, { emit }) {
		return () => (
			<div class={styles.evaluatResult}>
				<div class={styles.closeBtn} onClick={() => emit("close")}>
					<img src={icons["arrow-left-background"]} />
				</div>

				<div class={styles.headerButton}>
					<div class={styles.headBtn} onClick={() => emit("close", "update")}>
						保存演奏
					</div>
					<div class={styles.headBtn} style={{ display: storeData.platformType === "STUDENT" ? "block" : "" }} onClick={() => emit("close", "share")}>
						分享
					</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 class={styles.rightBadge} src={evaluatingData.resultData.clxImg} />
					</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 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} onClick={() => emit("close", "look")} />
					</div>
				</div>
			</div>
		);
	},
});