// use vue.js
window.onload = function () {
    window.vue = new Vue({
        el: "#vue",
        data: {
            path: "",
            tables: [],
            table: null,
            sql: "",
            result: null
        },
        computed: {
            selectorButtonText: function () {
                if (!this.path) return "Select File";
                var split = this.path.split("\\");
                return split[split.length - 1];
            },
        },
        watch: {},
        methods: {

            selectMDB: function () {
                api.get("/api/selectMDB");
            },

            openMDB: function (path) {
                api.post("/api/openMDB", {
                    path: path
                }, (r) => {
                    this.tables = r.data.tables;
                    if (this.tables.length == 1) {
                        this.selectTable(this.tables[0]);
                    }
                });
            },

            selectTable: function (tableName) {
                this.table = tableName;
                this.sql = "select * from [" + tableName + "]";
                this.query(tableName);
            },

            query: function (tableName) {
                if (!this.path) return;
                if (!this.sql) return;

                if (!tableName) this.table = null;
                api.post("/api/queryMDB", {
                    path: this.path,
                    sql: this.sql
                }, (r) => {
                    this.result = r.data.result;
                });
            },

            onmessage: function (msg) {
                switch (msg.command) {
                    case "selected-mdb":
                        var path = msg.path;
                        if (path) {
                            this.path = path;
                            var url = window.location.pathname + "#path=" + encodeURIComponent(path);
                            window.history.pushState(path, "", url);
                            this.path = path;
                            this.openMDB(path);
                        } else {
                            this.path = null;
                            window.history.pushState(path, "", window.location.pathname);
                        }
                        break;
                }
            },

            run: function () {
                ws.onmessage(this.onmessage);
                var path = urlHash("path");
                if (path) {
                    path = decodeURIComponent(path);
                    this.path = path;
                    this.openMDB(path);
                }
            }
        },
        created() { }
    });
    vue.run();
};

function sqlResize(evt) {
    console.log("sqlResize");
    var right = document.getElementById("layout-right");
    var sql = document.getElementById("layout-sql");
    var result = document.getElementById("layout-result");
    sql.style.height = String(right.offsetHeight) + "px";
    result.style.height = String(result.offsetHeight - right.offsetHeight - 5) + "px";
}