(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 {
        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 "采样 " + config.intervalMs + " ms / 超时 " + config.timeoutMs + " ms / 每样本 " + config.probeCount + " 次";
      }
    },
    mounted: function () {
      var self = this;
      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: {
      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.devices = data.devices || [];
              self.availableDays = data.days || [];
              self.samplingConfig = Object.assign(createEmptySamplingConfig(), data.samplingConfig || {});
              return;
            }
            self.$message.error((res && res.msg) || "设备配置加载失败");
          },
          error: function () {
            self.$message.error("设备配置加载失败");
          }
        });
      },
      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) {
              var data = res.data || {};
              self.overviewSummary = Object.assign(createEmptyOverviewSummary(), data.summary || {});
              self.overviewRows = data.devices || [];
              return;
            }
            self.overviewSummary = createEmptyOverviewSummary();
            self.overviewRows = [];
            self.$message.error((res && res.msg) || "总览数据加载失败");
          },
          error: function () {
            self.overviewSummary = createEmptyOverviewSummary();
            self.overviewRows = [];
            self.$message.error("总览数据加载失败");
          },
          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("请选择时间范围");
          return;
        }
        var parts = this.detailFilters.deviceKey.split("#");
        if (parts.length !== 2) {
          this.$message.warning("设备信息无效");
          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) {
              var data = res.data || {};
              self.detailSummary = Object.assign(createEmptyDetailSummary(), data.summary || {});
              self.series = data.series || [];
              self.alerts = data.alerts || [];
              self.updateCharts();
              return;
            }
            self.detailSummary = createEmptyDetailSummary();
            self.series = [];
            self.alerts = [];
            self.updateCharts();
            self.$message.error((res && res.msg) || "设备详情加载失败");
          },
          error: function () {
            self.detailSummary = createEmptyDetailSummary();
            self.series = [];
            self.alerts = [];
            self.updateCharts();
            self.$message.error("设备详情加载失败");
          },
          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: "平均",
            type: "line",
            showSymbol: false,
            sampling: "lttb",
            data: this.series.map(function (item) { return item.avgLatencyMs; }),
            lineStyle: { width: 2 }
          }, {
            name: "最小",
            type: "line",
            showSymbol: false,
            sampling: "lttb",
            data: this.series.map(function (item) { return item.minLatencyMs; }),
            lineStyle: { width: 1.5 }
          }, {
            name: "最大",
            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: "失败",
            splitLine: { lineStyle: { color: "#edf2f7" } },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: "#7f92a5" }
          }, {
            type: "value",
            name: "成功率%",
            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: "失败次数",
            type: "bar",
            yAxisIndex: 0,
            barMaxWidth: 18,
            data: this.series.map(function (item) { return item.failProbeCount; }),
            itemStyle: {
              borderRadius: [6, 6, 0, 0]
            }
          }, {
            name: "成功率",
            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) {
        if (value === null || value === undefined || value === "") {
          return "--";
        }
        return value + " ms";
      },
      formatPercent: function (value) {
        if (value === null || value === undefined || value === "") {
          return "--";
        }
        return value + "%";
      },
      formatPacketSize: function (value) {
        if (value === null || value === undefined || value === "" || value < 0) {
          return "系统默认";
        }
        return value + " B";
      }
    }
  });
})();