{% extends "base.html" %}

{% block content %}
<style>
    /* 📌 背景画像を設定 */
    body {
        background-image: url("{{ url_for('static', filename='img/background.webp') }}");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    /* 📌 `content-container` のサイズ調整 */
    .content-container {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px 20px;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        max-width: 1920px;
        width: 100%;
        min-height: 500px;
        height: auto;
    }

    /* 📌 `table-responsive` に高さを指定してスクロールを可能にする */
    .table-responsive {
        max-height: 600px;
        overflow-y: auto;
    }

    /* 📌 h2 の余白を調整 */
    .content-container h2 {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 1.8rem;
    }

    /* 📌 デフォルトでテーブル全体を中央揃えに */
    table {
        text-align: center;
    }
    th, td {
        text-align: center !important;
        vertical-align: middle; /* 📌 縦方向の中央揃え */
        font-size: 24px;
    }
</style>

<!-- Vueのデリミタを修正中 -->
<div id="app">
    <div class="container content-container">
        <h2>[[ table_title || table_name ]]</h2>
        <p v-if="table_description" class="text-muted">[[ table_description ]]</p>
        <div class="table-responsive">
            <table class="table table-striped table-hover mt-3">
                <thead class="table-primary">
                    <tr>
                        <th v-for="col in columns" :key="col" :data-column="col">
                            [[ col ]]
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="row in data" :key="row.id">
                        <td v-for="col in columns" :key="col" :class="getClass(row[col], col)">
                            [[ formatValue(row[col]) ]]
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const app = Vue.createApp({
        data() {
            return {
                table_name: {{ table_name | tojson }},
                table_title: {{ table_title | tojson }},
                table_description: {{ table_description | tojson }},
                columns: [],
                data: [],
                cell_styles: {}
            };
        },
        methods: {
            async fetchData() {
                try {
                    console.log("Fetching data...");
                    const response = await axios.get(`/api/view/${this.table_name}`);
                    console.log("Data received:", response.data);
                    
                    this.columns = response.data.columns;
                    this.data = response.data.data;
                    this.cell_styles = response.data.cell_styles || {}; // `undefined` 回避
                    
                    console.log("Cell styles loaded:", this.cell_styles);
                } catch (error) {
                    console.error("データ取得エラー:", error);
                }
            },
            getClass(value, col) {
                // `this.cell_styles` の存在をチェック
                if (!this.cell_styles || Object.keys(this.cell_styles).length === 0) {
                    console.log("Skipping styles because cell_styles is empty or not loaded.");
                    return "";
                }

                // // `this.table_name` が `cell_styles` に存在しない場合のチェック
                // if (!(this.table_name in this.cell_styles)) {
                //     console.log(`Table name '${this.table_name}' is missing in cell_styles.`);
                //     console.log("Available keys:", Object.keys(this.cell_styles));
                //     return "";
                // }

                // `col` が `cell_styles` に存在しない場合のチェック
                if (!(col in this.cell_styles)) {
                    console.log(`No styles found for column: ${col}`, Object.keys(this.cell_styles));
                    return "";
                }

                const rules = this.cell_styles[col];

                console.log(`Checking styles for column: ${col}, value: ${value}`, rules);

                if (typeof value === "number") {
                    if (rules.greater_than && value > rules.greater_than.value) {
                        console.log(`Greater_than, Applying class: ${rules.greater_than.class}, rule_value: ${rules.greater_than.value}`);
                        return rules.greater_than.class;
                    }
                    if (rules.less_than && value < rules.less_than.value) {
                        console.log(`Less_than, Applying class: ${rules.less_than.class}, rule_value: ${rules.less_than.value}`);
                        return rules.less_than.class;
                    }
                    if (rules.equal_to && value === rules.equal_to.value) {
                        console.log(`Equal_to, Applying class: ${rules.equal_to.class}, rule_value: ${rules.equal_to.value}`);
                        return rules.equal_to.class;
                    }
                }
                
                return ""; // ルールに合致しない場合はデフォルト
            },
            formatValue(value) {
                if (typeof value === "number") {
                    return value % 1 === 0 ? value.toFixed(0) : value.toFixed(2);
                }
                return value;
            }
        },
        mounted() {
            console.log("Vue is mounted!");
            this.fetchData();
            setInterval(this.fetchData, 5000);
        }
    });

    app.config.compilerOptions.delimiters = ['[[', ']]'];
    app.mount("#app");
</script>

{% endblock %}