var myChart = echarts.init(document.getElementById("rateChart"), "dark");

var fisrtIn = true;

var clock = new Vue({
  el: "#clock",
  data: {
    time: "",
    date: "",
    weekday: "",
  },
  watch: {},
});

log();

var week = [
  "星期天",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
  var cd = new Date();
  clock.time =
    zeroPadding(cd.getHours(), 2) +
    ":" +
    zeroPadding(cd.getMinutes(), 2) +
    ":" +
    zeroPadding(cd.getSeconds(), 2);
  clock.date =
    zeroPadding(cd.getFullYear(), 4) +
    "-" +
    zeroPadding(cd.getMonth() + 1, 2) +
    "-" +
    zeroPadding(cd.getDate(), 2);
  clock.weekday = week[cd.getDay()];
}

function zeroPadding(num, digit) {
  var zero = "";
  for (var i = 0; i < digit; i++) {
    zero += "0";
  }
  return (zero + num).slice(-digit);
}

// var autoScrollHeight = $(window).height() - 385;
var autoScrollBool = false;
var autoScrollHeight = "calc(100vh - 13.14rem)";
// if ($(window).height() <= 800) {
//   autoScrollHeight = $(window).height() - 188;
// }

var option = {
  backgroundColor: "",
  tooltip: {
    show: false,
  },
  padding: [0, 0, 0, 0],
  grid: {
    x: 30,
    y: 30,
    x2: 20,
    y2: 20,
  },
  series: [],
};
myChart.setOption(option);

var $autoScroll;
var searchParams;
var factoryId = getQueryStringByName("factoryId") || 8;
var plantId = getQueryStringByName("plantId") || 204;
var statusId = getQueryStringByName("statusId") || -1;
var time =
  getQueryStringByName("time") ||
  new Date(dateFormat("yyyy-MM-dd", new Date()));
var shift = getQueryStringByName("shift") || "1";
var statusArr = [];
if (statusId > 0) {
  statusArr.push(statusId);
}

var macLines = [];

$(function () {
  layer.load();
  refreshToken();
  //var factoryId = 8;
  // initEcharts();
  $("#auto-scroll").css("height", autoScrollHeight);
  var windowWidth = $(window).width();
  var containerWidth = $(".table").width();
  $("#rightFrame").attr(
    "src",
    "../pages/macstatus-right-nav.html?v=" +
      Date.now() +
      "&factoryId=" +
      factoryId +
      "&plantId=" +
      plantId +
      "&statusId=" +
      statusId
  );

  $(document).delegate(".mac-image", "click", function () {
    var macCode = $(this).attr("data-code");

    window.open(
      `../pages/machine-detail.html?v=` +
        Date.now() +
        `&macCode=${macCode}&date=${clock.date}`,
      "_blank"
    );
    initChartAndMachines(searchParams);
  });

  $("#auto-scroll").on("mouseover", function (e) {
    e.stopPropagation();
    // $autoScroll.liMarquee('play');
    // autoScroll(false);
    $(this).css("overflow-y", "scroll");
  });
  $("#auto-scroll").on("mouseout", function (e) {
    e.stopPropagation();
    // $autoScroll.liMarquee('play');
    // autoScroll(autoScrollBool);
    $(this).css("overflow-y", "hidden");
  });

  $(window).resize(() => {
    initMachines(macLines);
  });
});

let connection = null;

