layui.define(["tool"], function (exports) {
  const layer = layui.layer,
    tool = layui.tool,
    form = layui.form,
    table = layui.table,
    tree = layui.tree;

  const dataPicker = {
    department: {
      title: "选择部门",
      url: "/api/index/get_department",
      area: ["400px", "524px"],
      searchbar: "",
      page: false,
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "部门名称" }
      ]
    },
    position: {
      title: "选择岗位",
      url: "/api/index/get_position",
      area: ["400px", "524px"],
      searchbar: "",
      page: false,
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "岗位名称" }
      ]
    },
    services: {
      title: "选择服务类型",
      url: "/api/index/get_services",
      area: ["400px", "524px"],
      searchbar: "",
      page: false,
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "服务名称" },
        { field: "price", title: "服务单价" }
      ]
    },
    template: {
      title: "选择消息模板",
      url: "/api/index/get_template",
      area: ["600px", "568px"],
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "消息模板名称" }
      ]
    },
    workcate: {
      title: "选择工作类型",
      url: "/api/index/get_work_cate",
      area: ["400px", "524px"],
      searchbar: "",
      page: false,
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "工作类型名称" }
      ]
    },
    property: {
      title: "选择固定资产",
      url: "/adm/api/get_property",
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "资产名称" }
      ]
    },
    car: {
      title: "选择车辆信息",
      url: "/adm/api/get_car",
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "车辆名称" },
        { field: "name", width: 100, title: "车牌号码", align: "center" }
      ]
    },
    room: {
      title: "选择会议室",
      url: "/adm/api/get_meeting_room",
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "会议室名称" },
        { field: "num", width: 100, title: "可容纳人数", align: "center" }
      ]
    },
    customer: {
      title: "选择客户",
      url: "/customer/api/get_customer",
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "name", title: "客户名称" }
      ]
    },
    supplier: {
      title: "选择供应商",
      url: "/contract/api/get_supplier",
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "供应商名称" }
      ]
    },
    contract: {
      title: "选择销售合同",
      url: "/contract/api/get_contract",
      area: ["800px", "568px"],
      cols: [
        { field: "code", width: 160, title: "合同编号", align: "center" },
        { field: "name", title: "合同名称" },
        { field: "customer", title: "关联客户", width: 240 }
      ]
    },
    product: {
      title: "选择产品",
      url: "/contract/api/get_product",
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "产品名称" },
        { field: "sale_price", title: "销售单价", width: 120, align: "center" }
      ]
    },
    purchase: {
      title: "选择采购合同",
      url: "/contract/api/get_purchase",
      area: ["800px", "568px"],
      cols: [
        { field: "code", width: 160, title: "合同编号", align: "center" },
        { field: "name", title: "合同名称" },
        { field: "supplier", title: "关联供应商", width: 240 }
      ]
    },
    purchased: {
      title: "选择采购物品",
      url: "/contract/api/get_purchased",
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "采购物品名称" },
        {
          field: "purchase_price",
          title: "采购单价",
          width: 120,
          align: "center"
        }
      ]
    },
    project: {
      title: "选择项目",
      url: "/project/api/get_project",
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "项目名称" }
      ]
    },
    task: {
      title: "选择任务",
      url: "/project/api/get_task",
      area: ["800px", "568px"],
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "title", title: "任务主题" },
        { field: "project", width: 240, title: "关联项目" }
      ]
    },
    workPlan: {
      title: "选择班次",
      url: "/user/api/get_work_plan",
      cols: [
        { field: "id", width: 90, title: "序号", align: "center" },
        { field: "name", title: "班次名称" },
        {
          field: "time",
          width: 240,
          title: "考勤时间"
        }
      ]
    }
  };

  let select_ids = [];
  select_names = [];
  select_array = [];
  const obj = {
    employeeRender: function () {
      var me = this,
        letterTem = "";
      for (var i = 0; i < 26; i++) {
        letterTem +=
          '<span class="layui-letter-span" data-code="' +
          String.fromCharCode(97 + i) +
          '">' +
          String.fromCharCode(65 + i) +
          "</span>";
      }
      var tpl =
        '<div style="width:210px; height:388px; border-right:1px solid #eee; overflow-x: hidden; overflow-y: auto; float:left;">\
							<div id="employeeDepament" style="padding:6px 0;"></div>\
						</div>\
						<div style="width:588px; height:388px; user-select:none; overflow-x: hidden; overflow-y: auto; float:left;">\
							<div style="padding:12px 10px 0;"><div style="color:#999; text-align:center;">⇐ 点击左边部门筛选员工，或者点击下面字母筛选</div><div id="letterBar" style="color:#999; text-align:center;">' +
        letterTem +
        '</div></div>\
							<div id="employee" style="padding:6px 12px"></div>\
							<div style="padding:10px 15px; border-top:1px solid #eee;;"><strong>已选择</strong><span class="layui-tags-all">全选</span></div>\
							<div id="selectTags" style="padding:10px 15px;">' +
        me.employeeSelect(0) +
        "</div>\
						</div>";
      return tpl;
    },
    employeeSelect: function (t) {
      var me = this,
        select_tags = "";
      if (me.settings.type == 0) {
        select_tags +=
          '<span style="color:#1E9FFF">' + me.settings.names + "</span>";
      } else {
        select_ids = [];
        select_names = [];
        for (var a = 0; a < select_array.length; a++) {
          if (
            me.settings.fixedid == select_array[a].id &&
            me.settings.fixedid != 0
          ) {
            select_tags +=
              '<span class="layui-tags-span">' +
              select_array[a].name +
              "</span>";
          } else {
            select_tags +=
              '<span class="layui-tags-span">' +
              select_array[a].name +
              '<i data-id="' +
              select_array[a].id +
              '" class="layui-icon layui-tags-close">ဆ</i></span>';
          }
          if (t == 1) {
            $("#employee")
              .find('[data-id="' + select_array[a].id + '"]')
              .addClass("on");
          }
          select_ids.push(parseInt(select_array[a].id));
          select_names.push(select_array[a].name);
        }
      }
      //console.log(select_array);
      return select_tags;
    },
    employeeInit: function (options) {
      const opts = {
        title: "选择员工",
        department_url: "/api/index/get_department_tree",
        employee_url: "/api/index/get_employee",
        type: 1, //1单人,2多人
        fixedid: 0,
        ids: "",
        names: "",
        ajax_data: [],
        callback: function () {}
      };
      this.settings = $.extend({}, opts, options);
      var me = this;
      select_ids = [];
      select_names = [];
      select_array = [];
      if (me.settings.ids != "" && me.settings.names != "") {
        select_ids = me.settings.ids.split(",");
        select_names = me.settings.names.split(",");
        select_ids.sort((a, b) => a - b);
        for (var m = 0; m < select_ids.length; m++) {
          select_array.push({ id: select_ids[m], name: select_names[m] });
        }
      }
      $(parent.$(".express-close")).addClass("parent-colse");
      layer.open({
        type: 1,
        title: me.settings.title,
        area: ["800px", "500px"],
        resize: false,
        content: me.employeeRender(),
        end: function () {
          $(parent.$(".express-close")).removeClass("parent-colse");
        },
        success: function (obj, idx) {
          var dataList = [],
            letterBar = $("#letterBar"),
            employee = $("#employee"),
            selectTags = $("#selectTags");
          $.ajax({
            url: me.settings.department_url,
            type: "get",
            success: function (res) {
              //仅节点左侧图标控制收缩
              tree.render({
                elem: "#employeeDepament",
                data: res.trees,
                onlyIconControl: true, //是否仅允许节点左侧图标控制展开收缩
                click: function (obj) {
                  var tagsItem =
                    '<div style="color:#999; text-align:center;">暂无员工</div>';
                  $("#employeeDepament")
                    .find(".layui-tree-main")
                    .removeClass("on");
                  $(obj.elem).find(".layui-tree-main").eq(0).addClass("on");
                  letterBar.find("span").removeClass("on");
                  $.ajax({
                    url: me.settings.employee_url,
                    type: "get",
                    data: { did: obj.data.id },
                    success: function (res) {
                      me.ajax_data = res.data;
                      dataList = me.ajax_data;
                      if (dataList.length > 1 && me.settings.type == 2) {
                        $(".layui-tags-all").show();
                      } else {
                        $(".layui-tags-all").hide();
                      }
                      if (dataList.length > 0) {
                        tagsItem = "";
                        for (var i = 0; i < dataList.length; i++) {
                          if (select_ids.indexOf(dataList[i].id) == -1) {
                            tagsItem +=
                              '<span class="layui-tags-span" data-idx="' +
                              i +
                              '" data-id="' +
                              dataList[i].id +
                              '">' +
                              dataList[i].name +
                              "</span>";
                          } else {
                            tagsItem +=
                              '<span class="layui-tags-span on" data-idx="' +
                              i +
                              '" data-id="' +
                              dataList[i].id +
                              '">' +
                              dataList[i].name +
                              "</span>";
                          }
                        }
                      }
                      employee.html(tagsItem);
                    }
                  });
                }
              });

              letterBar.on("click", "span", function () {
                var code = $(this).data("code");
                $(this).addClass("on").siblings().removeClass("on");
                $.ajax({
                  url: me.settings.employee_url,
                  type: "get",
                  data: { id: 1 },
                  success: function (res) {
                    me.ajax_data = res.data;
                    var letterData = [],
                      tagsItem =
                        '<div style="color:#999; text-align:center;">暂无员工</div>';
                    if (me.ajax_data.length > 0) {
                      var tagsItemCode = "";
                      for (var i = 0; i < me.ajax_data.length; i++) {
                        if (me.ajax_data[i].username.slice(0, 1) == code) {
                          if (select_ids.indexOf(me.ajax_data[i].id) == -1) {
                            tagsItemCode +=
                              '<span class="layui-tags-span" data-idx="' +
                              i +
                              '" data-id="' +
                              me.ajax_data[i].id +
                              '">' +
                              me.ajax_data[i].name +
                              "</span>";
                          } else {
                            tagsItemCode +=
                              '<span class="layui-tags-span on" data-idx="' +
                              i +
                              '" data-id="' +
                              me.ajax_data[i].id +
                              '">' +
                              me.ajax_data[i].name +
                              "</span>";
                          }
                          letterData.push(me.ajax_data[i]);
                        }
                      }
                      dataList = letterData;
                      if (dataList.length > 2 && me.settings.type == 2) {
                        $(".layui-tags-all").show();
                      } else {
                        $(".layui-tags-all").hide();
                      }
                      if (tagsItemCode != "") {
                        tagsItem = tagsItemCode;
                      }
                    }
                    employee.html(tagsItem);
                  }
                });
              });
            }
          });

          if (me.settings.type == 2) {
            $(".layui-tags-all").on("click", function () {
              for (var a = 0; a < dataList.length; a++) {
                if (select_ids.indexOf(dataList[a]["id"]) == -1) {
                  select_array.push(dataList[a]);
                }
              }
              selectTags.html(me.employeeSelect(1));
            });
          }

          employee.on("click", ".layui-tags-span", function () {
            let item_idx = $(this).data("idx");
            let select_item = me.ajax_data[item_idx];
            if (me.settings.type == 1) {
              me.settings.callback([select_item]);
              layer.close(idx);
            } else {
              if (select_ids.indexOf(select_item["id"]) == -1) {
                select_array.push(select_item);
                selectTags.html(me.employeeSelect(1));
              }
            }
          });

          selectTags.on("click", ".layui-tags-close", function () {
            let id = $(this).data("id");
            let new_slected = [];
            $("#employee")
              .find('[data-id="' + id + '"]')
              .removeClass("on");
            for (var i = 0; i < select_array.length; i++) {
              if (select_array[i].id != id) {
                new_slected.push(select_array[i]);
              }
            }
            select_array = new_slected;
            selectTags.html(me.employeeSelect(1));
          });
          if (me.settings.type == 1) {
            $("#layui-layer" + idx)
              .find(".layui-layer-btn0")
              .hide();
          }
        },
        btn: ["确定添加", "清空已选"],
        btnAlign: "c",
        btn1: function (idx) {
          me.settings.callback(select_array);
          layer.close(idx);
        },
        btn2: function (idx) {
          let canceldata = {
            department: "",
            did: 0,
            id: 0,
            mobile: 0,
            name: "",
            nickname: "",
            position_id: 0,
            sex: 0,
            status: 0,
            thumb: "",
            username: ""
          };
          me.settings.callback([canceldata]);
          layer.close(idx);
        }
      });
    },
    picker: function (types, type, callback, map) {
      let pickerIndex = new Date().getTime();
      let pickerTable, options;
      const opts = {
        title: "选择",
        url: "",
        ids: "",
        titles: "",
        where: map,
        area: ["600px", "568px"],
        cols: [
          { field: "id", width: 80, title: "序号", align: "center" },
          { field: "title", title: "名称" }
        ],
        searchbar:
          '<form class="layui-form pb-2"><div class="layui-input-inline" style="width:420px; margin-right:5px;"><input type="text" name="keywords" placeholder="请输入关键字" class="layui-input" autocomplete="off" /></div><button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="picker">提交搜索</button><button type="reset" class="layui-btn layui-btn-reset" lay-filter="picker-reset">清空</button></form>',
        page: true,
        type: type, //1单选择,2多选
        btnno: true,
        add: "", //新增url
        callback: callback
      };
      if (Object.prototype.toString.call(types) === "[object Object]") {
        options = types;
      } else {
        options = dataPicker[types];
      }
      let settings = $.extend({}, opts, options);
      //console.log(settings);
      let btn = ["确定选择"];
      if (settings.btnno == true) {
        btn = ["确定选择", "清空已选"];
      }
      if (settings.add != "") {
        btn = ["确定选择", "清空已选", "新增"];
      }
      $(parent.$(".express-close")).addClass("parent-colse");
      layer.open({
        title: settings.title,
        area: settings.area,
        type: 1,
        skin: "gougu-picker",
        content:
          '<div class="picker-table" id="pickerBox' +
          pickerIndex +
          '">' +
          settings.searchbar +
          '<div id="pickerTable' +
          pickerIndex +
          '"></div></div>',
        end: function () {
          $(parent.$(".express-close")).removeClass("parent-colse");
        },
        success: function () {
          let cols = JSON.parse(JSON.stringify(settings.cols));
          if (settings.type == 1) {
            cols.splice(0, 0, { type: "radio", title: "选择" });
          }
          if (settings.type == 2) {
            cols.splice(0, 0, { type: "checkbox", title: "选择" });
          }
          // 单独处理
          // 班次的列格式化显示
          if (types == "workPlan") {
            cols[cols.length - 1].templet = function (d) {
              var html = "";
              if (d.times && d.times.length) {
                for (var i = 0; i < d.times.length; i++) {
                  html +=
                    "<span style='margin-right: 30px'>" +
                    d.times[i].begin_time +
                    " - " +
                    d.times[i].end_time +
                    "</span>";
                }
              } else {
                html = "-";
              }
              return html;
            };
          }
          pickerTable = table.render({
            elem: "#pickerTable" + pickerIndex,
            url: settings.url,
            where: settings.where,
            page: settings.page, //开启分页
            limit: 10,
            height: "407",
            cols: [cols]
          });
          //搜索提交
          form.on("submit(picker)", function (data) {
            let maps = $.extend({}, settings.where, data.field);
            pickerTable.reload({ where: maps, page: { curr: 1 } });
            return false;
          });
          //重置搜索提交
          $("#pickerBox" + pickerIndex).on(
            "click",
            '[lay-filter="picker-reset"]',
            function () {
              let prev = $(this).prev();
              if (typeof prev != "undefined") {
                setTimeout(function () {
                  prev.click();
                }, 10);
              }
            }
          );
        },
        btn: btn,
        btnAlign: "c",
        btn1: function (idx) {
          var checkStatus = table.checkStatus(pickerTable.config.id);
          var data = checkStatus.data;
          if (data.length > 0) {
            callback(data);
            layer.close(idx);
          } else {
            layer.msg("请先选择内容");
            return false;
          }
        },
        btn2: function (idx) {
          callback([{ id: 0, title: "", name: "" }]);
          layer.close(idx);
        },
        btn3: function (idx) {
          tool.side(settings.add);
          layer.close(idx);
        }
      });
    }
  };

  //选择员工弹窗
  $("body").on("click", ".picker-admin", function () {
    let that = $(this);
    let type = that.data("type");
    if (typeof type == "undefined" || type == "") {
      type = 1;
    }
    let ids = that.next().val() + "",
      names = that.val() + "";
    obj.employeeInit({
      ids: ids,
      names: names,
      type: type,
      callback: function (data) {
        let select_id = [],
          select_name = [];
        for (var a = 0; a < data.length; a++) {
          select_id.push(data[a].id);
          select_name.push(data[a].name);
        }
        console.log(select_name);
        that.val(select_name.join(","));
        that.next().val(select_id.join(","));
      }
    });
  });

  //选择下属员工弹窗
  $("body").on("click", ".picker-sub", function () {
    let that = $(this);
    let type = that.data("type");
    if (typeof type == "undefined" || type == "") {
      type = 1;
    }
    let ids = that.next().val() + "",
      names = that.val() + "";
    obj.employeeInit({
      title: "选择下属",
      department_url: "/api/index/get_department_tree_sub",
      employee_url: "/api/index/get_employee_sub",
      ids: ids,
      names: names,
      type: type,
      callback: function (data) {
        let select_id = [],
          select_name = [];
        for (var a = 0; a < data.length; a++) {
          select_id.push(data[a].id);
          select_name.push(data[a].name);
        }
        console.log(select_name);
        that.val(select_name.join(","));
        that.next().val(select_id.join(","));
      }
    });
  });

  //选择OA数据弹层
  $("body").on("click", ".picker-oa", function () {
    let that = $(this),
      ids = [],
      titles = [],
      map = {};
    let types = that.data("types");
    let type = that.data("type");
    let where = that.data("where");
    if (typeof types == "undefined" || types == "") {
      layer.msg("请设置【picker】的类型");
      return false;
    }
    if (typeof type == "undefined" || type == "") {
      type = 1;
    }
    if (typeof where == "undefined" || where == "") {
      map = {};
    } else {
      map = JSON.parse(where);
    }
    let callback = function (data) {
      for (var i = 0; i < data.length; i++) {
        ids.push(data[i].id);
        if (!data[i].title) {
          titles.push(data[i].name);
        } else {
          titles.push(data[i].title);
        }
      }
      that.val(titles.join(","));
      that.next().val(ids.join(","));
      // 单独处理班次按钮的处理结果
      if (types == "workPlan") {
        var selectName = data[0].name;
        var html = "";
        if (selectName) {
          html += selectName + "：";
        }
        if (data[0].times && data[0].times.length) {
          for (var i = 0; i < data[0].times.length; i++) {
            var timeItem = data[0].times[i];
            html +=
              "<span style='margin-right: 30px'>" +
              timeItem.begin_time +
              " - " +
              timeItem.end_time +
              "</span>";
          }
        }
        that.parent().prev().html(html);
      }
    };
    obj.picker(types, type, callback, map);
  });

  //输出接口
  exports("oaPicker", obj);
});