{extend name="Public/base" /}
{block name="css"}
<!--<link rel="stylesheet" href="__PUBLIC__/item/css/layui.css?v={$Think.const.APP_VERSION}">-->
<link rel="stylesheet" href="__PUBLIC__/css/customer.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">

<link rel="stylesheet" href="__PUBLIC__/css/font-awesome.min.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/meet.css">
<style>
    .layui-table-page {
        height: 26px;
        margin-top: -14px;
    }
    .controlLabel-d10UO {

        width: 150px;
        display: inline-block;
        text-align: right;
        vertical-align: middle;
        position: relative;
        color: #80848f;
        font-size: 12px;
        line-height: 32px;
        padding: 0 24px 0 0;
        box-sizing: border-box;

    }

    .layui-form-item .layui-input-inline {
        min-width: 75px;
        width: auto;
    }

    .layui-form-mid {
        float: left;
        display: block;
        padding: 5px 0 !important;
        line-height: 20px;
        margin-right: 10px;

    }
</style>
{/block}
{block name="js"}

<script src="__PUBLIC__/js/jquery-1.9.0.min.js?v={$Think.const.APP_VERSION}" type="text/jscript"></script>
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <!--<ul class="layui-tab-title">-->
                <!--<li class="layui-this">计税方案</li>-->
            <!--</ul>-->
            <div class="layui-tab-content" style="height: 100px;">
                <!--第一部分-->
                <div class="layui-tab-item layui-show">
                <form class="layui-form layui-form-pane1" action="" method="post" id="addtax" enctype="multipart/form-data">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 40px;width: 1500px;">
                        <legend>年假规则</legend>
                    </fieldset>
                    <!--<div class="layui-form-item" style="margin-top: 10px;">-->
                        <!--<label class="layui-form-label controlLabel-d10UO">养老保险费率</label>-->
                        <!--<div class="layui-input-inline"></div>-->
                    <!--</div>-->
                    <div class="layui-form-item" style="margin-top: 10px;">

                        <label class="layui-form-label controlLabel-d10UO">时间类型</label>
                        <div class="layui-input-inline">
                            <select name="time_type" id="time_type">
                                <option value="entry_date" {if $detail.time_type eq 'entry_date'} selected{/if}>入职时间</option>
                                <option value="work_date" {if $detail.time_type eq 'work_date'} selected{/if}>累积工作时间</option>
                            </select>
                        </div>
                    </div>
                <div class="rule-ul">
                    {notempty name="$detail.rule"}
                    {volist name="$detail.rule" id='vo' key='k'}
                    <div class="layui-form-item rule_years" style="margin-top: 10px;">

                        <label class="layui-form-label controlLabel-d10UO">&nbsp;</label>
                        <div class="layui-input-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="rule[{$k}][min_years]" value="{$vo.min_years}" placeholder="请输入数字" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux" style="margin-bottom: 3px;"> ——</div>
                        </div>

                        <div class="layui-input-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="rule[{$k}][max_years]" value="{$vo.max_years}" placeholder="请输入数字" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">年，可休年假</div>
                        </div>

                        <label class="layui-form-label controlLabel-d10UO"></label>
                        <div class="layui-input-inline">
                            <input type="text" name="rule[{$k}][base_day]" value="{$vo.base_day}" placeholder="请输入年假天数" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">天</div>

                        <div class="layui-input-inline" style="width: 90px;margin-top: 5px;">
                            <span class="flow-btn-span del-all">-</span>
                        </div>
                    </div>
                    {/volist}

                    {else}

                    <div class="layui-form-item rule_years" style="margin-top: 10px;">

                        <label class="layui-form-label controlLabel-d10UO">&nbsp;</label>
                        <div class="layui-input-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="rule[0][min_years]" value="{$detail.min_years}" placeholder="请输入数字" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux" style="margin-bottom: 3px;"> ——</div>
                        </div>

                        <div class="layui-input-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="rule[0][max_years]" value="{$detail.max_years}" placeholder="请输入数字" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">年，可休年假</div>
                        </div>

                        <label class="layui-form-label controlLabel-d10UO"></label>
                        <div class="layui-input-inline">
                            <input type="text" name="rule[0][base_day]" value="{$detail.base_day}" placeholder="请输入年假天数" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">天</div>

                        <div class="layui-input-inline" style="width: 90px;margin-top: 5px;">
                            <span class="flow-btn-span del-all">-</span>
                        </div>
                    </div>
                    {/notempty}
                </div>


                    <div class="layui-form-item rule_years" style="margin-top: 10px;">
                        <label class="layui-form-label controlLabel-d10UO">&nbsp;</label>
                        <div class="layui-input-inline">
                            <span class="flow-btn-span add-all">+</span>
                        </div>
                    </div>


                    <div class="layui-form-item" style="margin-top: 10px;">
                        <label class="layui-form-label controlLabel-d10UO">每年增加</label>
                        <div class="layui-input-inline">
                            <input type="text" name="every_year_day" value="{$detail.every_year_day}" placeholder="请输入数字" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">天年假，</div>

                        <label class="layui-form-label controlLabel-d10UO"></label>
                        <div class="layui-input-inline">
                            <input type="text" name="max_day" value="{$detail.max_day}" placeholder="请输入数字" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">天封顶 </div>

                    </div>

                    <div class="layui-form-item" style="margin-top: 10px;">
                        <label class="layui-form-label controlLabel-d10UO">年假清零日</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="reset_date_type" lay-filter="reset_date_type" {if $detail.reset_date_type == 1 || !$detail.reset_date_type}checked{/if} value="1" title="固定日清零">
                            <input type="radio" name="reset_date_type" lay-filter="reset_date_type"  class="reset_date_type" {if $detail.reset_date_type == 2}checked{/if} value="2" title="按有效日期清零">
                            <input type="text" name="reset_date" value="{$detail.reset_date}" placeholder="请输入请零日期" class="layui-input" id="reset_date" style="width: 100px;{if $detail.reset_date_type == 2} display: none;{/if}" readonly>

                            <input type="text" name="reset_day" value="{$detail.reset_day}" style="width: 100px;{if $detail.reset_date_type == 1 || !$detail.reset_date_type}display: none;{/if}" placeholder="年假有效天数" class="layui-input" id="reset_day">

                        </div>
                    </div>

                    <div class="layui-form-item" style="margin-top: 10px;">
                        <label class="layui-form-label controlLabel-d10UO">年假发放日</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="add_type" value="1" title="元旦（1月1日)" {if $detail.add_type eq 1} checked {/if}>
                            <input type="radio" name="add_type" value="2" title="年假清零日" {if $detail.add_type eq 2} checked {/if}>
                            <input type="radio" name="add_type" value="3" title="入职周年" {if $detail.add_type eq 3} checked {/if}>
                        </div>
                    </div>

                    <div class="layui-form-item" style="margin-top: 10px;">
                        <label class="layui-form-label controlLabel-d10UO">发放方式</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="add_way" value="1" title="一次性发放" {if $detail.add_way eq 1} checked {/if}>
                            <input type="radio" name="add_way" value="2" title="按月平均发放" {if $detail.add_way eq 2} checked {/if}>
                        </div>
                    </div>



                    <div style="margin-top:100px;margin-bottom:70px;">
                        <center>
                        <span class="layui-btn layui-btn-primary cus-model-btn" id="tax-btn">保存</span>
                        </center>
                    </div>
                </form>
                </div>

            </div>
        </div>

    </div>
