import { defineComponent, ref } from "vue";
import styles from "./index.module.less";
import iconBack from "../icons/icon-right-back.png";
import { Icon, ImagePreview, Tab, Tabs } from "vant";

export default defineComponent({
	name: "screenModel",
	emits: ["close"],
	setup(props, { emit }) {
		const apiUrls = {
			'dev': 'https://dev.kt.colexiu.com',
			'test': 'https://test.lexiaoya.cn',
			'online': 'https://kt.colexiu.com',
		}
		let environment: 'dev' | 'test' | 'test2' | 'online' = location.origin.includes('//dev') ? 'dev' : location.origin.includes('//test') ? 'test' : (location.origin.includes('//online') || location.origin.includes('//kt') || location.origin.includes('//mec')) ? 'online' : 'dev'
		const origin = /(localhost|192)/.test(location.host) ? "https://test.lexiaoya.cn" : apiUrls[environment];
		
		return () => (
			<>
				<img class={styles.closeBtn} src={iconBack} onClick={() => emit("close")} />
				<div class={styles.container}>
					<Tabs swipeable animated>
						<Tab name="投屏" title="投屏">
							<iframe src={`${origin}/classroom-app/#/guide`} />
						</Tab>
						<Tab name="帮助" title="帮助">
							<iframe src={`${origin}/classroom-app/#/help-center?platformType=ANALYSIS`} />
						</Tab>
					</Tabs>
				</div>
			</>
		);
	},
});