<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus';
import { ref } from "vue";
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
import BJ_Casino_Magnification from './components/BJ_Casino_Magnification.vue';
import Popup from './components/Popup.vue';
import { BJ_Casino_Data } from './script/BJ_Casino_Data';

let isLoading = ref(true)
const PopupVisible = ref(false)
const isBtn_No = ref(false)
const content = ref('666')
const enterStr = ref('確定')
const cancelStr = ref('取消')
const yesCallback: () => void = null
const noCallback: () => void = null
const PopupData = {
	content: content,
	enterStr: enterStr,
	cancelStr: cancelStr,
	yesCallback: yesCallback,
	noCallback: noCallback,
	isBtn_No: isBtn_No,
}
const self = {
	isLoading: isLoading,
	PopupVisible: PopupVisible,
	Popup: PopupData,
}
const BJ_Casino = new BJ_Casino_Data(self)

const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event)
}

getScreen();
function getScreen() {
	// 判断是否为移动端运行环境 
	if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
		if (window.location.href.indexOf("?mobile") < 0) {
			try {
				if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
					// 判断访问环境是 Android|webOS|iPhone|iPod|BlackBerry 则加载以下样式 
					console.log("style_mobile_a");
					setActiveStyleSheet("style_mobile_a.css");
				} else if (/iPad/i.test(navigator.userAgent)) {
					// 判断访问环境是 iPad 则加载以下样式 
					console.log("style_mobile_iPad");
					setActiveStyleSheet("style_mobile_iPad.css");
				} else {
					// 判断访问环境是 其他移动设备 则加载以下样式 
					console.log("style_mobile_other");
					setActiveStyleSheet("style_mobile_other.css");
				}
			} catch (e) { }
		}
	} else {
		BJ_Casino.IsMobile = false;
		// 如果以上都不是，则加载以下样式 
		console.log("style_mobile_no");
		setActiveStyleSheet("style_mobile_no.css");
	}
}

// 判断完毕后加载样式 
function setActiveStyleSheet(filename: string) {
	// document.write("<link href=../src/assets/" + filename + " rel=stylesheet>");
}
</script>

<template>

	<loading v-model:active="isLoading" :active.sync="isLoading" :can-cancel="false" :is-full-page="true"></loading>
	<div>
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="BJ_Casino_Rank 64 倍率" name="first">
				這是個參考用的排行榜 啾咪
				<BJ_Casino_Magnification :BJ_Casino="BJ_Casino" />
			</el-tab-pane>
			<!-- <el-tab-pane label="BJ_Casino_Rank贏分" name="second">
                <BJ_Casino_WinMoney :BJ_Casino="BJ_Casino" />
            </el-tab-pane> -->
		</el-tabs>
	</div>
	<!-- <BJ_Casino_Magnification /> -->

	<el-dialog v-model="PopupVisible" :show-close="false">
		<Popup :APP="self" />
	</el-dialog>
</template>

<style>
@import url('../src/assets/fonts.css');
@import url('../src/assets/style.css');

.el-tabs__nav {
	float: none;
}

.el-tabs__item {
	font-size: 18px;
}

#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 0px;
	font-family: 'Zen Maru Gothic', sans-serif;
}
</style>
