<script setup lang="ts">
import { ref } from "vue";
import '../assets/style.css';
import { BJ_Casino_Rank } from "../script/BJ_Casino_Rank";

let Title = ref("BJ_Casino_Rank");
let RankData = ref([]);
const self = {
    RankData: RankData
}
const Script = new BJ_Casino_Rank(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">名稱</th>
                    <th align="left">倍率</th>
                    <th align="left">機台</th>
                    <th align="left">桌號</th>
                </tr>
            </thead>
            <tbody>

                <tr v-for="(item, index) in RankData" :key="index">
                    <td>
                        <font size="5"><b>{{ item[0] }}</b></font>
                    </td>
                    <td align="left">
                        <font size="5"><b>{{ item[2][1] }}</b></font>
                    </td>
                    <td align="left">
                        <font size="5"><b>{{ Math.floor(item[1]) }}</b></font>
                    </td>
                    <td align="left">
                        <font size="5"><b>{{ item[3][0] }}</b></font>
                    </td>
                    <td align="left">
                        <font size="5"><b>{{ item[3][1] }}</b></font>
                    </td>
                </tr>

            </tbody>
        </table>  </div>
</template>