{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<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">班次名称<font>*</font></td>
      <td colspan="3">
        <input
          type="text"
          name="name"
          lay-verify="required"
          autocomplete="off"
          placeholder="请输入班次名称"
          lay-reqText="请输入班次名称"
          class="layui-input"
        />
      </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="180">上班时间</th>
            <th width="100">上班是否打卡</th>
            <th width="180">下班时间</th>
            <th width="100">下班是否打卡</th>
            <th>打卡时段</th>
            <th width="60">操作</th>
          </tr>
          <tr class="timeItem">
            <td>
              <input
                type="text"
                class="layui-input tool-time"
                data-type="time"
                data-format="HH:mm"
                name="begin_time[]"
                lay-verify="required"
                placeholder="请选择时间"
                lay-reqText="请选择时间"
                readonly
                value=""
              />
            </td>
            <td style="text-align: left">
              <select
                name="need_begin_check[]"
                lay-verify="required"
                lay-reqText="请选择"
              >
                <option value="">请选择</option>
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </td>
            <td>
              <input
                type="text"
                class="layui-input tool-time"
								data-type="time"
                data-format="HH:mm"
                name="end_time[]"
                lay-verify="required"
                placeholder="请选择时间"
                lay-reqText="请选择时间"
                readonly
                
              />
            </td>
            <td style="text-align: left">
              <select
                name="need_end_check[]"
                lay-verify="required"
                lay-reqText="请选择"
              >
                <option value="">请选择</option>
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </td>
            <td style="text-align: left">
              <div
                style="
                  display: flex;
                  line-height: 36px;
                  gap: 10px;
                  margin-bottom: 10px;
                "
              >
                <span>上班前</span>
                <select
                  name="check_begin_start_time[]"
                  lay-reqText="请选择"
                >
                  <option value="">未设置</option>
                  <option value="10">10分钟</option>
                  <option value="30">半小时</option>
                  <option value="60">一小时</option>
                </select>
                <span>→ 上班后</span>
                <select
                  name="check_begin_end_time[]"
                  lay-reqText="请选择"
                >
                  <option value="">未设置</option>
                  <option value="10">10分钟</option>
                  <option value="30">半小时</option>
                  <option value="60">一小时</option>
                </select>
              </div>
              <div style="display: flex; line-height: 36px; gap: 10px">
                <span>下班前</span>
                <select
                  name="check_end_start_time[]"
                  lay-reqText="请选择"
                >
                  <option value="">未设置</option>
                  <option value="10">10分钟</option>
                  <option value="30">半小时</option>
                  <option value="60">一小时</option>
                </select>
                <span>→ 下班后</span>
                <select
                  name="check_end_end_time[]"
                  lay-reqText="请选择"
                >
                  <option value="">未设置</option>
                  <option value="10">10分钟</option>
                  <option value="30">半小时</option>
                  <option value="60">一小时</option>
                </select>
              </div>
            </td>
            <td>
              <a
                class="layui-btn layui-btn-danger layui-btn-xs"
                data-id="0"
                lay-event="del"
                >删除</a
              >
            </td>
          </tr>
        </table>
        <div class="pt-2">
          <button class="layui-btn layui-btn-sm" type="button" id="addTimeBtn">
            + 上下班时间选项
          </button>
        </div>
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray">弹性打卡</td>
      <td colspan="3" style="display: flex; line-height: 36px; gap: 10px">
        <p>上班后</p>
        <select
          name="check_begin_bounce"
          lay-reqText="请选择"
        >
          <option value="">未设置</option>
          <option value="5">5分钟</option>
          <option value="10">10分钟</option>
          <option value="30">半小时</option>
        </select>
        <p>下班前</p>
        <select
          name="check_end_bounce"
          lay-reqText="请选择"
        >
          <option value="">未设置</option>
          <option value="5">5分钟</option>
          <option value="10">10分钟</option>
          <option value="30">半小时</option>
        </select>
      </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>
    <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="180">上班时间</th>
            <th width="100">上班是否打卡</th>
            <th width="180">下班时间</th>
            <th width="100">下班是否打卡</th>
            <th>打卡时段</th>
            <th width="60">操作</th>
          </tr>
					{volist name="$detail.times" id="val"}
          <tr class="timeItem">
            <td>
              <input
                type="text"
                class="layui-input tool-time"
                data-type="time"
                data-format="HH:mm"
                name="begin_time[]"
                lay-verify="required"
                placeholder="请选择时间"
                lay-reqText="请选择时间"
                readonly
                value="{$val.begin_time}"
              />
            </td>
            <td style="text-align: left">
              <select
                name="need_begin_check[]"
                lay-verify="required"
                lay-reqText="请选择"
              >
                <option value="">请选择</option>
								<option value="1" {eq name="1" value="$val.need_begin_check"} selected{/eq}>是</option>
                <option value="0" {eq name="0" value="$val.need_begin_check"} selected{/eq}>否</option>
              </select>
            </td>
            <td>
              <input
                type="text"
                class="layui-input tool-time"
								data-type="time"
                data-format="HH:mm"
                name="end_time[]"
                lay-verify="required"
                placeholder="请选择时间"
                lay-reqText="请选择时间"
                readonly
                value="{$val.end_time}"
              />
            </td>
            <td style="text-align: left">
              <select
                name="need_end_check[]"
                lay-verify="required"
                lay-reqText="请选择"
              >
                <option value="">请选择</option>
								<option value="1" {eq name="1" value="$val.need_end_check"} selected{/eq}>是</option>
                <option value="0" {eq name="0" value="$val.need_end_check"} selected{/eq}>否</option>
              </select>
            </td>
            <td style="text-align: left">
              <div
                style="
                  display: flex;
                  line-height: 36px;
                  gap: 10px;
                  margin-bottom: 10px;
                "
              >
                <span>上班前</span>
                <select
                  name="check_begin_start_time[]"
                  lay-reqText="请选择"
                >
                  <option value="">未设置</option>
									<option value="10" {eq name="10" value="$val.check_begin_start_time"} selected{/eq}>10分钟</option>
                  <option value="30" {eq name="30" value="$val.check_begin_start_time"} selected{/eq}>半小时</option>
                  <option value="60" {eq name="60" value="$val.check_begin_start_time"} selected{/eq}>一小时</option>
                </select>
                <span>→ 上班后</span>
                <select
                  name="check_begin_end_time[]"
                  lay-reqText="请选择"
                >
                  <option value="">未设置</option>
									<option value="10" {eq name="10" value="$val.check_begin_end_time"} selected{/eq}>10分钟</option>
                  <option value="30" {eq name="30" value="$val.check_begin_end_time"} selected{/eq}>半小时</option>
                  <option value="60" {eq name="60" value="$val.check_begin_end_time"} selected{/eq}>一小时</option>
                </select>
              </div>
              <div style="display: flex; line-height: 36px; gap: 10px">
                <span>下班前</span>
                <select
                  name="check_end_start_time[]"
                  lay-reqText="请选择"
                >
                  <option value="">未设置</option>
									<option value="10" {eq name="10" value="$val.check_end_start_time"} selected{/eq}>10分钟</option>
                  <option value="30" {eq name="30" value="$val.check_end_start_time"} selected{/eq}>半小时</option>
                  <option value="60" {eq name="60" value="$val.check_end_start_time"} selected{/eq}>一小时</option>
                  
                </select>
                <span>→ 下班后</span>
                <select
                  name="check_end_end_time[]"
                  lay-reqText="请选择"
                >
                  <option value="">未设置</option>
									<option value="10" {eq name="10" value="$val.check_end_end_time"} selected{/eq}>10分钟</option>
                  <option value="30" {eq name="30" value="$val.check_end_end_time"} selected{/eq}>半小时</option>
                  <option value="60" {eq name="60" value="$val.check_end_end_time"} selected{/eq}>一小时</option>
                  
                </select>
              </div>
            </td>
            <td>
							<input type="hidden" name="time_id[]" class="layui-input" value="{$val.id}">
              <a
                class="layui-btn layui-btn-danger layui-btn-xs"
                data-id="{$val.id}"
                lay-event="del"
                >删除</a
              >
            </td>
          </tr>
					{/volist}
        </table>
        <div class="pt-2">
          <button class="layui-btn layui-btn-sm" type="button" id="addTimeBtn">
            + 上下班时间选项
          </button>
        </div>
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray">弹性打卡</td>
      <td colspan="3" style="display: flex; line-height: 36px; gap: 10px">
        <p>上班后</p>
        <select
          name="check_begin_bounce"
          lay-reqText="请选择"
        >
          <option value="">未设置</option>
          
					<option value="5" {eq name="5" value="$detail.check_begin_bounce"} selected{/eq}>5分钟</option>
          <option value="10" {eq name="10" value="$detail.check_begin_bounce"} selected{/eq}>10分钟</option>
          <option value="30" {eq name="30" value="$detail.check_begin_bounce"} selected{/eq}>半小时</option>
        </select>
        <p>下班前</p>
        <select
          name="check_end_bounce"
          lay-reqText="请选择"
        >
          <option value="">未设置</option>
					<option value="5" {eq name="5" value="$detail.check_end_bounce"} selected{/eq}>5分钟</option>
          <option value="10" {eq name="10" value="$detail.check_end_bounce"} selected{/eq}>10分钟</option>
          <option value="30" {eq name="30" value="$detail.check_end_bounce"} selected{/eq}>半小时</option>
        </select>
      </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"];
  function gouguInit() {

		//添加报销信息表格
		$('#addTimeBtn').on('click',function(){
			var html = '';
			html += '<tr class="timeItem">\
            <td>\
              <input\
                type="text"\
                class="layui-input tool-time"\
                data-type="time"\
                data-format="HH:mm"\
                name="begin_time[]"\
                lay-verify="required"\
                placeholder="请选择时间"\
                lay-reqText="请选择时间"\
                readonly\
                value=""\
              />\
            </td>\
            <td style="text-align: left">\
              <select\
                name="need_begin_check[]"\
                lay-verify="required"\
                lay-reqText="请选择"\
              >\
                <option value="">请选择</option>\
                <option value="1">是</option>\
                <option value="0">否</option>\
              </select>\
            </td>\
            <td>\
              <input\
                type="text"\
                class="layui-input tool-time"\
								data-type="time"\
                data-format="HH:mm"\
                name="end_time[]"\
                lay-verify="required"\
                placeholder="请选择时间"\
                lay-reqText="请选择时间"\
                readonly\
                value=""\
              />\
            </td>\
            <td style="text-align: left">\
              <select\
                name="need_end_check[]"\
                lay-verify="required"\
                lay-reqText="请选择"\
              >\
                <option value="">请选择</option>\
                <option value="1">是</option>\
                <option value="0">否</option>\
              </select>\
            </td>\
            <td style="text-align: left">\
              <div\
                style="\
                  display: flex;\
                  line-height: 36px;\
                  gap: 10px;\
                  margin-bottom: 10px;\
                "\
              >\
                <span>上班前</span>\
                <select\
                  name="check_begin_start_time[]"\
                  lay-reqText="请选择"\
                >\
                  <option value="">未设置</option>\
                  <option value="10">10分钟</option>\
                  <option value="30">半小时</option>\
                  <option value="60">一小时</option>\
                </select>\
                <span>→ 上班后</span>\
                <select\
                  name="check_begin_end_time[]"\
                  lay-reqText="请选择"\
                >\
                  <option value="">未设置</option>\
                  <option value="10">10分钟</option>\
                  <option value="30">半小时</option>\
                  <option value="60">一小时</option>\
                </select>\
              </div>\
              <div style="display: flex; line-height: 36px; gap: 10px">\
                <span>下班前</span>\
                <select\
                  name="check_end_start_time[]"\
                  lay-reqText="请选择"\
                >\
                  <option value="">未设置</option>\
                  <option value="10">10分钟</option>\
                  <option value="30">半小时</option>\
                  <option value="60">一小时</option>\
                </select>\
                <span>→ 下班后</span>\
                <select\
                  name="check_end_end_time[]"\
                  lay-reqText="请选择"\
                >\
                  <option value="">未设置</option>\
                  <option value="10">10分钟</option>\
                  <option value="30">半小时</option>\
                  <option value="60">一小时</option>\
                </select>\
              </div>\
            </td>\
            <td>\
							<input type="hidden" name="time_id[]" class="layui-input" value="0">\
              <a\
                class="layui-btn layui-btn-danger layui-btn-xs"\
                data-id="0"\
                lay-event="del"\
                >删除</a\
              >\
            </td>\
          </tr>';
			$("#timeBox").append(html);
			form.render();
		});

		$('#timeBox').on('click', '[lay-event="del"]', function() {
			if($('.timeItem').length<2){
				layer.msg('至少保留一个时间设置');
				return false;
			}
			var that=$(this);
			var _id = that.data('id');
			if (_id > 0) {
				layer.confirm('确定删除该时间设置？', {
					icon: 3,
					title: '提示'
				}, function(index) {
					$.ajax({
						url: "/user/api/del_work_plan_time",
						type:'post',
						data: {id: _id},
						success: function(res) {
							layer.msg(res.msg);
							if (res.code == 0) {
								that.parents(".timeItem").remove();
							}
						}
					})
					layer.close(index);
				});
			} else {
				$(this).parents(".timeItem").remove();
			}
		});

    var form = layui.form,
      tool = layui.tool;
    form.on("submit(webform)", function (data) {
      let callback = function (e) {
        layer.msg(e.msg);
        if (e.code == 0) {
          setTimeout(function () {
            parent.location.reload();
          }, 1000);
        }
      };
      tool.post("/user/workPlan/add", data.field, callback);
      return false;
    });
  }
</script>
{/block}
<!-- /脚本 -->