{extend name="public:base" /}
{block name="body"}
<div class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form">
                    <!--缴费-->
                    <div class="layui-form-box">
                        <div class="layui-form-head">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    缴费详情
                                </label>
                            </div>
                        </div>
                        <div class="layui-form-body">
                            <div class="layui-row">
                                <input type="hidden" name="em_id" value="{$em.id}">
                                <div class="layui-col-md5">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label layui-text-left">
                                            电表号:
                                        </label>
                                        <div class="layui-input-inline">
                                           <input type="text" name="em_numb" autocomplete="off"
                                                   class="layui-input no-border"  value="{$em.em_numb}" disabled="disabled">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md5">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label layui-text-left">
                                            缴费单号:
                                        </label>
                                        <div class="layui-input-inline">
                                           <input type="text" name="payment_id" autocomplete="off"
                                                   class="layui-input no-border"  value="{$payment.payment_id}" disabled="disabled">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="layui-col-md5">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label layui-text-left">
                                            缴费金额:
                                        </label>
                                        <div class="layui-input-inline">
                                           <input type="text" name="amount" id="amount"
                                                   class="layui-input" >
                                        </div>
                                    </div>
                                </div>


                                <div class="layui-col-md5">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label layui-text-left">
                                            缴费日期:
                                        </label>
                                        <div class="layui-input-inline">
                                           <input type="text" name="pay_date" id="pay_date"
                                                   class="layui-input" >
                                        </div>
                                    </div>
                                </div>


                                <div class="layui-col-md5">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label layui-text-left">
                                            缴费员:
                                        </label>
                                        <div class="layui-input-inline">
                                            <select name="staff_id">
                                                {foreach $staffs as $u}
                                                    <option  value="{$u['id']}"}>{$u['name']}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="layui-form-item layui-col-md-offset4">
                                <button class="layui-btn" lay-filter="save" lay-submit="">
                                保存
                                </button>
                            </div>
                        </div>
                    </div>
                    <!--缴费结束-->
                </form>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>

    //限制输入长度
    function sliceDom(dom,len){
        if(dom.value.length>len)
            return dom.value = dom.value.slice(0,len)
    }



    //初始化Layui控件
    layui.use(['form', 'layer', 'laydate', 'upload'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer,
                laydate = layui.laydate,
                upload = layui.upload;

 
            //消息提示
            function layMsg(msg,type=6,time=1000){
                layer.msg(msg,{
                  icon: type,
                  time: time,
                });
            }

            laydate.render({
                elem:'#pay_date',
                trigger:'click',

            })


            //审核通过
            form.on('submit(save)',
                function (data) {
                    $.ajax({
                        url: '/payment/save',
                        method: "POST",
                        data: data.field,
                        dataType: "json",
                        success: function (data) {
                            if (data.status == 1) {
                                layer.msg(data.message,{icon: 6,time: 1000})
                            } else {
                                layer.msg(data.message,{icon: 5,time: 1000 })
                            }
                        }
                    });

                return false;
            });


            //上传电表照片
            var upPhoto = upload.render({
                elem: '#up_photo' , 
                url: '/up_photo',
                field: 'cp_photo',
                done: function (res) {
                    if(res.status == 1){
                        layMsg(res.message)
                        //将电表照片的ID填写
                        var $photoId = $("input[name='photo_id']")
                        $photoId.val(res.data.id)
                        var $a = $photoId.next('a');
                            $a.removeClass('layui-hide')
                            $a.attr('href',res.data.src);
                    }
                    else {
                        layMsg(res.message,5)
                        return;
                    }                  
                }
            });
        });
</script>
{/block}