</div>



<script>

    layui.use(['laydate', 'layer', 'element','form'], function(){
        var laydate = layui.laydate //日期
        ,layer = layui.layer //弹层
        ,element = layui.element;//元素操作
        var form=layui.form;

        //日期时间选择器
        laydate.render({
            elem: '#reset_date'
            ,format:'MM-dd'
            ,trigger:'click'
        });
        form.on('radio(reset_date_type)', function(data){
            if(data.value ==1){
                $('#reset_date').show();
                $('#reset_day').hide();
            }else{
                $('#reset_date').hide();
                $('#reset_day').show();
            }
        })
        var site = "{$site}" ? "{$site}" : 0;
        //薪资个税阶梯范围
        $('.add-all').click(function(){
            site = parseInt(site)+1;
            var tax_str = '<div class="layui-form-item rule_years" style="margin-top: 10px;">' +
                    '<label class="layui-form-label controlLabel-d10UO">&nbsp;</label>' +
                    '<div class="layui-input-inline">' +
                    '<div class="layui-input-inline">' +
                    '<input type="text" name="rule['+site+'][min_years]" value="" placeholder="请输入数字" class="layui-input">' +
                    '</div>' +
                    '<div class="layui-form-mid layui-word-aux" style="margin-bottom: 3px;"> ——</div>' +
                    '</div>' +
                    '<div class="layui-input-inline">' +
                    '<div class="layui-input-inline">' +
                    '<input type="text" name="rule['+site+'][max_years]" value="" placeholder="请输入数字" class="layui-input">' +
                    '</div>' +
                    '<div class="layui-form-mid layui-word-aux">年，可休年假</div>' +
                    '</div>' +
                    '<label class="layui-form-label controlLabel-d10UO"></label>' +
                    '<div class="layui-input-inline">' +
                    '<input type="text" name="rule['+site+'][base_day]" value="" placeholder="请输入年假天数" class="layui-input">' +
                    '</div>' +
                    '<div class="layui-form-mid layui-word-aux">天</div>' +
                    '<div class="layui-input-inline" style="width: 90px;margin-top: 5px;">' +
                    '<span class="flow-btn-span del-all">-</span>' +
                    '</div>' +
                    '</div>';
            $('.rule-ul').append(tax_str);
            init();
            form.render();
        });

        
        $('#tax-btn').click(function(){
            var info = $('#addtax').serialize();
            $.ajax({
                type:'post',
                url:'/oa/Clocklog/annualLeave',
                data:info,
                success:function(res){
                    if(res.code == 200){
                        layer.alert('设定成功！');
                        history.go(1000)
                    }else{
                        layer.alert(res.msg);
                        history.go(1000)
                    }
                }
            });
            return false;
        });
        init();
    });
    function init(){
        //去除一个阶梯范围
        $('.del-all').each(function(){
            $(this).unbind('click');
        });
        $('.del-all').each(function(){
            $(this).click(function(){
                if($('.rule-ul').find('.rule_years').length > 1){
                    $(this).parent().parent().remove();
                }else{
                    layer.open({
                        content: '不能再删除了~'
                    });
                }
            });
        });
    }
    
</script>
{/block}