{extend name="layout:home" /}
{block name="container"}
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li id="li-1" onclick="showCurrent(0)">
            <a>全部</a>
        </li>
        <li id="li-2" onclick="showCurrent(1)">
            <a>已完成</a>
        </li>
        <li id="li-3" onclick="showCurrent(2)">
            <a>已取消</a>
        </li>
    </ul>
    <div class="layui-tab-content page-tab-content">
        <!-- 搜索框开始 -->
        <div class="search-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input type="text" style="display: none" name="status" id="status" value="{$status}">
                    <input type="text" class="layui-input" name="timeRang" id="timeRang" placeholder="选择时间段"
                           style="width: 170px;">
                </div>
                <div class="layui-inline">
                    <button type="submit" class="layui-btn search-subBtn" onclick="showCurrent('')">搜索</button>
                </div>
            </div>
        </div>
        <table class="layui-table lay-even">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>订单编号</th>
                <th>服务名称</th>
                <th>期限</th>
                <th>创建时间</th>
                <th>金额</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody>
            {if count($allOrder)}
            {volist name="allOrder" id="order"}
            <tr>
                <td>{$order.order_identity}</td>
                <td>{$order.fatherProduct} ▪ {$order.product_name}</td>
                <td>{$order.order_dayNumber}</td>
                <td>{$order.order_buyTime}</td>
                <td>{$order.order_money}</td>
                <td>{$order.order_status == 1 ? '成功' : '失败'}</td>
            </tr>
            {/volist}
            {else}
            <td colspan="99" style="text-align: center">无数据</td>
            {/if}
            </tbody>
        </table>
        {$show_page}
    </div>
</div>
<script>
    const myHost = "http://" + window.location.host;
    let current = $("#status").val();
    if (current == 1) {
        $("#li-2").attr("class","layui-this")
    } else if (current == 2) {
        $("#li-3").attr("class","layui-this")
    } else {
        $("#li-1").attr("class","layui-this")
    }
    function showCurrent(id) {
        if (id===0) {
            $("#status").val('')
        } else if (id===1) {
            $("#status").val(id)
        } else if (id===2) {
            $("#status").val(id)
        }
        let timeRang = $("#timeRang").val();
        let status = $("#status").val();
        window.location.href = myHost + "/User/cost/orderManagement.html?timeRang=" + timeRang + "&status=" + status;
    }
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var url=decodeURI(decodeURI(window.location.search))
        var r = url.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#creatTime' //指定元素
        });
        laydate.render({
            elem:'#timeRang',
            range:true,
            format: 'yyyy/MM/dd',
            done: function(value, date){
                /* 时间选择完成后的回调 */
            }
        })
    });
</script>
{/block}