{extend name="public/container"}


{block name="content"}

<style>
    #showImg{
        background-color: rgb(0,0,0,0.5);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 99999;
    }
    #imgShowSrc{
        max-width: 80%;
        max-height: 80%;
    }
    .imgFLex{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
</style>
<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>

                                <select name="status" aria-controls="editable" class="form-control input-sm">
                                    <option value="-3">订单状态</option>
                                    <option value="-2" {eq name="where.status" value="-2"}selected="selected"{/eq}>支付超时</option>
                                    <option value="-1" {eq name="where.status" value="-1"}selected="selected"{/eq}>审核无效</option>
                                    <option value="0" {eq name="where.status" value="0"}selected="selected"{/eq}>待支付</option>
                                    <option value="1" {eq name="where.status" value="1"}selected="selected"{/eq}>待审核</option>
                                    <option value="2" {eq name="where.status" value="2"}selected="selected"{/eq}>收款</option>
                                    <option value="3" {eq name="where.status" value="3"}selected="selected"{/eq}>重新发放</option>
                                    <option value="4" {eq name="where.status" value="4"}selected="selected"{/eq}>完成</option>
                                    <option value="5" {eq name="where.status" value="5"}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.user.real_name}<br>
                                手机号:{$vo.user.phone}<br>
                            </td>

                            <td class="text-center">
                                {$vo.price}
                            </td>

                            <td class="text-center">
                                {notempty name="vo.touser"}
                                昵称:{$vo.touser.real_name}<br>
                                手机号:{$vo.touser.phone}<br>
                                {/notempty}
                            </td>
                            <td class="text-center">
                               <img style="cursor: pointer" src="{$vo.pay_evaluation}"  height="80" onclick="showImg('{$vo.pay_evaluation}')">
                            </td>
                            <td class="text-center">
                                {switch name="vo.status"}
                                {case value="-2"}
                                支付超时
                                {/case}
                                {case value="-1"}
                                审核未通过<br>
                                未通过原因:{$vo.re}
                                {/case}
                                {case value="0"}
                                待开奖
                                {/case}
                                {case value="1"}
                                待审核
                                {/case}
                                {case value="2"}
                                收款
                                {/case}
                                {case value="3"}
                                重新发放
                                {/case}
                                {case value="4"}
                                完成
                                {/case}
                                {case value="5"}
                                提货
                                {/case}
                                {/switch}
                            </td>
                            <td class="text-center">
                                {eq name="vo.status" value="1"}
                                <a href="{:url('setstatus',['id'=>$vo['id'],'status'=>2])}" class="fa fa-check">通过</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a  href="{:url('setstatus',['id'=>$vo['id'],'status'=>-1])}" class="fa fa-times jj" ">拒绝</a>
                                {/eq}
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
                {include file="public/inner_page"}
            </div>
        </div>
    </div>
    <div id="showImg" style="display: none" onclick="noneDisplay()">
        <div class="imgFLex">
            <img id="imgShowSrc" src="" alt="">
        </div>
    </div>
</div>
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
{/block}
{block name="script"}
<script>
    function showImg(img){
        document.getElementById("showImg").style.display = 'block';
        document.getElementById("imgShowSrc").setAttribute('src',img);
    }
    function noneDisplay(){
        console.log('点击')
        document.getElementById("showImg").style.display = 'none';
    }
    let upSearchData = '{$where.data}';
    var showTime=false;
    if(upSearchData){
        if(upSearchData.length>11){
            showTime = true
        }
    }
    $(function (){

    })
    $('.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}