{extend name="public/container"}
{block name="head_top"}

{/block}
{block name="content"}
<style>
    .btn-outline{
        border:none;
    }
    .btn-outline:hover{
        background-color: #0e9aef;
        color: #fff;
    }
    .layui-form-item .layui-btn {
        margin-top: 5px;
        margin-right: 10px;
    }
    .layui-btn-primary{
        margin-right: 10px;
        margin-left: 0!important;
    }
    label{
        margin-bottom: 0!important;
        margin-top: 4px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15" id="app">
        <!--搜索条件-->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">搜索条件</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-shortcut" lay-anim="" lay-indicator="inside"
                         lay-arrow="none" style="background:none">
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space10 layui-form-item">
                                <div class="layui-col-lg12">
                                    <label class="layui-form-label">审核状态:</label>
                                    <div class="layui-input-block" v-cloak="">
                                        <button class="layui-btn layui-btn-sm"
                                                :class="{'layui-btn-primary':where.auth_status!==item.value}"
                                                @click="where.auth_status = item.value" type="button"
                                                v-for="item in auth_status">{{item.name}}
                                        
                                        </button>
                                    </div>
                                </div>
                                <div class="layui-col-lg12">
                                    <label class="layui-form-label">关键字:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="real_name" style="width: 50%" v-model="where.key"
                                               placeholder="请输入管理员姓名、订单编号" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-lg12">
                                    <div class="layui-input-block">
                                        <button @click="search" type="button"
                                                class="layui-btn layui-btn-sm layui-btn-normal">
                                            <i class="layui-icon layui-icon-search"></i>搜索
                                        </button>
                                        <button @click="excel" type="button"
                                                class="layui-btn layui-btn-warm layui-btn-sm export" type="button">
                                            <i class="fa fa-floppy-o" style="margin-right: 3px;"></i>导出
                                        </button>
                                        <button @click="refresh" type="reset"
                                                class="layui-btn layui-btn-primary layui-btn-sm">
                                            <i class="layui-icon layui-icon-refresh"></i>刷新
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end-->
        
    </div>
    <!--列表-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">订单列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="List" lay-filter="List"></table>
                    <script type="text/html" id="user">
                        {{d.user.real_name}}<br>
                        {{d.user.phone}}
                        
                    </script>
                    <script type="text/html" id="act">
                        {{# if(d.auth_status==0){ }}
                        <button type="button" class="layui-btn layui-btn-xs" lay-event="auth1"><i class="layui-icon layui-icon-ok"></i>通过</button>
                        <button type="button" class="layui-btn layui-btn-xs" lay-event="auth0"><i class="layui-icon layui-icon-close"></i>拒绝</button>
                        {{# } }}
                    </script>
                    <script type="text/html" id="number">
                        {{# if(d.way==0){ }}
                        <font color="#f00"> -{{d.number}}  </font>
                        {{# } }}
                        {{# if(d.way==1){ }}
                        {{d.number}}
                        {{# } }}                        
                    </script>
                    <script type="text/html" id="status">
                        {{# if(d.auth_status==1){ }}
                        通过
                        {{# } }}
                        {{# if(d.auth_status==-1){ }}
                        拒绝
                        {{# } }}
                    </script>
                </div>
            </div>
        </div>
    </div>
    <!--end-->
</div>
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
{/block}
{block name="script"}
<script>
    layList.tableList('List', "{:Url('recharge_list',['key'=>$key])}", function () {
        return [
            {type: 'checkbox'},
            {field: 'id', title: '订单号', sort: true, event: 'id', width: '14%'},
            {field: 'uid', title: '用户信息', templet: '#user',  align: 'center'},
            {field: 'number', title: '充值余额', templet: '#number', height: 'full-20'},
            {field: 'admin_real_name', title: '创建员姓名', width: '10%', align: 'center'},
            {field: 'create_admin_time_txt', title: '创建时间', width: '10%', align: 'center'},
            {field: 'auth_real_name', title: '审核人', width: '10%', align: 'center'},
            {field: 'auth_admin_time_txt', title: '审核时间', width: '10%', align: 'center'},
            {field: 'evaluation', title: '付款凭证', width: '10%', sort: true, align: 'center'},
            {field: 'auth_status', title: '审核状态', templet: '#status', width: '8%', align: 'center'},
            {field: 'right', title: '操作', align: 'center', toolbar: '#act', width: '10%'},
        ];
    });
    layList.tool(function (event, data, obj) {
        switch (event) {
            case 'auth1':
                $eb.$swal('delete',function(){
                    $eb.axios.get(layList.U({a:'recharge_auth_save',q:{id:data.id,auth_status:1}})).then(function(res){
                        if(res.status == 200 && res.data.code == 200) {
                            $eb.$swal('success',res.data.msg);
                            layList.reload();
                        }else
                            return Promise.reject(res.data.msg || '删除失败')
                    }).catch(function(err){
                        $eb.$swal('error',err);
                    });
                },{
                    title:'您确定要通过审核',
                    text:'通过后无法恢复请谨慎操作',
                    confirm:'是的我要通过'
                })
               break;
            case 'auth0':
                $eb.$swal('delete',function(){
                    $eb.axios.get(layList.U({a:'recharge_auth_save',q:{id:data.id,auth_status:-1}})).then(function(res){
                        if(res.status == 200 && res.data.code == 200) {
                            $eb.$swal('success',res.data.msg);
                            layList.reload();
                        }else
                            return Promise.reject(res.data.msg || '删除失败')
                    }).catch(function(err){
                        $eb.$swal('error',err);
                    });
                },{
                    title:'您确定要拒绝',
                    text:'拒绝后无法恢复请谨慎操作',
                    confirm:'是的我要拒绝'
                })
                break;
                break;
        }
    })
   
    //下拉框
    $(document).click(function (e) {
        $('.layui-nav-child').hide();
    })

    function dropdown(that) {
        var oEvent = arguments.callee.caller.arguments[0] || event;
        oEvent.stopPropagation();
        var offset = $(that).offset();
        var top = offset.top - $(window).scrollTop();
        var index = $(that).parents('tr').data('index');
        $('.layui-nav-child').each(function (key) {
            if (key != index) {
                $(this).hide();
            }
        })
        if ($(document).height() < top + $(that).next('ul').height()) {
            $(that).next('ul').css({
                'padding': 10,
                'top': -($(that).parents('td').height() / 2 + $(that).height() + $(that).next('ul').height() / 2),
                'min-width': 'inherit',
                'position': 'absolute'
            }).toggle();
        } else {
            $(that).next('ul').css({
                'padding': 10,
                'top': $(that).parents('td').height() / 2 + $(that).height(),
                'min-width': 'inherit',
                'position': 'absolute'
            }).toggle();
        }
    }

    var key = '<?=$key?>';
    var status =<?=$auth_status ? $auth_status : "'-2'"?>;
    require(['vue'], function (Vue) {
        new Vue({
            el: "#app",
            data: {
                auth_status: [
                    {name: '全部', value: '-2'},
                    {name: '待审核', value: 0},
                    {name: '通过', value: 1},
                    {name: '拒绝', value: -1},
                ],
               where: {
                    auth_status: status,
                    key: key || '',
                    excel: 0,
                },
                showtime: false,
            },
            watch: {
                'where.auth_status': function () {
                    this.where.excel = 0;
                    layList.reload(this.where, true);
                },
                'where.key': function () {
                    this.where.excel = 0;
                    layList.reload(this.where, true);
                }
            },
            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;
                    }
                },
                search: function () {
                    this.where.excel = 0;
    
                    layList.reload(this.where, true);
                },
                refresh: function () {
                    layList.reload();
                },
                excel: function () {
                    this.where.excel = 1;
                    location.href = layList.U({c: 'user.user', a: 'recharge_list', q: this.where});
                    this.where.excel = 0;
                }
            },
            mounted: function () {
                var that = this;
                window.formReload = this.search;
                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}