import $ from "jquery";
import { post } from "./utils/request";
// import { getTimeSpan, dateFormat } from './utils';
import { debounce } from "lodash";
import "./styles";
import magnetManager from "./modules/index";
$(async () => {
    var pathName=window.document.location.pathname;
    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
    const container = $(".y-container"),
    gbimg = $(">.gbimg", container),
    themeSetting = $(".themeSetting", container).on("hidden", () => {
      themeSetting.addClass("hide");
      save(themeInfo);
      setTimeout(() => themeSetting.removeClass("hide"), 500);
    }),
    bgColors = Array.from(
      $(".boxcolor:eq(0) li").map((i, item) => $(item).css("backgroundColor"))
    ),
    save = debounce(x => post(projectName+"/homeIndex/saveThemeInfo", x), 1e3);
  let {
    data: { themeInfo, magnets }
  }: any = await post(projectName+"/homeIndex/getThemeAndLayout");
  themeInfo = themeInfo || {};
  themeInfo.bgColorIndex = themeInfo.bgColorIndex | 0;
  themeInfo.bgImgIndex = themeInfo.bgImgIndex | 0;
  themeInfo.hideImg = themeInfo.hideImg === "true";
  magnets.forEach((x: any) => {
    x.appType = x.appType | 0;
    x.row = x.row | 0;
    x.col = x.col | 0;
    x.rowSpan = x.rowSpan | 0;
    x.colSpan = x.colSpan | 0;
    x.bgColor =
      x.bgColor || bgColors[Math.floor(Math.random() * bgColors.length)];
    x.titleColor = x.titleColor || "#fff";
    x.titlePosition = x.titlePosition || "bottom";
    x.titleFontSize = x.titleFontSize || "14px";
    x.titleAlign = x.titleAlign || "center";
  });
  magnetManager.init(container, magnets);
  $(" .bgColor a", themeSetting).each((i, item) => {
    const a = $(item).click(() => {
      $(".glyphicon.glyphicon-ok", themeSetting).removeClass();
      a.addClass("glyphicon glyphicon-ok");
      container.css("background-color", a.css("background-color"));
      themeInfo.bgColorIndex = i;
      themeSetting.trigger("hidden");
      return false;
    });
    i === themeInfo.bgColorIndex && a.click();
  });
  $(" .bgImg img", themeSetting).each((i, item) => {
    const img = $(item).click(() => {
        gbimg.css({
          backgroundImage: `url(${src})`
        });
        themeInfo.bgImgIndex = i;
        themeSetting.trigger("hidden");
      }),
      src = img.attr("src");
    i === themeInfo.bgImgIndex && img.click();
  });
  const bgimgdel = $(".bgImg input", themeSetting).click(e => {
    themeInfo.hideImg = (e.target as HTMLInputElement).checked;
    gbimg[themeInfo.hideImg ? "removeClass" : "addClass"]("show");
    save(themeInfo);
  });
  themeInfo.hideImg || bgimgdel.click();
  $(".magnetManager", themeSetting).click(() => {
    themeSetting.trigger("hidden");
    magnetManager.showMask();
  });
  const userinfo = $(".userinfo").click(() => {
    const ul = userinfo.next().slideToggle();
    $(document).one("click", () => {
      ul.slideUp();
    });
    return false;
  });
  const logout = $(".logout").click(() => {
      window.location.href=projectName+"/logout";
  });


    // const { data: msglist, rowTotal } = await post('/sysmsg/getSysMsgList', { isRead: false, pageIndex: 0, pageSize: 3 });
  // const msgs_arr: JQuery<HTMLElement>[] = [];
  // msglist.forEach((x: any) => {
  //     const li = $(`<li><a href="javascript:void(0);" ><div class="msg_title"><strong>${x.title}</strong>. <small>${getTimeSpan(x.createDate)}</small></div><small class="fl">${dateFormat(x.createDate, 'yyyy.MM.dd - hh:mm')}</small> <small class="fr">from:${x.msgType === 1 ? x.sendUserName : '系统消息'}</small></a></li>`);

  //     msgs_arr.push(li, $('<li>').addClass('divider'));
  // });
  // const msga = $('.msgs', container).prepend(msgs_arr).prev();
  // if (rowTotal) { msga.append($('<span>').text(rowTotal)) }
});