import { Transition, defineComponent, onBeforeUnmount, onMounted, ref } from "vue";
import styles from "./index.module.less";
import icons from "./icons.json";
import { followData, handleFollowEnd, handleFollowStart } from "/src/view/follow-practice";
import { Popup } from "vant";
import Microphone from "./microphone";
import state, { IPlatform } from "/src/state";
import PcEndIcon from "../header-top/image/pc_end_icon.png";
import { headImg } from "/src/page-instrument/header-top/image";

export default defineComponent({
  name: "follow-model",
  setup() {
    return () => (
      <>
        {/* <Transition name="pop-center">
					{!followData.start && (
						<div class={styles.startBtn} key="start">
							<img
								src={icons.start}
								onClick={() => {
									handleFollowStart();
								}}
							/>
						</div>
					)}
				</Transition>
				<Transition name="pop-center">
					{followData.start && (
						<div class={[styles.endBtn, state.fingeringInfo?.name && state.fingeringInfo.direction == 'transverse' && state.setting.displayFingering ? styles.top : styles.bottom, state.platform === IPlatform.PC && styles.pcEndBtn]} key="end">
							<img
								src={state.platform === IPlatform.PC ? PcEndIcon : icons.end}
								onClick={() => {
									handleFollowEnd();
								}}
							/>
						</div>
					)}
				</Transition> */}
        {/* 遮罩 */}
        {
          followData.isBeginMask && <div class={styles.beginMask}></div>
        }        
        <div class={[styles.operatingBtn, state.playBtnDirection === "left" ? styles.operatingLeft : ""]}>
          {!followData.start && (
            <img
              class={[styles.iconBtn, "follow-1"]}
              src={headImg("icon_play.png")}
              onClick={() => {
                followData.start = true;
                handleFollowStart();
              }}
            />
          )}
          {followData.start && (
            <>
              <img class={styles.iconBtn} src={headImg("icon_reset.png")} onClick={() => handleFollowEnd()} />
              <img class={styles.iconBtn} src={headImg("submit.png")} onClick={() => handleFollowEnd()} />
            </>
          )}
        </div>
        {/* <div style={{ display: followData.start ? "" : "none" }} class={styles.noteState}>
					<span style={{ background: "#ffca67" }} class={styles.dot}></span>
					<span>低</span>
					<span style={{ background: "rgb(255, 0, 0)" }} class={styles.dot}></span>
					<span>高</span>
				</div> */}
        <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={followData.earphone}>
          <Microphone
            onClose={() => {
              followData.earphone = false;
            }}
          />
        </Popup>
      </>
    );
  },
});