<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 BJ_Casino_WinMoney from './components/BJ_Casino_WinMoney.vue';
import { BJ_Casino_Data } from './script/BJ_Casino_Data';

let isLoading = ref(true)
const self = {
    isLoading: isLoading,
}
const BJ_Casino = new BJ_Casino_Data(self)

const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</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倍率" 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 /> -->
</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>
