import { Popup } from "vant";
import { defineComponent, reactive } from "vue";
import icon_btn from "./image/icon_btn.png";
import icon_top from "./image/icon_top.png";
import styles from "./index.module.less";

/** 耳机提示框 */
export const HeadphoneData = reactive({
	open: false,
	toggle(value = true) {
		this.open = value;
	}
});

export default defineComponent({
	name: "Headphone",
	emits: ["close"],
	setup(props, { expose, emit }) {
		return () => (
			<Popup teleport="body" class={["popup-scale", styles.popup]} transition="van-scale" show={HeadphoneData.open} onClose={() => emit("close")}>
				<div class={styles.container}>
					<img class={styles.avatar} src={icon_top} />
					<div class={styles.content}>
						<div class={styles.title}>请佩戴有线耳机</div>
						<div class={styles.des}>佩戴有线耳机可以保证评测更准确～</div>
						<img class={styles.btn} src={icon_btn} onClick={() => HeadphoneData.toggle(false)} />
					</div>
				</div>
			</Popup>
		);
	},
});
