<script setup lang="ts">
import { ref } from 'vue';
import 'vue-loading-overlay/dist/vue-loading.css';
import BJ_ServerState from './components/BJ_ServerState.vue';
import { BJ_Casino_Data } from './script/BJ_Casino_Data';

const self = {}
let Title = ref("BJ_ServerState");
const BJ_Casino = new BJ_Casino_Data(self)

</script>

<template>
	<h1>
		{{ Title }}
	</h1>
	<div class="d-flex justify-content-center">
		<table class="table table-striped table-info table-hover">
			<thead>
				<tr>
					<th align="left">名稱</th>
					<th align="left">Host</th>
					<th align="left">Port</th>
					<th align="left">狀態</th>
				</tr>
			</thead>
			<tbody v-for="(item, index) in BJ_Casino.Config.ServerList" :key="index">
				<BJ_ServerState :BJ_Casino="BJ_Casino" :ID=index />
			</tbody>
			<!-- <BJ_ServerState :BJ_Casino="BJ_Casino" :ID=0 /> -->
		</table>
	</div>
</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>
