{extend name="public/container"}
{block name="content"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-content">
                <div class="row">
                    <div class="m-b m-l">
                        <form action="" class="form-inline">
                            <div id="upSearch" class="layui-col-lg12">
                                <label class="layui-form-label">创建时间:</label>
                                <div class="layui-input-block" data-type="data" v-cloak="">
                                    <button class="layui-btn layui-btn-sm" type="button" v-for="item in dataList"
                                            @click="setData(item)"
                                            :class="{'layui-btn-primary':where.data!=item.value}">{{item.name}}
                                    </button>
                                    <button class="layui-btn layui-btn-sm" type="button" ref="time"
                                            @click="setData({value:'zd',is_zd:true})"
                                            :class="{'layui-btn-primary':where.data!='zd'}">自定义
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary"
                                            v-show="showtime==true" ref="date_time">
                                    </button>
                                </div>
                                <input name='data' type='hidden' :value="where.data" />
                            </div>
                            <div class="layui-col-lg12">
                                <select name="paid" aria-controls="editable" class="form-control input-sm">
                                    <option value="-1">所有状态</option>
                                    <option value="0" {eq name="where.paid" value="0"}selected="selected"{/eq}>待支付</option>
                                    <option value="1" {eq name="where.paid" value="1"}selected="selected"{/eq}>已支付</option>
                                </select>
                                <div class="input-group">
                                    <input type="text" name="key" value="{$where.key}" placeholder="请输入订单编号" class="input-sm form-control"> <span class="input-group-btn">
                                            <button id='upDataSubmit' type="submit" class="btn btn-sm btn-primary"> <i class="fa fa-search"></i>搜索</button>
                                        </span>
                                </div>
                            </div>

                        </form>
                    </div>

                </div>
                <div class="table-responsive">
                    <table class="table table-striped  table-bordered">
                        <thead>
                        <tr>
                            <th class="text-center">订单编号</th>
                            <th class="text-center">昵称</th>
                            <th class="text-center">名称</th>
                            <th class="text-center">金额</th>
                            <th class="text-center">创建时间</th>
                            <th class="text-center">支付时间</th>
                            <th class="text-center">支付方式</th>

                        </tr>
                        </thead>
                        <tbody class="">
                        {volist name="list" id="vo"}
                        <tr>
                            <td>
                                {$vo.order_id}
                            </td>
                            <td class="text-center">
                                {$vo.nickname}
                            </td>

                            <td class="text-center">
                                {$vo.body}
                            </td>
                            <td class="text-center">
                                {$vo.pay_price}
                            </td>
                            <td class="text-center">
                                {:date("Y-m-d H:i:s",$vo.addtime)}
                            </td>
                            <td class="text-center">
                                {$vo.pay_time}
                            </td>
                            <td class="text-center">
                                {$vo.pay_type}
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
                {include file="public/inner_page"}
            </div>
        </div>
    </div>
</div>
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
{/block}
{block name="script"}
<script>
    let upSearchData = '{$where.data}';
    var showTime=false;
    if(upSearchData){
        if(upSearchData.length>11){
            showTime = true
        }
    }
    $('.btn-danger').on('click',function(){
        window.t = $(this);
        var _this = $(this),url =_this.data('url');
        $eb.$swal('delete',function(){
            $eb.axios.get(url).then(function(res){
                console.log(res);
                if(res.status == 200 && res.data.code == 200) {
                    $eb.$swal('success',res.data.msg);
                    _this.parents('tr').remove();
                }else
                    return Promise.reject(res.data.msg || '删除失败')
            }).catch(function(err){
                $eb.$swal('error',err);
            });
        })
    });
    require(['vue'], function (Vue) {
        new Vue({
            el: "#upSearch",
            data: {
                dataList: [
                    {name: '全部', value: ''},
                    {name: '今天', value: 'today'},
                    {name: '昨天', value: 'yesterday'},
                    {name: '最近7天', value: 'lately7'},
                    {name: '最近30天', value: 'lately30'},
                    {name: '本月', value: 'month'},
                    {name: '本年', value: 'year'},
                ],
                where: {
                    data:upSearchData,
                },
                showtime: showTime,
            },
            methods: {
                setData: function (item) {
                    var that = this;
                    if (item.is_zd == true) {
                        that.showtime = true;
                        this.where.data = this.$refs.date_time.innerText;
                    } else {
                        this.showtime = false;
                        this.where.data = item.value;
                    }
                },
            },
            mounted: function () {
                let that = this;
                layList.laydate.render({
                    elem: this.$refs.date_time,
                    trigger: 'click',
                    eventElem: this.$refs.time,
                    range: true,
                    change: function (value) {
                        that.where.data = value;
                    }
                });
            }
        })
    });
</script>
{/block}