layui.use(["index", "api", "tpl"], function () {
  var $ = layui.$,
    table = layui.table,
    element = layui.element,
    form = layui.form,
    laypage = layui.laypage,
    admin = layui.admin;
  var sourceTitle = "";
  var selectSourceNode = { id: "", name: "" };
  var targetNodeId = [];
  var selectTargetNode = [];
  var unSelectTargetNodeId = "";
  var LIST_TABLE_ID = "listTable"; // table ElementId
  var LIST_TABLE_DATA = [
    {
      name: "层MySQL密码格式检查",
      content: "检查数据传输服务器是否能连通源数据库",
      tips: "查数据传输服务器失败",
      status: "1",
    },
    {
      name: "层MySQL密码格式检查",
      content: "检查数据传输服务器是否能连通源数据库",
      tips: "查数据传输服务器失败",
      status: "2",
    },
    {
      name: "层MySQL密码格式检查",
      content: "检查数据传输服务器是否能连通源数据库",
      tips: "查数据传输服务器失败",
      status: "1",
    },
    {
      name: "层MySQL密码格式检查",
      content: "检查数据传输服务器是否能连通源数据库",
      tips: "查数据传输服务器失败",
      status: "2",
    },
    {
      name: "层MySQL密码格式检查",
      content: "检查数据传输服务器是否能连通源数据库",
      tips: "查数据传输服务器失败",
      status: "1",
    },
  ];
  // table field 配置
  var LIST_TABLE_COLS = [
    {
      field: "name",
      title: "检查项",
      align: "left",
    },
    {
      field: "content",
      title: "检查内容",
      align: "left",
    },
    {
      field: "tips",
      title: "消息提醒",
      align: "left",
    },
    {
      field: "status",
      title: "检查结果",
      align: "left",
      templet: function templet(d) {
        if (d.status == "1") {
          return "<span class='status-success'>成功</span>";
        } else if (d.status == "2") {
          return `<div class="status-fail-box"><span class="status-fail">失败</span><i class="fail-icon" onmouseover="showToolTips(this)" data-tips="${d.tips}"></i></div>`;
        }
        return "";
      },
    },
  ];
  //step1
  form.on("submit(lay-step1-submit)", function (data) {
    console.log("step1：", data.field);
    element.progress("progress", "50%");
    $($(".step-ul").children()[1]).addClass("active");
    sourceTitle = "sales_order"; //获取了源码名称
    $(".source-title").html(sourceTitle);
    getSourceNodeLIst();
    $(".step-2")
      .removeClass("display-none")
      .siblings()
      .addClass("display-none");
  });
  //step2
  form.on("submit(lay-step2-pre-submit)", function (data) {
    console.log("step1：", data.field);
    element.progress("progress", "25%");
    $($(".step-ul").children()[0]).addClass("active");
    $($(".step-ul").children()[1]).removeClass("active");
    $(".step-1")
      .removeClass("display-none")
      .siblings()
      .addClass("display-none");
  });
  form.on("submit(lay-step2-next-submit)", function () {
    element.progress("progress", "75%");
    $($(".step-ul").children()[2]).addClass("active");
    $(".step-3")
      .removeClass("display-none")
      .siblings()
      .addClass("display-none");
  });
  $(".source-tree-list").on("click", ".tree-node", function (e) {
    e.stopPropagation();
    selectSourceNode.id = $(this).attr("data-id");
    selectSourceNode.name = $(this).attr("data-name");
    console.log("tree-node selectSourceNode:", selectSourceNode);
    $(this).addClass("active").siblings().removeClass("active");
  });
  $(".opr-box .icon-next").on("click", function () {
    if (selectSourceNode.name == "") {
      layer.msg("请选择源对象");
      return false;
    }
    if (targetNodeId.includes(selectSourceNode.id)) {
      layer.msg("已选择");
      return false;
    }
    changeTargetNode();
  });

  $(".opr-box .icon-pre").on("click", function () {
    console.log("icon-pre");
    if (unSelectTargetNodeId == "") {
      layer.msg("请选择目标对象");
      return false;
    }
    resetTargetNodes(unSelectTargetNodeId);
  });

  $(".target-tree-list").on("click", ".tree-node", function () {
    console.log(".target-tree-list .tree-node", $(this).attr("data-id"));
    $(this).addClass("active").siblings().removeClass("active");
    unSelectTargetNodeId = $(this).attr("data-id");
  });

  function changeTargetNode() {
    targetNodeId.push(selectSourceNode.id);
    totalNodes();
    selectTargetNode.push({
      id: selectSourceNode.id,
      name: selectSourceNode.name,
    });
    var ddHtml = `<dd class="tree-node" data-id="${selectSourceNode.id}" data-name="${selectSourceNode.name}"><i class="rw3"></i><span>${selectSourceNode.name}</span><span
    class="edit">编辑</span></dd>`;
    $(".target-tree-list").append(ddHtml);
  }
  function totalNodes() {
    $(".total-nodes").html(`（${targetNodeId.length}个对象）`);
  }
  function getSourceNodeLIst() {
    targetNodeId = [];
    var data = [
      { id: "1", name: "sales_orderpromotion1" },
      { id: "2", name: "sales_orderpromotion2" },
      { id: "3", name: "sales_orderpromotion3" },
    ];
    var html = "";
    data.forEach((element) => {
      html += `<dd class="tree-node" data-id="${element.id}" data-name="${element.name}"><i class="rw3"></i><span>${element.name}</span></dd>
      `;
    });
    $(".source-tree-list").html(html);
  }
  function resetTargetNodes(selectId) {
    var html = "";
    var newSelectNode = [];
    targetNodeId = [];
    selectTargetNode.forEach((element) => {
      if (element.id != selectId) {
        html += `<dd class="tree-node" data-id="${element.id}" data-name="${element.name}"><i class="rw3"></i><span>${element.name}</span><span
    class="edit">编辑</span></dd>`;
        targetNodeId.push(element.id);
        newSelectNode.push({ id: element.id, name: element.name });
      }
    });
    $(".target-tree-list").html(html);
    selectTargetNode = newSelectNode;
    totalNodes();
    unSelectTargetNodeId = "";
  }
  $(".target-tree-list").on("click", ".edit", function (e) {
    e.stopPropagation();
    editDialog({ id: $(this).parent().attr('data-id'), name: $(this).parent().attr('data-name') });
  });
  function editDialog({ id, name }) {
    console.log('editDialog:id,name:', id, name);
    var templet = $("#formDialogTemplate").html();
    layui.laytpl(templet).render({}, function (html) {
      layer.open({
        type: 1,
        title: "编辑表",
        content: templet,
        area: ["620px", "640px"],
        success: function success() {
          table.render({
            elem: "#editTable",
            data: [
              { id: 1, col: "acount_money", type: "decimal(11,2)" },
              { id: 1, col: "acount_money", type: "decimal(11,2)" },
            ],
            defaultToolbar: [],
            toolbar: "#toolbarDemo",
            title: "用户数据表",
            cols: [
              [
                { type: "checkbox", width: 20 },
                { field: "id", title: "ID", hide: true },
                { field: "col", title: "列名", width: 250, edit: "text" },
                { field: "type", title: "类型", width: 250, edit: "text" },
              ],
            ],
            page: false,
          });
        },
      });
    });
  }
  table.on("toolbar(editTable)", function (obj) {
    var checkStatus = table.checkStatus(obj.config.id);
    if (obj.event == "getCheckData") {
      var data = checkStatus.data;
      if (data.length == 0) {
        layer.msg('请选择列');
        return false;
      }

      // admin.req({
      //   url: url,
      //   data: params,
      //   success: function (res) {
      // layer.msg('成功');
      //   },
      // });
      layer.close(layer.index);
    }
  });

  //step3
  form.on("submit(lay-step3-pre-submit)", function () {
    element.progress("progress", "50%");
    $($(".step-ul").children()[1]).addClass("active");
    $($(".step-ul").children()[2]).removeClass("active");
    $(".step-2")
      .removeClass("display-none")
      .siblings()
      .addClass("display-none");
  });
  form.on("submit(lay-step3-next-submit)", function () {
    element.progress("progress", "100%");
    $($(".step-ul").children()[3]).addClass("active");
    $(".active-after").addClass("display-none");
    $(".step-4")
      .removeClass("display-none")
      .siblings()
      .addClass("display-none");
    getTableData();
  });
  //step4
  function getTableData() {
    var where = {};
    var tableRenderOptions = {
      height: 600,
      id: LIST_TABLE_ID,
      elem: "#" + LIST_TABLE_ID,
      data: LIST_TABLE_DATA,
      // url: LIST_TABLE_URL,
      even: "false",
      defaultToolbar: [],
      page: false,
      cols: [LIST_TABLE_COLS],
      where: where,
      parseData: function (res) {
        return {
          code: 0,
          msg: "",
          //count: res.totalSize,
          data: res,
        };
      },
      /*      done: function (res, curr, count) {
        loadPage(curr, count);
      },*/
    };
    table.render(tableRenderOptions);
  }
});