function createConnection(filter, recipe) {
  if (connection) {
    connection.stop();
    connection = null;
  }
  time = dateFormat("yyyy-MM-dd", new Date(time));
  connection = new signalR.HubConnectionBuilder()
    .withUrl(
      `${server}/eap/hub/macstatus/last?filter=${filter}&recipe=${recipe}&date=${time}&type=${shift}`
    )
    .build();

  connection.serverTimeoutInMilliseconds = 24e4;
  connection.keepAliveIntervalInMilliseconds = 12e4;

  connection.on("BeginConnection", function (obj) {
    layer.closeAll("loading");
    if (obj) {
      if (!obj.data || obj.data.total <= 0) {
        $("#auto-scroll").empty();
        alert("未查询到数据");
        return;
      }
      initPage(
        obj.data.factory + "&nbsp;&nbsp;" + obj.data.plant,
        obj.data.total,
        obj.data.statusCount
      );
      debugger;
      initMachines(obj.data.lines);
      initEcharts(obj.data.processRunRate);
      macLines = obj.data.lines;
      var iframe = document.getElementById("rightFrame");
      iframe.contentWindow.setRefreshDate(new Date(time));
    } else {
      alert(
        (!obj.msg || obj.msg) === "" ? "初始化页面失败，请联系管理员" : obj.msg
      );
    }
  });

  connection.on("ReceiveUpdate", function (obj) {
    layer.closeAll("loading");
    if (obj) {
      if (!obj.data || obj.data.total <= 0) {
        $("#auto-scroll").empty();
        alert("未查询到数据");
        return;
      }
      initPage(
        obj.data.factory + "&nbsp;&nbsp;" + obj.data.plant,
        obj.data.total,
        obj.data.statusCount
      );
      // updateMachineItem(obj.data.lines);
      initMachines(obj.data.lines);
      initEcharts(obj.data.processRunRate);
      macLines = obj.data.lines;
      var iframe = document.getElementById("rightFrame");
      iframe.contentWindow.setRefreshDate(new Date(time));
    } else {
      alert(
        (!obj.msg || obj.msg) === "" ? "获取数据失败，请联系管理员" : obj.msg
      );
    }
  });

  connection.on("Error", function (obj) {
    console.log("检测到连接出现异常");
    console.log(new Date());
    console.log(obj);
    setTimeout(() => {
      startConnection();
    }, 5000);
  });

  connection.on("Finished", function (obj) {
    connection.stop();
    console.log("finished");
  });
}

async function startConnection() {
  if (connection.state !== signalR.HubConnectionState.Disconnected) return;
  connection.start({ transport: ["webSockets"] }).catch((err) => {
    console.log("检测到连接出现异常");
    console.error(err);
    setTimeout(() => {
      startConnection();
    }, 5000);
  });
}

function setUpConnection(filter, recipe) {
  createConnection(filter, recipe);
  startConnection();
}

var timeInterval = null;

//加载echarts和机台列表
function initChartAndMachines(params) {
  searchParams = params;
  var filter = "";
  if (params) {
    if (params.factory) {
      filter += ` and a.factoryId=${params.factory}`;
    }
    if (params.plant) {
      filter += ` and l.id=${params.plant}`;
    }
    //#region 工序过滤
    if (params.types && params.types.length > 0) {
      var typeFilter = "(";
      params.types.forEach((t) => {
        typeFilter += `'${t.toUpperCase()}',`;
      });
      typeFilter = typeFilter.substr(0, typeFilter.length - 1) + ")";
      filter += ` and g.FCode in ${typeFilter}`;
    }
    //#endregion

    //#region  机型过滤
    if (params.macModels && params.macModels.length > 0) {
      var typeFilter = "(";
      params.macModels.forEach((t) => {
        typeFilter += `'${t}',`;
      });
      typeFilter = typeFilter.substr(0, typeFilter.length - 1) + ")";
      filter += ` and a.MModeId in ${typeFilter}`;
    }
    //#endregion

    // if (params.floor && params.lines.length > 0) {
    //     var typeFilter = '(';
    //     params.lines.forEach(t => {
    //         typeFilter += `'${t}',`;
    //     });
    //     typeFilter = typeFilter.substr(0, typeFilter.length - 1) + ')';
    //     filter += ` and a.regionId in ${typeFilter}`;
    // }

    //#region 线体过滤
    if (params.lines && params.lines.length > 0) {
      var typeFilter = "(";
      params.lines.forEach((t) => {
        typeFilter += `'${t}',`;
      });
      typeFilter = typeFilter.substr(0, typeFilter.length - 1) + ")";
      filter += ` and a.regionId in ${typeFilter}`;
    }
    //#endregion

    //#region 状态过滤
    if (params.status && params.status.length > 0) {
      var typeFilter = "(";
      params.status.forEach((t) => {
        typeFilter += `'${t}',`;
      });
      typeFilter = typeFilter.substr(0, typeFilter.length - 1) + ")";
      filter += ` and b.statusId in ${typeFilter}`;
    }
    //#endregion

    if (params.maccode) {
      filter += ` and a.fcode='${params.maccode}' `;
    }
    if (params.time) {
      if (params.time instanceof Date) {
        time = dateFormat("yyyy-MM-dd", params.time);
      } else {
        time = params.time;
      }
      clock.date = time;
      if (time != dateFormat("yyyy-MM-dd", new Date())) {
        clearInterval(timerID);
        clock.weekday = week[new Date(time).getDay()];
        if (params.shift == 1) {
          clock.time = "白班";
        } else if (params.shift == 2) {
          clock.time = "夜班";
        } else {
          clock.time = "整天";
        }
      } else {
        if (timerID) {
          clearInterval(timerID);
          timerID = setInterval(updateTime, 1000);
        }
      }
    }
    if (params.shift) {
      shift = params.shift;
    }
  }
  if (filter === "") {
    filter = " and a.factoryId=8";
  }
  setUpConnection(filter, params.recipe);
  // initEcharts(filter, params.recipe);
  // if (timeInterval) {
  //   clearInterval(timeInterval);
  // }
  // timeInterval = setInterval(() => {
  //   initEcharts(filter, params.recipe);
  // }, 1000 * 60 * 10);
}

