import { defineComponent, reactive } from "vue";
import styles from "./index.module.less";
import icon_menu from "./icon_menu.png";
import { Popup, Tab, Tabs } from "vant";
import List from "./list";

export default defineComponent({
	name: "TheMusicList",
	setup() {
		const data = reactive({
			show: false,
		});
		return () => (
			<>
				<div class={styles.fixedBtn} onClick={() => (data.show = true)}>
					<img src={icon_menu} />
				</div>
				<Popup position="right" v-model:show={data.show} round>
					<div class={styles.tabs}>
						<Tabs>
							<Tab title="其他曲谱">
                                <List />
                            </Tab>
							<Tab title="最近练习">内容 2</Tab>
						</Tabs>
					</div>
				</Popup>
			</>
		);
	},
});