(function () {
  "use strict";

  function nowDate() {
    return new Date();
  }

  function minutesAgo(minutes) {
    return new Date(Date.now() - minutes * 60 * 1000);
  }

  function createEmptyOverviewSummary() {
    return {
      totalDevices: 0,
      okDevices: 0,
      unstableDevices: 0,
      offlineDevices: 0,
      noDataDevices: 0,
      avgLatencyMs: null,
      maxLatencyMs: null
    };
  }

  function createEmptyDetailSummary() {
    return {
      totalSamples: 0,
      successSamples: 0,
      failSamples: 0,
      successRate: 0,
      avgLatencyMs: null,
      minLatencyMs: null,
      maxLatencyMs: null,
      packetSize: -1,
      latestStatus: "",
      latestTimeLabel: ""
    };
  }

  function createEmptySamplingConfig() {
    return {
      intervalMs: 1000,
      timeoutMs: 800,
      probeCount: 3,
      packetSize: -1
    };
  }

  new Vue({
    el: "#app",
    data: function () {
      return {
        lastOptionsData: null,
        lastOverviewData: null,
        lastTrendData: null,
        overviewLoading: false,
        detailLoading: false,
        devices: [],
        availableDays: [],
        samplingConfig: createEmptySamplingConfig(),
        overviewSummary: createEmptyOverviewSummary(),
        overviewRows: [],
        overviewFilters: {
          deviceType: "",
          keyword: ""
        },
        detailFilters: {
          deviceKey: "",
          range: [minutesAgo(30), nowDate()]
        },
        detailSummary: createEmptyDetailSummary(),
        series: [],
        alerts: [],
        charts: {
          latency: null,
          availability: null
        },
        resizeHandler: null
      };
    },
    computed: {
      currentDevice: function () {
        var key = this.detailFilters.deviceKey;
        if (!key) {
          return null;
        }
        for (var i = 0; i < this.devices.length; i++) {
          var item = this.devices[i];
          if ((item.deviceType + "#" + item.deviceNo) === key) {
            return item;
          }
        }
        for (var j = 0; j < this.overviewRows.length; j++) {
          var row = this.overviewRows[j];
          if ((row.deviceType + "#" + row.deviceNo) === key) {
            return row;
          }
        }
        return null;
      },
      filteredOverviewRows: function () {
        var type = this.overviewFilters.deviceType;
        var keyword = (this.overviewFilters.keyword || "").toLowerCase();
        return this.overviewRows.filter(function (item) {
          if (type && item.deviceType !== type) {
            return false;
          }
          if (!keyword) {
            return true;
          }
          var deviceText = (item.deviceType + "-" + item.deviceNo).toLowerCase();
          var ipText = (item.ip || "").toLowerCase();
          return deviceText.indexOf(keyword) >= 0 || ipText.indexOf(keyword) >= 0;
        });
      },
      samplingConfigText: function () {
        var config = this.samplingConfig || createEmptySamplingConfig();
        return this.i18n("devicePingLog.samplingConfigText", "采样 {0} ms / 超时 {1} ms / 每样本 {2} 次", [
          this.formatNumber(config.intervalMs),
          this.formatNumber(config.timeoutMs),
          this.formatNumber(config.probeCount)
        ]);
      }
    },
    mounted: function () {
      var self = this;
      this.refreshDocumentTitle();
      if (window.WCS_I18N && typeof window.WCS_I18N.onReady === "function") {
        window.WCS_I18N.onReady(function () {
          self.refreshLocalizedState();
        });
      }
      this.$nextTick(function () {
        self.loadOptions();
        self.loadOverview();
        self.resizeHandler = function () {
          self.resizeCharts();
        };
        window.addEventListener("resize", self.resizeHandler);
      });
    },
    beforeDestroy: function () {
      if (this.resizeHandler) {
        window.removeEventListener("resize", this.resizeHandler);
      }
      this.disposeCharts();
    },
    methods: {
      formatMessage: function (text, params) {
        var list = Array.isArray(params) ? params : [params];
        return String(text == null ? "" : text).replace(/\{(\d+)\}/g, function (match, index) {
          return list[index] == null ? "" : list[index];
        });
      },
      i18n: function (key, fallback, params) {
        if (window.WCS_I18N && typeof window.WCS_I18N.t === "function") {
          var translated = window.WCS_I18N.t(key, params);
          if (translated && translated !== key) {
            return translated;
          }
        }
        return this.formatMessage(fallback || key, params);
      },
      translateLegacyText: function (text) {
        if (text == null || text === "") {
          return text;
        }
        if (window.WCS_I18N && typeof window.WCS_I18N.tl === "function") {
          return window.WCS_I18N.tl(String(text));
        }
        return text;
      },
      getCurrentLocale: function () {
        if (window.WCS_I18N && typeof window.WCS_I18N.getLocale === "function") {
          return window.WCS_I18N.getLocale();
        }
        return "zh-CN";
      },
      refreshDocumentTitle: function () {
        document.title = this.i18n("devicePingLog.title", "设备网络分析");
      },
      refreshLocalizedState: function () {
        this.refreshDocumentTitle();
        if (this.lastOptionsData) {
          this.applyOptionsData(this.lastOptionsData);
        }
        if (this.lastOverviewData) {
          this.applyOverviewData(this.lastOverviewData);
        }
        if (this.lastTrendData) {
          this.applyTrendData(this.lastTrendData);
        } else {
          this.$forceUpdate();
          this.updateCharts();
        }
      },
      resolveStatusText: function (status) {
        var code = status == null ? "" : String(status).toUpperCase();
        if (code === "OK") {
          return this.i18n("devicePingLog.status.ok", "正常");
        }
        if (code === "UNSTABLE") {
          return this.i18n("devicePingLog.status.unstable", "波动");
        }
        if (code === "TIMEOUT") {
          return this.i18n("devicePingLog.status.timeout", "超时");
        }
        if (code === "ERROR") {
          return this.i18n("devicePingLog.status.error", "异常");
        }
        if (code === "NO_DATA") {
          return this.i18n("devicePingLog.status.noData", "暂无数据");
        }
        if (!code) {
          return "--";
        }
        return this.translateLegacyText(status);
      },
      applyOptionsData: function (data) {
        this.lastOptionsData = data || {};
        this.refreshDocumentTitle();
        this.devices = (data && data.devices) || [];
        this.availableDays = (data && data.days) || [];
        this.samplingConfig = Object.assign(createEmptySamplingConfig(), data && data.samplingConfig ? data.samplingConfig : {});
      },
      applyOverviewData: function (data) {
        this.lastOverviewData = data || {};
        this.overviewSummary = Object.assign(createEmptyOverviewSummary(), data && data.summary ? data.summary : {});
        this.overviewRows = this.normalizeOverviewRows(data && data.devices ? data.devices : []);
      },
      applyTrendData: function (data) {
        this.lastTrendData = data || {};
        this.detailSummary = this.normalizeDetailSummary(data && data.summary ? data.summary : {});
        this.series = (data && data.series) || [];
        this.alerts = this.normalizeAlerts(data && data.alerts ? data.alerts : []);
        this.updateCharts();
      },
      normalizeOverviewRows: function (rows) {
        var self = this;
        return (rows || []).map(function (item) {
          var result = Object.assign({}, item);
          result.statusText = self.resolveStatusText(item && item.status);
          result.message = self.translateLegacyText(item && item.message);
          result.label = self.translateLegacyText(item && item.label);
          return result;
        });
      },
      normalizeDetailSummary: function (summary) {
        var result = Object.assign(createEmptyDetailSummary(), summary || {});
        result.latestStatus = this.resolveStatusText(result.latestStatus);
        return result;
      },
      normalizeAlerts: function (alerts) {
        var self = this;
        return (alerts || []).map(function (item) {
          var result = Object.assign({}, item);
          result.status = self.resolveStatusText(item && item.status);
          result.message = self.translateLegacyText(item && item.message);
          return result;
        });
      },
      formatNumber: function (value) {
        var num = Number(value || 0);
        if (!isFinite(num)) {
          return "0";
        }
        return num.toLocaleString(this.getCurrentLocale());
      },
      loadOptions: function () {
        var self = this;
        $.ajax({
          url: baseUrl + "/devicePingLog/options/auth",
          headers: { token: localStorage.getItem("token") },
          method: "GET",
          success: function (res) {
            if (res && res.code === 200) {
              var data = res.data || {};
              self.applyOptionsData(data);
              return;
            }
            self.$message.error((res && res.msg) || self.i18n("devicePingLog.optionsLoadFailed", "设备配置加载失败"));
          },
          error: function () {
            self.$message.error(self.i18n("devicePingLog.optionsLoadFailed", "设备配置加载失败"));
          }
        });
      },
      loadOverview: function () {
        var self = this;
        this.overviewLoading = true;
        $.ajax({
          url: baseUrl + "/devicePingLog/overview/auth",
          headers: { token: localStorage.getItem("token") },
          method: "GET",
          success: function (res) {
            if (res && res.code === 200) {
              self.applyOverviewData(res.data || {});
              return;
            }
            self.overviewSummary = createEmptyOverviewSummary();
            self.overviewRows = [];
            self.$message.error((res && res.msg) || self.i18n("devicePingLog.overviewLoadFailed", "总览数据加载失败"));
          },
          error: function () {
            self.overviewSummary = createEmptyOverviewSummary();
            self.overviewRows = [];
            self.$message.error(self.i18n("devicePingLog.overviewLoadFailed", "总览数据加载失败"));
          },
          complete: function () {
            self.overviewLoading = false;
          }
        });
      },
      openDetail: function (row) {
        var self = this;
        if (!row) {
          return;
        }
        this.detailFilters.deviceKey = row.deviceType + "#" + row.deviceNo;
        this.setQuickRange(30, false);
        this.$nextTick(function () {
          self.ensureCharts();
          self.queryTrend();
        });
      },
      setQuickRange: function (minutes, autoQuery) {
        this.detailFilters.range = [minutesAgo(minutes), nowDate()];
        if (autoQuery !== false && this.currentDevice) {
          this.queryTrend();
        }
      },
      queryTrend: function () {
        if (!this.currentDevice) {
          return;
        }
        if (!this.detailFilters.range || this.detailFilters.range.length !== 2) {
          this.$message.warning(this.i18n("devicePingLog.selectTimeRange", "请选择时间范围"));
          return;
        }
        var parts = this.detailFilters.deviceKey.split("#");
        if (parts.length !== 2) {
          this.$message.warning(this.i18n("devicePingLog.invalidDevice", "设备信息无效"));
          return;
        }
        var self = this;
        this.detailLoading = true;
        $.ajax({
          url: baseUrl + "/devicePingLog/trend/auth",
          headers: { token: localStorage.getItem("token") },
          method: "GET",
          data: {
            deviceType: parts[0],
            deviceNo: parts[1],
            startTime: this.detailFilters.range[0].getTime(),
            endTime: this.detailFilters.range[1].getTime()
          },
          success: function (res) {
            if (res && res.code === 200) {
              self.applyTrendData(res.data || {});
              return;
            }
            self.detailSummary = createEmptyDetailSummary();
            self.series = [];
            self.alerts = [];
            self.updateCharts();
            self.$message.error((res && res.msg) || self.i18n("devicePingLog.detailLoadFailed", "设备详情加载失败"));
          },
          error: function () {
            self.detailSummary = createEmptyDetailSummary();
            self.series = [];
            self.alerts = [];
            self.updateCharts();
            self.$message.error(self.i18n("devicePingLog.detailLoadFailed", "设备详情加载失败"));
          },
          complete: function () {
            self.detailLoading = false;
          }
        });
      },
      ensureCharts: function () {
        if (this.$refs.latencyChart && !this.charts.latency) {
          this.charts.latency = echarts.init(this.$refs.latencyChart);
        }
        if (this.$refs.availabilityChart && !this.charts.availability) {
          this.charts.availability = echarts.init(this.$refs.availabilityChart);
        }
      },
      disposeCharts: function () {
        if (this.charts.latency) {
          this.charts.latency.dispose();
          this.charts.latency = null;
        }
        if (this.charts.availability) {
          this.charts.availability.dispose();
          this.charts.availability = null;
        }
      },
      resizeCharts: function () {
        if (this.charts.latency) {
          this.charts.latency.resize();
        }
        if (this.charts.availability) {
          this.charts.availability.resize();
        }
      },
      updateCharts: function () {
        this.ensureCharts();
        if (!this.charts.latency || !this.charts.availability) {
          return;
        }
        if (!this.series.length) {
          this.charts.latency.clear();
          this.charts.availability.clear();
          return;
        }
        this.charts.latency.setOption(this.buildLatencyOption(), true);
        this.charts.availability.setOption(this.buildAvailabilityOption(), true);
        this.resizeCharts();
      },
      buildLatencyOption: function () {
        var xAxisData = this.series.map(function (item) { return item.timeLabel; });
        return {
          color: ["#1f6fb2", "#2fa38e", "#f59a4a"],
          tooltip: {
            trigger: "axis"
          },
          legend: {
            top: 0,
            textStyle: { color: "#5e738a" }
          },
          grid: {
            left: 54,
            right: 18,
            top: 40,
            bottom: 54
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            boundaryGap: false,
            axisLine: { lineStyle: { color: "#d5dfeb" } },
            axisLabel: {
              color: "#74879a",
              formatter: function (value) {
                return value.slice(11);
              }
            }
          },
          yAxis: {
            type: "value",
            name: "ms",
            splitLine: { lineStyle: { color: "#edf2f7" } },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: "#7f92a5" }
          },
          dataZoom: [{
            type: "inside"
          }, {
            type: "slider",
            height: 18,
            bottom: 10
          }],
          series: [{
            name: this.i18n("devicePingLog.chart.latency.avg", "平均"),
            type: "line",
            showSymbol: false,
            sampling: "lttb",
            data: this.series.map(function (item) { return item.avgLatencyMs; }),
            lineStyle: { width: 2 }
          }, {
            name: this.i18n("devicePingLog.chart.latency.min", "最小"),
            type: "line",
            showSymbol: false,
            sampling: "lttb",
            data: this.series.map(function (item) { return item.minLatencyMs; }),
            lineStyle: { width: 1.5 }
          }, {
            name: this.i18n("devicePingLog.chart.latency.max", "最大"),
            type: "line",
            showSymbol: false,
            sampling: "lttb",
            data: this.series.map(function (item) { return item.maxLatencyMs; }),
            lineStyle: { width: 1.5, type: "dashed" }
          }]
        };
      },
      buildAvailabilityOption: function () {
        var xAxisData = this.series.map(function (item) { return item.timeLabel; });
        return {
          color: ["#de5c5c", "#2fa38e"],
          tooltip: {
            trigger: "axis"
          },
          legend: {
            top: 0,
            textStyle: { color: "#5e738a" }
          },
          grid: {
            left: 48,
            right: 50,
            top: 40,
            bottom: 54
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            axisLine: { lineStyle: { color: "#d5dfeb" } },
            axisLabel: {
              color: "#74879a",
              formatter: function (value) {
                return value.slice(11);
              }
            }
          },
          yAxis: [{
            type: "value",
            name: this.i18n("devicePingLog.chart.availability.failAxis", "失败"),
            splitLine: { lineStyle: { color: "#edf2f7" } },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: "#7f92a5" }
          }, {
            type: "value",
            name: this.i18n("devicePingLog.chart.availability.successRateAxis", "成功率%"),
            min: 0,
            max: 100,
            splitLine: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: "#7f92a5" }
          }],
          dataZoom: [{
            type: "inside"
          }, {
            type: "slider",
            height: 18,
            bottom: 10
          }],
          series: [{
            name: this.i18n("devicePingLog.chart.availability.failCount", "失败次数"),
            type: "bar",
            yAxisIndex: 0,
            barMaxWidth: 18,
            data: this.series.map(function (item) { return item.failProbeCount; }),
            itemStyle: {
              borderRadius: [6, 6, 0, 0]
            }
          }, {
            name: this.i18n("devicePingLog.chart.availability.successRate", "成功率"),
            type: "line",
            yAxisIndex: 1,
            showSymbol: false,
            sampling: "lttb",
            data: this.series.map(function (item) { return item.successRate; }),
            lineStyle: { width: 2 }
          }]
        };
      },
      statusClass: function (status) {
        if (status === "OK") {
          return "ok";
        }
        if (status === "UNSTABLE") {
          return "unstable";
        }
        if (status === "NO_DATA") {
          return "nodata";
        }
        return "offline";
      },
      formatLatency: function (value) {
        var num;
        if (value === null || value === undefined || value === "") {
          return "--";
        }
        num = Number(value);
        if (!isFinite(num)) {
          return "--";
        }
        return num.toLocaleString(this.getCurrentLocale(), { maximumFractionDigits: 2 }) + " ms";
      },
      formatPercent: function (value) {
        var num;
        if (value === null || value === undefined || value === "") {
          return "--";
        }
        num = Number(value);
        if (!isFinite(num)) {
          return "--";
        }
        return num.toLocaleString(this.getCurrentLocale(), { maximumFractionDigits: 2 }) + "%";
      },
      formatPacketSize: function (value) {
        var num = Number(value);
        if (!isFinite(num) || num < 0) {
          return this.i18n("devicePingLog.systemDefaultPacketSize", "系统默认");
        }
        return num.toLocaleString(this.getCurrentLocale()) + " B";
      }
    }
  });
})();