initChartAndMachines({
  factory: factoryId,
  plant: plantId,
  status: statusArr,
  recipe: "",
  time: time,
  shift: shift,
});

function showLoading() {
  hideNav($(".rightNav"), $(".bgDiv"));
  layer.load();
}

function autoScroll(auto) {
  if (auto) {
    $("#auto-scroll ul:first").css("margin-top", "3rem");
    $autoScroll = $("#auto-scroll").liMarquee({
      direction: "up",
      runshort: false,
      /*内容不足时不滚动*/
      scrollamount: 40 /*速度*/,
      behavior: "alternate",
    });
  } else {
    $("#auto-scroll ul:first").css("margin-top", "0.5rem");
    if ($autoScroll) {
      $autoScroll.liMarquee("destroy");
    }
  }
}

function initMachines(lines) {
  $("#auto-scroll").empty();
  for (var item in lines) {
    var line = lines[item];
    var $ul = $("<ul>");
    $ul.addClass("mac-row flex marginTop");
    $ul.attr("data-id", line.floorName + line.lineName);
    var $numLi = $("<li>");
    $numLi.addClass("content-tbody-td bordered num");
    var floorSpan = $("<span>");
    floorSpan.addClass("line-name");
    floorSpan.css("margin-top", "-2rem");
    floorSpan.text(line.floorName);
    var lineSpan = $("<span>");
    lineSpan.addClass("line-name");
    lineSpan.css("margin-top", "10px");
    let rates = 0;
    let macCount = 0;
    for (let i in line.modelMachines) {
      let macs = line.modelMachines[i].filter((item) => {
        if (
          item.recipe != "暂无" &&
          item.statusName != "离线" &&
          item.statusName != "关机"
        ) {
          rates += item.runRate;
          macCount++;
        }
      });
    }
    if (macCount == 0) {
      macCount = 1;
    }
    rates = rates / macCount;
    lineSpan.text(line.lineName);
    var rateLine = $("<span>");
    rateLine.css("margin-top", "10px");
    rateLine.addClass("line-name");
    rateLine.text(rates.toFixed(2) + "%");
    $numLi.append(floorSpan).append(lineSpan).append(rateLine);
    var $equipmentLi = $("<li>");
    $equipmentLi.addClass("content-tbody-td equipment");
    var $daDiv = $("<div>");
    $daDiv.addClass("da");
    var count = 1;
    var modelMachines = line.modelMachines;
    var macs = [];
    if (modelMachines) {
      for (var key in modelMachines) {
        var singles = modelMachines[key];
        singles.forEach((item) => {
          macs.push(item);
        });
      }
    }
    if (macs && macs.length > 0) {
      macs.forEach((element) => {
        $daDiv.append(appendMacItem(element, count));
        count++;
      });
    }
    $equipmentLi.append($daDiv);
    // $ul.append($numLi).append($recipeLi).append($runrateLi).append($equipmentLi);
    $ul.append($numLi).append($equipmentLi);

    // 每条线的机台总数
    var lineLength = macs.length;
    var macWidth = $(".mac-item").width();
    var macContainerWidth = $(".equipment").width();
    var windowWidth = document.body.offsetWidth;
    var singleWidth = 70;
    if (windowWidth <= 1366) {
      singleWidth = 70;
    } else {
      singleWidth = 70 + 0.061 * (windowWidth - 1366);
    }
    var rowCount = Math.floor(
      (macContainerWidth - 200) / (macWidth || singleWidth)
    );
    var rows = Math.ceil(lineLength / rowCount);
    if (rows > 1) {
      var singleHeight = 8.24;
      // if(windowWidth>1366){
      //   singleHeight = 105+0.15*(windowWidth-1366);
      // }
      var rowMargin = 1;
      // $ul.height(`${rows * singleHeight + (rows - 0.2) * rowMargin}`);
      // $numLi.css({
      //   height: `${rows * singleHeight + (rows - 1) * rowMargin}px`,
      //   "line-height": `${rows * singleHeight + (rows - 1) * rowMargin}px`,
      // });
      $ul.height(`${rows * singleHeight + (rows - 1) * (rowMargin - 0.2)}rem`);
      $numLi.css({
        height: `${rows * singleHeight + (rows - 1) * (rowMargin - 0.6)}rem`,
        "line-height": `${
          rows * singleHeight + (rows - 1) * (rowMargin - 0.6)
        }rem`,
      });
      $($ul).css({
        "margin-bottom": "-3rem",
      });
      $($ul).find(".mac-item").addClass("multi-mac-item");
    }

    $("#auto-scroll").append($ul);
  }
  // if (fisrtIn) {
  autoScroll(autoScrollBool);
  //   fisrtIn = false;
  // } else {
  //   if ($autoScroll) {
  //     $autoScroll.liMarquee("destroy");
  //   }
  //   autoScroll(autoScrollBool);
  // }
  if (lines.length > 5) {
    // $autoScroll = $('#auto-scroll').liMarquee({
    //     direction: 'up',
    //     runshort: false,
    //     /*内容不足时不滚动*/
    //     scrollamount: 30 /*速度*/,
    //     behavior: 'alternate',
    //     hoverstop: true
    // });
  } else {
    //  $('#auto-scroll').removeEventListener("mouseover", null, false);
    //  $('#auto-scroll').removeEventListener("mouseout", null, false);
  }
}

