import { computed, defineComponent, ref } from "vue";
import styles from "./index.module.less";
import { Popup, Tab, Tabs } from "vant";
import List from "./list";
import { followData } from "/src/view/follow-practice";
import state, {IPlatform} from "/src/state";
import { evaluatingData } from "/src/view/evaluating";
import { getQuery } from "/src/utils/queryString";

const query: any = getQuery();
export const isMusicList = computed(()=>{
	return !(query.workRecord || query.modelType || state.platform === IPlatform.PC || query.isCbs)
})
export const musicListShow = ref(false)
export default defineComponent({
	name: "TheMusicList",
	setup() {
		return () => (
			<>
				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
					<div class={[styles.tabs]}>
						<Tabs>
							<Tab title="其他曲谱">
								<List />
							</Tab>
							<Tab title="最近练习">
								<List recentFlag={true} />
							</Tab>
						</Tabs>
					</div>
				</Popup>
			</>
		);
	},
});
