import { defineComponent } from "vue";
import styles from "./index.module.less";
import noEarphone from "../icons/no_erji.png";
import youxianEarphone from "../icons/youxian_erji.png";
import lanyaEarphone from "../icons/lanya_erji.png";
import earphoneBtn from "../icons/confirm.png"
import { browser } from "/src/utils";

export default defineComponent({
	name: "earphone",
	emits: ["close"],
	props: {
		earphoneType: {
			type: String,
			default: "",
		},
	},	
	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={props.earphoneType === "有线耳机" ? youxianEarphone : props.earphoneType === "蓝牙耳机" ? lanyaEarphone : noEarphone} />
				<img class={styles.earphoneBtn} src={earphoneBtn} onClick={() => emit("close")} />
			</div>
		);
	},
});
