{extend name="public:base" /}
{block name="body"}
<div class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-card">
            <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">
                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        基站编号
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="station_sp_code" autocomplete="off"
                                               class="layui-input" value="{$station.station_sp_code|default=''}" disabled="disabled">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        基站名称
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="station_name" autocomplete="off" class="layui-input" value="{$station.station_name|default=''}"
                                               disabled="disabled">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        电表类型
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="project_number" autocomplete="off"
                                               class="layui-input" value="{$em.type.name|default=''}" disabled="disabled">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        电表编号
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="project_number" autocomplete="off"
                                               class="layui-input"  value="{$em.em_numb|default=''}" disabled="disabled">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        倍率
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="rate" name="rate" autocomplete="off"
                                               class="layui-input"  value="{$em.rate}" disabled="disabled">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <form class="layui-form">
                <input type="hidden" name="em_id" value="{$em.id}">
                <input type="hidden" name="charge_type"  value="{$em.rule.charge_type}">
                <input type="hidden" name="pricing_type" value="{$em.rule.pricing_type}">
                <input type="hidden" name="useage_id" value="{$useage.useage_id|default=''}">

                <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">
                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        上次抄表日期
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="last_date" name="last_date"
                                               autocomplete="off" class="layui-input" value="{$useage.last_date}" disabled="disabled">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        本次抄表日期
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="current_date" name="current_date"
                                               autocomplete="off" class="layui-input" value="{$useage.current_date}" {if $useage.status neq 3} disabled="disabled" {/if} >
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>上期度数
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="last_numb" name="last_numb"
                                               autocomplete="off" class="layui-input" disabled="disabled" value="{$useage.last_sum_numb}" >
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">
                                        度
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>本期度数
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="current_numb" name="current_numb"
                                               autocomplete="off" class="layui-input" value="{$useage.current_sum_numb}" {if $useage.status neq 3} disabled="disabled" {/if} >
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">
                                        度
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        用电量
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id="repo_numb" name="repo_numb" autocomplete="off" class="layui-input"  value="{$useage.repo_numb}" disabled="disabled">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">
                                        度
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        单价
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id="price" name="price" autocomplete="off" class="layui-input" {if $useage.status neq 3} disabled="disabled" {/if}  value="{$useage.price}">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">
                                        元
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>抄表员
                                    </label>
                                    <div class="layui-input-inline">
                                        <select name="staff_id" {if $useage.status neq 3} disabled="disabled" {/if}>
                                        {foreach $staffs as $u}
                                        <option value="{$u['id']}" {if $u['id'] == $uid} selected {/if}>{$u['name']}</option>
                                        {/foreach}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>抄表凭证
                                    </label>
                                    <div class="layui-input-inline">
                                        <button type="button" class="layui-btn" id="up_photo" {if $useage.status==2} disabled="disabled" {/if}>
                                            <i class="layui-icon"></i>上传
                                        </button>
                                        <input type="hidden" name="photo_id" value="{$useage.photo_id}">
                                        <a href="{$useage.photo.src}" target="_blank" class="layui-btn {if empty($useage.photo_id)} layui-hide {/if}">
                                            <i class="layui-icon">&#xe64a;</i>预览
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-col-md-offset4">
                    <a href="/useage" class="layui-btn">
                        返回
                    </a>
                    <button class="layui-btn" lay-filter="save" lay-submit="">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    //初始化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:'#current_date',
                trigger:'click',
            })

            //保存抄表单，并且返回列表
            form.on('submit(save)',
                function (data) {
                    $.ajax({
                        url: '/useage_add',
                        method: "POST",
                        data: data.field,
                        dataType: "json",
                        success: function (data) {
                            if (data.status == 1) {
                                layer.msg(data.message,{icon: 6,time: 4000},function(){
                                    window.location.href='/useage';
                                })
                            } else {
                                layer.msg(data.message,{icon: 5,time: 5000 })
                            }
                        }
                    });
                    return false;
                });

            //上传电表照片
            var upPhoto = upload.render({
                elem: '#up_photo' ,
                url: '/upFile',
                field: 'up_file',
                accept: 'file',
                size:10240,

                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;
                    }
                }
            });
            $('#current_numb').change(function(){
                var $level = 100000;
                var $rate = $('#rate').val();
                var $baseNum = $level*$rate;
                var $rNum = $(this).val()*$baseNum - $('#last_numb').val()*$baseNum;

                if($rNum < 0){
                    layMsg('本次抄表必须大于上次抄表读数',5);
                    $('#current_numb').focus();
                } else{
                    $('#repo_numb').val( $rNum/$level )
                }
            })
        });
</script>
{/block}