{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="{$inv.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="{$inv.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="{$inv.em['typeName']}" 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="{$inv.em.em_numb}" disabled="disabled">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <form class="layui-form">
                <!--账单详情-->
                <div class="layui-form-box">
                    <div class="layui-form-head">
                        <div class="layui-col-md10">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    账单信息
                                </label>
                                <!-- <div class="layui-pay-model">
                                    <label class="layui-form-label">
                                        缴费模式 :
                                    </label>
                                    <span>{$inv.em.chargeType}</span>
                                </div> -->
                            </div>
                        </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="last_numb" autocomplete="off"
                                               class="layui-input"  value="{$inv.invoice_id}" 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="last_date" name="last_date"
                                                autocomplete="off" class="layui-input" value="{$inv.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_data" name="current_data"
                                                autocomplete="off" class="layui-input" value="{$inv.useage.current_date}" disabled="disabled">
                                    </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">
                                        {if !isset($inv.useage.photo.src) }
                                            <input type="text"
                                               autocomplete="off" class="layui-input layui-no-border" value="未上传抄表照片" disabled="disabled">
                                        {else /}
                                            <a href="{$inv.useage.photo.src}" class='layui-btn' target="_blank" >
                                                <i class="layui-icon">&#xe64a;</i>预览
                                            </a>
                                        {/if}
                                    </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="payment_amount" name="payment_amount" autocomplete="off" class="layui-input" value="{$inv.payment_amount|round=3}" 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="paid_amount" name="paid_amount" autocomplete="off" class="layui-input" value="{$inv.paid_amount|round=3}" 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="settle_amount" name="settle_amount" autocomplete="off" class="layui-input" value="{$inv.settle_amount|round=3}" 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="sett_amount" name="sett_amount" autocomplete="off" class="layui-input" value="{$inv.sett_amount|round=3}" 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" autocomplete="off" class="layui-input no-border layui-width-auto" value="{$inv.status|getInvoicesStatusName}" disabled="disabled">

                                        <button class="layui-btn layui-btn-normal layui-right" lay-submit lay-filter="paymentsDetail" οnclick="return false;"><i class="layui-icon layui-icon-add-circle-fine"></i>缴费详情</button>
                                    </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" autocomplete="off" class="layui-input no-border layui-width-auto" value="{$inv.status|getInvoicesStatusName='1'}" disabled="disabled">

                                        <button class="layui-btn layui-btn-normal layui-right" lay-submit lay-filter="settlesDetail" οnclick="return false;"><i class="layui-icon layui-icon-add-circle-fine"></i>结算详情</button>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md10" style="padding:0 130px 0 30px;margin-bottom: 20px;">
                               <table class="layui-table layui-form">
                                    <thead>
                                    <tr>
                                        <th>阶段</th>
                                        <th>上期表数</th>
                                        <th>本期表数</th>
                                        <th>单价</th>
                                        <th>倍率</th>
                                        <th>报运营商电量</th>
                                    </thead>
                                    <tbody>
                                    {volist name="inv.useage.ud" id="item"}
                                    <tr>
                                        <td>{$item.typeName}</td>
                                        <td>{$item.last_numb}</td>
                                        <td>{$item.current_numb}</td>
                                        <td>{$item.price ?: $inv.em.rule.pay_price}</td>
                                        <td>{$item.rate}</td>
                                        <td>{$item.repo_numb * $item.rate}</td>
                                    </tr>
                                    {/volist}
                                    <tr>
                                        <td>合计:</td>
                                        <td colspan="4"></td>
                                        <td>{$inv.useage.totle.repo_numb * $inv.useage.totle.rate}</td>
                                    </tr>
                                    </tbody>
                                </table>
                             </div>


                        </div>
                    </div>
                </div>
                <!--账单结束-->

            </form>
        </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,
                });
            }

            //查看缴费详情
            form.on('submit(paymentsDetail)',
                function (data) {
                    $url = '/payment/payDetail/{$inv.invoice_id}'
                    xadmin.open('查看缴费详情',$url)
                    return false;
                } 
            );

            //查看结算详情
            form.on('submit(settlesDetail)',
                function (data) {
                    $url = '/settle/settleDetail/{$inv.invoice_id}'
                    xadmin.open('查看结算详情',$url)
                    return false;
                } 
            );


            form.on('submit(update_payment_amount)',
                function (data) {

                    var $data = {
                        id : $("#invoice_id").val(),
                        amount : $("#payment_amount").val()
                    };

                    $.ajax({
                        url: '/invoice/update/payment',
                        method: "POST",
                        data: $data,
                        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}