{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<style>
  #showNecessaryTimeBox,
  #showUnNecessaryTimeBox {
    display: flex;
  }
  #showNecessaryTimeBox p,
  #showUnNecessaryTimeBox p {
    line-height: 26px;
    display: none;
  }
  #showNecessaryTimeList,
  #showUnNecessaryTimeList {
    display: flex;
    gap: 20px;
  }
  .timeItem {
    border: 1px solid #ccc;
    padding: 2px 8px;
    border-radius: 4px;
    position: relative;
  }
  .closeBtn {
    background: #ff5722;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 18px;
    text-align: center;
    position: absolute;
    right: -6px;
    top: -6px;
    cursor: pointer;
  }
</style>
<form class="layui-form p-4">
  <h3 class="pb-3">考勤组</h3>
  {if condition="$id eq 0"}
  <table class="layui-table">
    <tr>
      <td class="layui-td-gray-3">考勤组名称<font>*</font></td>
      <td>
        <input
          type="text"
          name="name"
          lay-verify="required"
          autocomplete="off"
          placeholder="请输入考勤组名称"
          lay-reqText="请输入岗位名称"
          class="layui-input"
        />
      </td>
      <td class="layui-td-gray-3">考勤类型<font>*</font></td>
      <td>
        <select name="type" lay-verify="required" lay-reqText="请选择">
          <option value="">请选择</option>
          <option value="1">固定班制</option>
          <option value="2">自由工时</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray-3">参与考勤人员<font>*</font></td>
      <td>
        <input
          type="text"
          name="attendance_participants"
          autocomplete="off"
          readonly
          lay-verify="required"
          lay-reqText="请选择参与考勤人员"
          placeholder="请选择参与考勤人员"
          class="layui-input picker-diy"
        />
        <input type="hidden" name="attendance_participants_id" />
      </td>
      <td class="layui-td-gray-3">无需考勤人员</td>
      <td>
        <input
          type="text"
          name="attendance_not_participants"
          autocomplete="off"
          readonly
          lay-reqText="请选择无需考勤人员"
          placeholder="请选择无需考勤人员"
          class="layui-input picker-diy"
        />
        <input type="hidden" name="attendance_not_participants_id" />
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray">工作日设置<font>*</font></td>
      <td colspan="5">
        <table
          id="timeBox"
          class="layui-table layui-table-min"
          style="margin: 0"
        >
          <tr>
            <th width="50"></th>
            <th width="100">工作日</th>
            <th>班次时间段</th>
            <th width="60">操作</th>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="work1" lay-skin="primary" title="" />
            </td>
            <td>周一</td>
            <td style="text-align: left"></td>
            <td>
              <a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
                >设置班次</a
              >
              <input type="hidden" name="work_plan_id1" value="" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="work2" lay-skin="primary" title="" />
            </td>
            <td>周二</td>
            <td style="text-align: left"></td>
            <td>
              <a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
                >设置班次</a
              >
              <input type="hidden" name="work_plan_id2" value="" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="work3" lay-skin="primary" title="" />
            </td>
            <td>周三</td>
            <td style="text-align: left"></td>
            <td>
              <a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
                >设置班次</a
              >
              <input type="hidden" name="work_plan_id3" value="" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="work4" lay-skin="primary" title="" />
            </td>
            <td>周四</td>
            <td style="text-align: left"></td>
            <td>
              <a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
                >设置班次</a
              >
              <input type="hidden" name="work_plan_id4" value="" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="work5" lay-skin="primary" title="" />
            </td>
            <td>周五</td>
            <td style="text-align: left"></td>
            <td>
              <a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
                >设置班次</a
              >
              <input type="hidden" name="work_plan_id5" value="" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="work6" lay-skin="primary" title="" />
            </td>
            <td>周六</td>
            <td style="text-align: left"></td>
            <td>
              <a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
                >设置班次</a
              >
              <input type="hidden" name="work_plan_id6" value="" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="work7" lay-skin="primary" title="" />
            </td>
            <td>周日</td>
            <td style="text-align: left"></td>
            <td>
              <a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
                >设置班次</a
              >
              <input type="hidden" name="work_plan_id7" value="" />
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray-3">特殊日期</td>
      <td colspan="5">
        <div style="margin-bottom: 10px">
          <div id="showNecessaryTimeBox">
            <p>必须打卡日期：</p>
            <div id="showNecessaryTimeList"></div>
          </div>
        </div>
        <div style="margin-bottom: 10px">
          <button
            class="layui-btn layui-btn-sm"
            type="button"
            id="addNecessaryTimeBtn"
          >
            + 新增必须打卡的日期
          </button>
        </div>
        <div style="margin-bottom: 10px">
          <div id="showUnNecessaryTimeBox">
            <p>无需打卡日期：</p>
            <div id="showUnNecessaryTimeList"></div>
          </div>
        </div>
        <div style="margin-bottom: 10px">
          <button
            class="layui-btn layui-btn-sm"
            type="button"
            id="addUnNecessaryTimeBtn"
          >
            + 新增无需打卡的日期
          </button>
        </div>
      </td>
    </tr>
  </table>
  {else/}
  <table class="layui-table layui-table-form">
    <tr>
      <td class="layui-td-gray">考勤组名称<font>*</font></td>
      <td>
        <input
          type="text"
          name="name"
          value="{$detail.name}"
          lay-verify="required"
          autocomplete="off"
          placeholder="请输入考勤组名称"
          lay-reqText="请输入岗位名称"
          class="layui-input"
        />
      </td>
    </tr>
  </table>
  {/if}
  <div class="pt-4">
    <input type="hidden" name="id" value="{$id}" />
    <button
      class="layui-btn layui-btn-normal"
      lay-submit=""
      lay-filter="webform"
    >
      立即提交
    </button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
  const moduleInit = ["tool", "oaPicker"];
  function gouguInit() {
    var oaPicker = layui.oaPicker,
      laydate = layui.laydate,
      form = layui.form,
      tool = layui.tool;
    //选择员工弹窗
    $("body").on("click", ".picker-diy", function () {
      let that = $(this);
      let ids = that.next().val() + "",
        names = that.val() + "";
      oaPicker.employeeInit({
        ids: ids,
        names: names,
        type: 2, //1是单选，2是多选
        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);
          }
          that.val(select_name.join(","));
          that.next().val(select_id.join(","));
        }
      });
    });

    laydate.render({
      elem: "#addNecessaryTimeBtn",
      done: function (value, date) {
        $("#addNecessaryTimeBtn").html("+ 新增必须打卡的日期");
        var oldValues = $(".timeValue");
        var isE = false;
        for (let i = 0; i < oldValues.length; i++) {
          const oldValue = oldValues[i];
          if (oldValue.innerHTML == value) {
            isE = true;
          }
        }
        if (!isE) {
          $("#showNecessaryTimeBox p").show();
          $("#showNecessaryTimeList").append(
            "<div class='timeItem'><span class='timeValue'>" +
              value +
              "</span><input type='hidden' name='necessaryTime[]' value=" +
              value +
              " /><span class='closeBtn layui-icon'>&#x1006;</span></div>"
          );
          bindCloseBtn();
        } else {
          layer.msg("已有相同日期");
        }
      }
    });

    laydate.render({
      elem: "#addUnNecessaryTimeBtn",
      done: function (value, date) {
        $("#addUnNecessaryTimeBtn").html("+ 新增无需打卡的日期");
        var oldValues = $(".timeValue");
        var isE = false;
        for (let i = 0; i < oldValues.length; i++) {
          const oldValue = oldValues[i];
          if (oldValue.innerHTML == value) {
            isE = true;
          }
        }
        if (!isE) {
          $("#showUnNecessaryTimeBox p").show();
          $("#showUnNecessaryTimeList").append(
            "<div class='timeItem'><span class='timeValue'>" +
              value +
              "</span><input type='hidden' name='unNecessaryTime[]' value=" +
              value +
              " /><span class='closeBtn layui-icon'>&#x1006;</span></div>"
          );
          bindCloseBtn();
        } else {
          layer.msg("已有相同日期");
        }
      }
    });
    
		//监听提交
    form.on("submit(webform)", function (data) {
      let callback = function (e) {
        layer.msg(e.msg);
        if (e.code == 0) {
          tool.sideClose(1000);
        }
      };
      tool.post("/user/attendance/add", data.field, callback);
      return false;
    });
  }

  function bindCloseBtn() {
    $(".closeBtn").off("click");
    $(".closeBtn").on("click", function () {
      let that = $(this);
      that.parent().remove();
      if ($("#showNecessaryTimeList .timeItem").length == 0) {
        $("#showNecessaryTimeBox p").hide();
      }
      if ($("#showUnNecessaryTimeList .timeItem").length == 0) {
        $("#showUnNecessaryTimeBox p").hide();
      }
    });
  }
</script>
{/block}
<!-- /脚本 -->