import { defineComponent } from "vue";
import icon_title from "./icon_title.png";
import icon_btn from "./icon_btn.png";
import icon_close from "./icon_close.png";
import styles from "./index.module.less";
import { Popup } from "vant";
import { api_back } from "/src/helpers/communication";
import { postMessage } from "/src/utils/native-message";

export default defineComponent({
	name: "TheVip",
	setup() {
		const close = () => {
			api_back();
		};
    
		return () => (
			<Popup
				teleport="body"
				closeOnClickOverlay={false}
				class={["popup-custom"]}
				show={true}
			>
				<div class={styles.container}>
					<img class={styles.close} src={icon_close} onClick={close} />
					<img class={styles.title} src={icon_title} />
					<div class={styles.content}>
						您还未领取<span style={{ color: "#FF5A56" }}>“乐器AI学练工具”</span>
						哦，如需继续使用，请领取～
					</div>
					<div class={styles.btns}>
						<img
							class={styles.btn}
							src={icon_btn}
							onClick={() => {
								postMessage({
									api: "openWebView",
									content: {
										url: `${location.origin.includes('192') ? 'https://test.lexiaoya.cn' : location.origin}/classroom-app/#/member-center`,
										orientation: 1,
									},
								});
							}}
						/>
						<div onClick={close}>暂不领取</div>
					</div>
				</div>
			</Popup>
		);
	},
});