var app = new Vue({
    el: '#app',
    data: {
        loading: false,
        saving: false,
        items: [],
        predefineColors: [
            '#78FF81',
            '#FA51F6',
            '#C4C400',
            '#30BFFC',
            '#A81DEE',
            '#97B400',
            '#E69138',
            '#B8B8B8',
            '#FF6B6B',
            '#FFD166',
            '#06D6A0',
            '#118AB2'
        ]
    },
    mounted: function () {
        this.reloadData();
    },
    methods: {
        reloadData: function () {
            var that = this;
            this.loading = true;
            $.ajax({
                url: baseUrl + '/watch/stationColor/config/auth',
                headers: { token: localStorage.getItem('token') },
                method: 'GET',
                success: function (res) {
                    that.loading = false;
                    if (res.code === 200) {
                        var items = (res.data && res.data.items) ? res.data.items : [];
                        that.items = items.map(function (item) {
                            return {
                                status: item.status,
                                name: item.name,
                                desc: item.desc,
                                color: that.normalizeColor(item.color || item.defaultColor),
                                defaultColor: that.normalizeColor(item.defaultColor)
                            };
                        });
                    } else if (res.code === 403) {
                        top.location.href = baseUrl + '/';
                    } else {
                        that.$message.error(res.msg || '加载站点颜色配置失败');
                    }
                },
                error: function () {
                    that.loading = false;
                    that.$message.error('加载站点颜色配置失败');
                }
            });
        },
        resetDefaults: function () {
            this.items = this.items.map(function (item) {
                return Object.assign({}, item, {
                    color: item.defaultColor
                });
            });
            this.$message.success('已恢复默认颜色');
        },
        applyDefaultColor: function (item) {
            item.color = item.defaultColor;
        },
        handleColorInput: function (item) {
            var normalized = this.normalizeColor(item.color);
            if (normalized !== String(item.color || '').trim().toUpperCase()) {
                this.$message.warning('颜色格式已自动修正为十六进制');
            }
            item.color = normalized;
        },
        saveConfig: function () {
            var that = this;
            this.saving = true;
            $.ajax({
                url: baseUrl + '/watch/stationColor/config/save/auth',
                headers: { token: localStorage.getItem('token') },
                method: 'POST',
                contentType: 'application/json;charset=UTF-8',
                dataType: 'json',
                data: JSON.stringify({
                    items: this.items.map(function (item) {
                        return {
                            status: item.status,
                            color: that.normalizeColor(item.color)
                        };
                    })
                }),
                success: function (res) {
                    that.saving = false;
                    if (res.code === 200) {
                        that.$message.success('站点颜色配置已保存');
                        that.reloadData();
                    } else if (res.code === 403) {
                        top.location.href = baseUrl + '/';
                    } else {
                        that.$message.error(res.msg || '保存站点颜色配置失败');
                    }
                },
                error: function () {
                    that.saving = false;
                    that.$message.error('保存站点颜色配置失败');
                }
            });
        },
        normalizeColor: function (color) {
            var value = String(color || '').trim();
            if (!value) {
                return '#B8B8B8';
            }
            if (/^#[0-9a-fA-F]{6}$/.test(value)) {
                return value.toUpperCase();
            }
            if (/^#[0-9a-fA-F]{3}$/.test(value)) {
                return ('#' + value.charAt(1) + value.charAt(1) + value.charAt(2) + value.charAt(2) + value.charAt(3) + value.charAt(3)).toUpperCase();
            }
            if (/^0x[0-9a-fA-F]{6}$/.test(value)) {
                return ('#' + value.substring(2)).toUpperCase();
            }
            return '#B8B8B8';
        }
    }
});