import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch } from "vue";
import styles from "./index.module.less";
import iconTime from "./icon-time.png";
import request from "/src/utils/request";
import { getSecondRPM } from "/src/utils";
import state from '/src/state'
import { headTopData } from "/src/page-instrument/header-top/index";
import { followData } from "/src/view/follow-practice/index"

// 练习统计
export default defineComponent({
	name: "ExerciseStatistics",
	setup(props, ctx) {
		const data = reactive({
			isHidden: true,
			time: 0,
			timer: null as any,
		});
		const getTime = async () => {
			try {
				const res = await request.post("/tempLittleArtistTrainingCamp/getUserTrainingTime");
				if (res?.data) {
					data.time = res.data;
				}
			} catch (error) {}
		};

		const handleStart = () => {
			data.timer = setInterval(() => {
				data.time += 1;
			}, 1000);
		};
        const handleStop = () => {
            clearInterval(data.timer)
        }
        const showTime = computed(() => {
            return getSecondRPM(data.time)
        })
        watch(() => state.playState, () => {
            if (state.playState == 'play'){
                handleStart()
            } else if (state.playState == 'paused') {
                handleStop()
            }
        })
		// 监听跟练播放
		watch(() => state.hasFollowResult, () => {
			console.log('跟练录音11111',state.hasFollowResult,followData.start)
            if (followData.practiceStart && state.hasFollowResult){
                handleStart()
            } else if (!followData.practiceStart) {
                handleStop()
            }
        })		
		onMounted(() => {
			getTime();
		});
		return () => (
			<div class={[styles.exerciseStatistics, headTopData.modeType !== 'show' && styles.hidden]} onClick={() => (data.isHidden = !data.isHidden)}>
				<div class={[styles.btnTimeWrap, data.isHidden ? "" : styles.hide]}>
					<img class={styles.icon} src={iconTime} />
					<div class={styles.btnTietle}>练习时长</div>
					<div class={styles.timeTitle}>
						今日练习<span style={{ fontWeight: 500 }}>{showTime.value}</span>
					</div>
				</div>
			</div>
		);
	},
});