// 生成单个机台块
function appendMacItem(mac, count) {
  var $macItemDiv = $("<div>");
  $macItemDiv.addClass("mac-item");
  $macItemDiv.attr("data-id", `${mac.line}_${count}`);
  $macItemDiv.attr("data-name", mac.macCode);
  var $macIdDiv = $("<div>").addClass("macId");
  // $macIdDiv.addClass(`mac_${mac.statusCode}`);
  $macIdDiv.css(
    "color",
    `rgb(${mac.color.red},${mac.color.green},${mac.color.blue})`
  );
  $macIdDiv.text(mac.macCode);
  var $imgDiv = $("<div>").addClass("img");
  var $img = $("<img>").attr({
    width: "100%",
    height: "100%",
    src: `../images/machines/${mac.useImage}/${mac.useImage}_${mac.statusCode}.png`,
  });
  $imgDiv.append($img).addClass("mac-image").attr("data-code", mac.macCode);
  var $recipeDiv = $("<div>");
  $recipeDiv.addClass("mac-recipe").text(mac.recipe);

  var time_bfval = mac.timeLen;
  // var time_val = time_bfval > 60 ? Math.floor(time_bfval / 60) + '分' + time_bfval % 60 + '秒' : time_bfval + '秒';
  // var time_val = time_bfval > 60 ? Math.floor(time_bfval / 60) + '分' : time_bfval + '秒';
  var newStr = "";
  var year = 365 * 24 * 3600;
  if (time_bfval > year) {
    newStr = (time_bfval / year).toFixed(2) + "年";
  } else if (time_bfval > year / 12) {
    newStr = ((time_bfval / year) * 12).toFixed(2) + "月";
  } else if (time_bfval > 3600 * 24) {
    newStr = (time_bfval / 3600 / 24).toFixed(2) + "天";
  } else if (time_bfval > 3600) {
    newStr = (time_bfval / 3600).toFixed(2) + "小时";
  } else if (time_bfval > 60) {
    newStr = (time_bfval / 60).toFixed(2) + "分";
  } else {
    newStr = time_bfval.toFixed(2) + "秒";
  }
  var timeDiv = $("<div>").addClass("time").text(newStr);
  //  $macItemDiv.append($macIdDiv).append($imgDiv).append($recipeDiv).append(timeDiv);
  var runRateStr = "";
  if (!mac.runRate) {
    runRateStr = "0.00%";
  } else if (mac.runRate > 100) {
    runRateStr = "数据异常";
  } else {
    runRateStr = mac.runRate.toFixed(2) + "%";
  }
  var runrateDiv = $("<div>").addClass("time").text(runRateStr);
  $macItemDiv
    .append($macIdDiv)
    .append($imgDiv)
    .append($recipeDiv)
    .append(timeDiv)
    .append(runrateDiv);
  // $imgDiv.bind('click', function () {
  //     window.open(`../pages/machine-detail.html?v=` + Date.now() + `&macCode=${mac.macCode}`, '_blank');
  // });
  return $macItemDiv;
}

