const RegStr = "^$.*+-?=!:|\\/()[]{}"
Vue.createApp({
    mounted() {
        $.get("/bank/manage/", {info: "yes"}, res => {
            if (res.success) {
                let tmp = [];
                for (let k in res.data.full) tmp.push(res.data.full[k]);
                this.full_data_raw = this.full_data_show = tmp;
                this.unresolved_data_raw = this.unresolved_data_show = res.data.unresolved;
                this.error_data_raw = this.error_data_show = res.data.error;
            } else alert("数据获取失败");
        });
    },
    delimiters: ["{[", "]}"],
    data() {
        return {
            which_cur: 0,
            full_insert_idx: 1,
            full_condition: "",
            full_data_raw: [],
            full_data_show: [],
            unresolved_condition: "",
            unresolved_data_raw: [],
            unresolved_data_show: [],
            error_data_raw: [],
            error_data_show: [],
            icon_view: {show: false, which: -1, index: -1, name: "", url: "", file: null}
        }
    },
    methods: {
        _getRegStr(str) {
            let arr = [];
            for (let it in str) {
                if (RegStr.includes(str[it])) arr.push("\\" + str[it]);
                else arr.push(str[it]);
            }
            return ".*" + arr.join(".*") + ".*";
        },
        _strLike(short, long) {
            if (short === "") return true;
            let ptn = new RegExp(this._getRegStr(short), "i");
            return ptn.test(long);
        },
        _json2str(obj = {}, keys = []) {
            let arr = [];
            for (let key in obj) if (keys.includes(key)) arr.push(key + ": " + obj[key]);
            return "{" + arr.join(", ") + "}";
        },
        fullFind(cond = "") {
            this.full_data_show = this.full_data_raw.filter(
                item => this._strLike(cond, item.short)
                    || this._strLike(cond, item.bin)
                    || this._strLike(cond, item.name)
            );
        },
        unresolvedFind(cond = "") {
            this.unresolved_data_show = this.unresolved_data_raw.filter(
                item => this._strLike(cond, item.short)
                    || this._strLike(cond, item.number)
                    || this._strLike(cond, item.name)
            );
        },
        fullDelete(index) {
            let tar = this.full_data_show[index];
            let msg = "是否确定删除：\n" + this._json2str(tar, ["short", "name"]);
            if (confirm(msg)) {
                this.full_data_raw = this.full_data_raw.filter(ele => ele.short !== tar.short);
                this.full_data_show = this.full_data_show.filter(ele => ele.short !== tar.short);
            }
        },
        fullChange(index, byUser = true) {
            let isInsert = true, tar = this.full_data_show[index];
            if (byUser && tar.short.startsWith("__Need")) return alert("请修改新增内容的<简写>字段，并确保其唯一");
            for (let i = 0; i < this.full_data_raw.length; i++) {
                if (this.full_data_raw[i]["short"] === tar.short) {
                    this.full_data_raw[i] = tar;
                    isInsert = false;
                    break;
                }
            }
            if (isInsert) this.full_data_raw[tar.short] = tar;
        },
        fullNew() {
            this.full_data_show.unshift(
                {bin: "", name: "", short: "__NeedModify-" + this.full_insert_idx++, icon: ""}
            );
        },
        fullUpdate() {
            let data = {};
            this.full_data_raw.forEach(ele => {
                if (ele.short !== "" && ele.name !== "") data[ele.short] = ele;
            });
            $.post("/bank/manage/", {which: "full", opt: "update", data: JSON.stringify(data)}, res => {
                if (!res.success) alert(res.message);
                else alert("更新成功");
            });
        },
        fullPersist() {
            $.post("/bank/manage/", {which: "full", opt: "persist"}, res => {
                if (!res.success) alert(res.message);
                else alert("写入文件成功");
            });
        },
        iconView(which, index) {
            let item = which === 0 ? this.full_data_show[index] : this.unresolved_data_show[index],
                icon = item.icon === "" ? "A-Fail" : item.icon;

            this.icon_view.name = item.icon;
            this.icon_view.url = "/static/bank/" + icon + ".png";
            this.icon_view.which = which;
            this.icon_view.index = index;
            this.icon_view.show = true;
        },
        iconViewClose() {
            this.icon_view.show = false;
            this.icon_view.which = -1;
            this.icon_view.index = -1;
            this.icon_view.name = "";
            this.icon_view.url = "";
            this.icon_view.file = null;
        },
        iconFileChange(event) {
            let file = event.target.files[0];
            if (file.type !== "image/png") return alert("icon仅支持png");
            if (file.size > 1024 * 1024) return alert("图像大小超过1M");
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = e => this.icon_view.url = e.target.result;
            this.icon_view.file = file;
        },
        iconUpload() {
            if (this.icon_view.file === null || this.icon_view.name === "")
                return alert("请选择文件并填写名称")
            let formData = new FormData();
            formData.append("which", "icon");
            formData.append("opt", "upload");
            formData.append("name", this.icon_view.name);
            formData.append("icon", this.icon_view.file);
            $.post({
                url: "/bank/manage/",
                processData: false,
                contentType: false,
                data: formData,
                success: res => {
                    if (res.success) {
                        if (this.icon_view.which === 0) {  // full
                            this.full_data_show[this.icon_view.index].icon = this.icon_view.name;
                            this.fullChange(this.icon_view.index, false);
                        } else {  // unresolved
                            this.unresolved_data_show[this.icon_view.index].icon = this.icon_view.name;
                            this.unresolvedChange(this.icon_view.index);
                        }
                        alert("icon上传成功");
                        this.iconViewClose();
                    } else alert(res.message);
                },
                error: err => alert("发生错误：" + err)
            });
        },
        unresolvedChange(index) {
            let tar = this.unresolved_data_show[index];
            for (let i = 0; i < this.unresolved_data_raw.length; i++) {
                if (this.unresolved_data_raw[i]["short"] === tar.short) {
                    this.unresolved_data_raw[i] = tar;
                    break;
                }
            }
        },
        unresolvedUpdate(index) {
            let tar = this.unresolved_data_show[index];
        }
    },
    computed: {
        isFullDataEmpty() {
            return $.isEmptyObject(this.full_data_show);
        }
    }
}).mount("#root");