$.inputArea = undefined;
$.outputArea = undefined;

$(function () {
    $.inputArea = CodeMirror.fromTextArea(document.getElementById("inputArea"), {
        mode: "text/x-sql", // SQL
        theme: "idea",  // IDEA主题
        lineNumbers: true,   //显示行号
        smartIndent: true, // 自动缩进
        autoCloseBrackets: true// 自动补全括号
    });
    $.inputArea.setSize('auto', 'auto');

    // init output code area
    $.outputArea = CodeMirror.fromTextArea(document.getElementById("outputArea"), {
        mode: "text/x-java", // JAV
        theme: "idea",   // IDEA主题
        lineNumbers: true,   //显示行号
        smartIndent: true, // 自动缩进
        autoCloseBrackets: true// 自动补全括号
    });
    $.outputArea.setSize('auto', 'auto');

});


const vm = new Vue({
    el: '#rrapp',
    data: {
        formData: {
            tableSql: "CREATE TABLE 'sys_user_info' (\n" +
                "  'user_id' int(11) NOT NULL AUTO_INCREMENT COMMENT '用户编号',\n" +
                "  'user_name' varchar(255) NOT NULL COMMENT '用户名',\n" +
                "  'status' tinyint(1) NOT NULL COMMENT '状态',\n" +
                "  'create_time' datetime NOT NULL COMMENT '创建时间',\n" +
                //下面可以留着方便开发调试时打开
                // "  `updateTime` datetime NOT NULL COMMENT '更新时间',\n" +
                // "  ABc_under_Line-Hypen-CamelCase varchar comment '乱七八糟的命名风格',\n" +
                "  PRIMARY KEY ('user_id')\n" +
                ") ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用户信息'",
            options: {
                dataType: "sql",

                authorName: "Xiang",
                packageName: "com.xiang",
                returnUtilSuccess: "Result.success",
                returnUtilFailure: "Result.error",

                isPackageType: true,
                isSwagger: false,
                isAutoImport: false,
                isWithPackage: false,
                isComment: true,
                isLombok: true,

                ignorePrefix: "sys_",
                tinyintTransType: "int",
                nameCaseType: "CamelCase",
                timeTransType: "Date"
            }
        },
        templates: [{}],
        historicalData: [],
        currentSelect: 'plusentity',
        outputStr: "",
        outputJson: {}
    },
    methods: {
        setOutputModel: function (event) {
            const targetModel = event.target.innerText.trim();
            console.log(targetModel);
            vm.currentSelect = targetModel;
            if (vm.outputStr.length > 30) {
                vm.outputStr = vm.outputJson[targetModel];
                $.outputArea.setValue(vm.outputStr.trim());
                //console.log(vm.outputStr);
                $.outputArea.setSize('auto', 'auto');
            }
        },
        switchHistoricalData: function (event) {
            const tableName = event.target.innerText.trim();
            console.log(tableName);
            if (window.sessionStorage) {
                const valueSession = sessionStorage.getItem(tableName);
                vm.outputJson = JSON.parse(valueSession);
                console.log(valueSession);
                alert("切换历史记录成功:" + tableName);
            } else {
                alert("浏览器不支持sessionStorage");
            }
            vm.outputStr = vm.outputJson[vm.currentSelect].trim();
            $.outputArea.setValue(vm.outputStr);
            //console.log(vm.outputStr);
            $.outputArea.setSize('auto', 'auto');
        },
        setHistoricalData: function (tableName) {
            //add new table only
            if (vm.historicalData.indexOf(tableName) < 0) {
                vm.historicalData.unshift(tableName);
            }
            //remove last record , if more than N
            if (vm.historicalData.length > 9) {
                vm.historicalData.splice(9, 1);
            }
            //get and set to session data
            const valueSession = sessionStorage.getItem(tableName);
            //remove if exists
            if (valueSession !== undefined && valueSession != null) {
                sessionStorage.removeItem(tableName);
            }
            //set data to session
            sessionStorage.setItem(tableName, JSON.stringify(vm.outputJson));
            //console.log(vm.historicalData);
        },
        generate: function () {
            vm.formData.tableSql = $.inputArea.getValue();
            axios.post(basePath + "/code/generate", vm.formData).then(function (res) {
                if (res.data.code === '200' && res.data.message === 'success') {
                    setAllCookie();
                    vm.outputJson = res.data.data[0];
                    //兼容后端返回数据格式
                    vm.outputStr = vm.outputJson[vm.currentSelect].trim();
                    $.outputArea.setValue(vm.outputStr);
                    $.outputArea.setSize('auto', 'auto');
                    vm.setHistoricalData(vm.outputJson.tableName);
                    alert("生成成功");
                    return;
                }
                console.log(res);
                error("生成失败，请检查SQL语句!!!" + res.data.message);
            });
        }
    },
    created: function () {
        //load all templates for selections 加载所有模板供选择
        axios.post(basePath + "/template/all", {
            id: 1234
        }).then(function (res) {
            vm.templates = res.data.data
        });
    }
});

/**
 * 将所有 需要 保留历史纪录的字段写入Cookie中
 */
function setAllCookie() {
    var arr = list_key_need_load();
    for (var str of arr) {
        setOneCookie(str);
    }
}

function setOneCookie(key) {
    setCookie(key, vm.formData.options[key]);
}

/**
 * 将所有 历史纪录 重加载回页面
 */
function loadAllCookie() {
    //console.log(vm);
    var arr = list_key_need_load();
    for (var str of arr) {
        loadOneCookie(str);
    }
}

function loadOneCookie(key) {
    if (getCookie(key) !== "") {
        vm.formData.options[key] = getCookie(key);
    }
}

/**
 * 将 所有 需要 纪录的 字段写入数组
 * @returns {[string]}
 */
function list_key_need_load() {
    return ["authorName", "packageName", "returnUtilSuccess", "returnUtilFailure", "ignorePrefix", "tinyintTransType", "timeTransType"];
}