//头部表格数字
function initPage(factory, total, data) {
  // this.totalInfo =data;
  $("#tb_count").empty();
  var $tbTotalTitles = $("<tr>");
  var $tbTotalNums = $("<tr>");
  var $td_first = $("<td>");
  $td_first.text("总计");
  $tbTotalTitles.append($td_first);
  var $td_total = $("<td>");
  $td_total.text(total);
  $tbTotalNums.append($td_total);
  $.each(data, function (index, item) {
    var t_name = $("<td>");
    t_name
      .text(item.statusName)
      .css(
        "background-color",
        `rgb(${item.color.red},${item.color.green},${item.color.blue})`
      );
    $tbTotalTitles.append(t_name);
    var t_val = $("<td>");
    t_val.text(item.count);
    $tbTotalNums.append(t_val);
  });
  $("#tb_count").append($tbTotalTitles);
  $("#tb_count").append($tbTotalNums);

  $("#li_factory").empty();
  $("#li_factory").html(factory);
}

//echarts稼动率
function initEcharts(chartDto) {
  var myChart = echarts.init(document.getElementById("rateChart"));
  myChart.showLoading({
    text: "正在加载...",
    color: "#B21E1E",
    textColor: "#B21E1E",
  });
  // axios
  //   .get(`${server}/eap/api/MacStatusTotalInfo/getprocessrunrate`, {
  //     params: {
  //       filter: filter,
  //       recipe: recipe,
  //       date: dateFormat("yyyy-MM-dd", new Date(time)),
  //       type: shift,
  //     },
  //   })
  //   .then((obj) => {
  myChart.hideLoading(); //提示关闭
  if (chartDto) {
    var x_data = chartDto.xdata;
    var y_data = chartDto.ydata;
    var init_data = [];
    var series = [];
    var firtsCenter = 12;
    for (let index = 0; index < x_data.length; index++) {
      var seriesData = (y_data[index] * 100).toFixed(1);
      var xCenter = firtsCenter + 25 * index;
      // init_data.push();
      series.push({
        name: `${x_data[index]}稼动率`,
        type: "gauge",
        min: 0,
        max: 100,
        splitNumber: 5,
        radius: "80%",
        center: [`${xCenter}%`, "50%"], // 默认全局居中
        axisLine: {
          // 坐标轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: [
              [0.6, "#ff4500"],
              [0.8, "#1e90ff"],
              [1, "lime"],
            ],
            width: 3,
            shadowColor: "#fff", //默认透明
            shadowBlur: 10,
          },
        },
        axisLabel: {
          // 坐标轴小标记
          fontWeight: "bolder",
          color: "#fff",
          shadowColor: "#fff", //默认透明
          shadowBlur: 10,
        },
        axisTick: {
          // 坐标轴小标记
          length: 5, // 属性length控制线长
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: "auto",
            shadowColor: "#fff", //默认透明
            shadowBlur: 10,
          },
        },
        splitLine: {
          // 分隔线
          length: 5, // 属性length控制线长
          lineStyle: {
            // 属性lineStyle（详见lineStyle）控制线条样式
            width: 3,
            color: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 10,
          },
        },
        pointer: {
          // 分隔线
          shadowColor: "#fff", //默认透明
          shadowBlur: 5,
          width: 3, //指针的宽度
          length: "60%", //指针长度，按照半圆半径的百分比
        },
        title: {
          textStyle: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            fontWeight: "bolder",
            fontSize: 20,
            fontStyle: "italic",
            color: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 10,
          },
        },
        detail: {
          // backgroundColor: 'rgba(30,144,255,0.8)',
          // borderWidth: 1,
          borderColor: "#fff",
          shadowColor: "#fff", //默认透明
          shadowBlur: 5,
          offsetCenter: [0, "90%"], // x, y，单位px
          textStyle: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            fontWeight: "bolder",
            color: "#fff",
            fontSize: 14,
          },
          formatter: x_data[index] + " {value}%",
        },
        data: [
          {
            value: seriesData,
            name: "",
          },
        ],
      });
    }
    option.series = series;
    myChart.setOption(option);
  }
  // })
  // .catch((resp) => {
  //   console.log("请求失败：" + resp.status + "," + resp.statusText);
  // });
}

