import { defineComponent } from "vue";
import styles from "./index.module.less";
import icons from "./images/index.json";
import icon_cancel from "./images/icon_cancel.svg";
import icon_confirm from "./images/icon_confirm.svg";
import microBg from "./images/microBg.png";
import microCancel from "./images/micro_cancel.png";
import microConfirm from "./images/micro_confirm.png";
import { browser } from "/src/utils";

export default defineComponent({
	name: "earphone",
	emits: ["close"],
	setup(props, { emit }) {
		// 资源类型
		const browserInfo = browser();
		const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browserInfo?.iPad || browserInfo.isTablet;
		return () => (
			<div class={[styles.earphoneBox, isPad && styles.ipadEarphoneBox]}>
				<img class={styles.earphoneBg} src={microBg} />
				<div class={styles.earphoneBtn}>
					<img class={styles.earBtn} src={microCancel} onClick={() => emit("close")} />
					<img class={styles.earBtn} src={microConfirm} onClick={() => emit("close")} />
				</div>
			</div>
		);
	},
});
