var app = new Vue({
    el: '#app',
    data: {
        stations: [],
        areas: [],
        relations: [],
        lines: [],
        draggingItem: null,
        draggingLine: null,
        saving: false,
        newAreaCode: '',
        newAreaName: ''
    },
    mounted: function() {
        this.loadData();
        window.addEventListener('resize', this.updateLines);
        this.$nextTick(function() {
            if (this.$refs.stationList) this.$refs.stationList.addEventListener('scroll', this.updateLines);
            if (this.$refs.areaList) this.$refs.areaList.addEventListener('scroll', this.updateLines);
        }.bind(this));
    },
    beforeDestroy: function() {
        window.removeEventListener('resize', this.updateLines);
    },
    methods: {
        loadData: function() {
            var that = this;
            var loading = this.$loading({ lock: true, text: '加载数据中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
            $.ajax({
                url: baseUrl + '/basOutStationArea/data/auth',
                headers: { 'token': localStorage.getItem('token') },
                method: 'GET',
                success: function(res) {
                    loading.close();
                    if (res.code === 200) {
                        that.stations = res.data.stations || [];
                        that.areas = res.data.areas || [];
                        that.relations = res.data.relations || [];
                        that.$nextTick(function() { that.updateLines(); });
                    } else if (res.code === 403) {
                        top.location.href = baseUrl + "/";
                    } else {
                        that.$message.error('加载数据失败: ' + res.msg);
                    }
                },
                error: function() {
                    loading.close();
                    that.$message.error('加载请求异常');
                }
            });
        },
        saveData: function() {
            var that = this;
            this.saving = true;
            var payload = {
                areas: this.areas,
                relations: this.relations
            };
            $.ajax({
                url: baseUrl + '/basOutStationArea/save/auth',
                type: 'POST',
                headers: { 'token': localStorage.getItem('token') },
                contentType: 'application/json',
                data: JSON.stringify(payload),
                success: function (res) {
                    that.saving = false;
                    if (res.code === 200) {
                        that.$message.success('保存成功');
                        that.loadData();
                    } else {
                        that.$message.error('保存失败: ' + res.msg);
                    }
                },
                error: function () {
                    that.saving = false;
                    that.$message.error('保存请求异常');
                }
            });
        },
        addArea: function() {
            var code = (this.newAreaCode || '').trim();
            var name = (this.newAreaName || '').trim();
            if (!code || !name) {
                this.$message.warning('请输入区域编码和名称');
                return;
            }
            var exists = this.areas.some(function(a) { return a.areaCode === code; });
            if (exists) {
                this.$message.warning('区域已存在');
                return;
            }
            this.areas.push({ areaCode: code, areaName: name });
            this.newAreaCode = '';
            this.newAreaName = '';
            this.$nextTick(this.updateLines);
        },
        removeArea: function(areaCode) {
            this.areas = this.areas.filter(function(a) { return a.areaCode !== areaCode; });
            this.relations = this.relations.filter(function(r) { return r.areaCode !== areaCode; });
            this.$nextTick(this.updateLines);
        },
        isStationBound: function(stationId) {
            return this.relations.some(function(r) { return r.stationId == stationId; });
        },
        isAreaBound: function(areaCode) {
            return this.relations.some(function(r) { return r.areaCode == areaCode; });
        },
        onDragStart: function(event, item, type) {
            this.draggingItem = { item: item, type: type };
            event.dataTransfer.effectAllowed = 'link';
        },
        onDragEnd: function() {
            this.draggingItem = null;
            this.draggingLine = null;
        },
        onDrop: function(event, targetArea) {
            if (!this.draggingItem || this.draggingItem.type !== 'station') return;
            var station = this.draggingItem.item;
            var exists = this.relations.some(function(r) {
                return r.stationId == station.stationId && r.areaCode == targetArea.areaCode;
            });
            if (exists) {
                this.$message.warning('该绑定已存在');
                return;
            }
            this.relations.push({
                stationId: station.stationId,
                areaCode: targetArea.areaCode
            });
            this.$message.success('已建立绑定: 站点 ' + station.stationId + ' -> 区域 ' + (targetArea.areaName || targetArea.areaCode));
            this.$nextTick(this.updateLines);
        },
        confirmDelete: function(index) {
            var rel = this.lines[index] && this.lines[index].relation;
            if (!rel) return;
            this.relations = this.relations.filter(function(r) {
                return !(r.stationId == rel.stationId && r.areaCode == rel.areaCode);
            });
            this.$nextTick(this.updateLines);
        },
        updateLines: function() {
            var svg = document.querySelector('svg');
            if (!svg) return;
            var svgRect = svg.getBoundingClientRect();
            var newLines = [];
            this.relations.forEach(function(rel) {
                var sDom = document.getElementById('station-' + rel.stationId);
                var aDom = document.getElementById('area-' + rel.areaCode);
                if (sDom && aDom) {
                    var sRect = sDom.getBoundingClientRect();
                    var aRect = aDom.getBoundingClientRect();
                    var x1 = sRect.right - svgRect.left;
                    var y1 = sRect.top + sRect.height / 2 - svgRect.top;
                    var x2 = aRect.left - svgRect.left;
                    var y2 = aRect.top + aRect.height / 2 - svgRect.top;
                    newLines.push({
                        x1: x1, y1: y1, x2: x2, y2: y2,
                        relation: rel,
                        stationId: rel.stationId,
                        areaCode: rel.areaCode
                    });
                }
            });
            this.lines = newLines;
        }
    }
});