function exportImage() {
  var width = window.screen.width;
  var scrollHeight = $("#auto-scroll").prop("scrollHeight");
  $("#export-container").css("height", scrollHeight);
  $("#auto-scroll").css("height", scrollHeight);
  $("#canvas").css("opacity", "0");
  html2canvas(document.querySelector("body"), {
    width: width / 1,
    scale: 0.8,
    scrollY: 0,
    scrollX: 0,
    windowHeight: scrollHeight + 3000,
  }).then((canvas) => {
    $("#auto-scroll").css("height", autoScrollHeight);
    $("#canvas").css("opacity", "1");
    var url = canvas.toDataURL("image/jpg", 1);
    dataURIToBlob("机台状态看板导出.jpg", url, callback);
  });
}

var dataURIToBlob = function (imgName, dataURI, callback) {
  var binStr = atob(dataURI.split(",")[1]),
    len = binStr.length,
    arr = new Uint8Array(len);

  for (var i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i);
  }

  callback(imgName, new Blob([arr]));
};

var callback = function (imgName, blob) {
  var triggerDownload = $("<a>")
    .attr("href", URL.createObjectURL(blob))
    .attr("download", imgName)
    .appendTo("body")
    .on("click", function () {
      if (navigator.msSaveBlob) {
        return navigator.msSaveBlob(blob, imgName);
      }
    });
  triggerDownload[0].click();
  triggerDownload.remove();
};

function updateMachineItem(lines) {
  for (var item in lines) {
    var line = lines[item];
    var floor = line.floorName + line.lineName;
    var lineEle = $("#auto-scroll").find(`[data-id=${floor}]`);
    var rates = 0;
    var macItem = $();
    for (let i in line.modelMachines) {
      let macs = line.modelMachines[i].filter((item) => {
        if (
          item.recipe != "暂无" &&
          item.statusName != "离线" &&
          item.statusName != "关机"
        ) {
          rates += item.runRate;
          macCount++;
        }
      });
    }
    if (macCount == 0) {
      macCount = 1;
    }
    var lineOveralls = $(lineEle).find(".line-name");
    rates = rates / macCount;
    $(lineOveralls[2]).text(rates.toFixed(2) + "%");
    var modelMachines = line.modelMachines;
    if (modelMachines) {
      for (var key in modelMachines) {
        var singles = modelMachines[key];
        singles.forEach((item) => {
          macs.push(item);
        });
      }
    }
    for (var mac in macs) {
      var macItem = $(lineEle).find(`[data-name=${mac.maccode}]`);
      var runrateEle = $(macItem).find();
    }
  }
}

function refreshToken() {
  axios
    .get(`${server}/eap/api/macmodel/get`, {
      params: {
        filter: null,
        pageSize: 1,
        pageIndex: 1,
      },
    })
    .then((obj) => {});
}