<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>电子票管理 - VR票务</title>
    {include file="public/head" /}
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">电子票管理</div>
        <div class="layui-card-body">
            <!-- 搜索栏 -->
            <div class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">关键词</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keywords" value="" placeholder="订单号/票码/姓名/手机" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">核销状态</label>
                        <div class="layui-input-inline">
                            <select name="verify_status">
                                <option value="">全部</option>
                                <option value="0">未核销</option>
                                <option value="1">已核销</option>
                                <option value="2">已退款</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="export-btn">导出CSV</button>
                    </div>
                </div>
            </div>

            <table class="layui-hide" id="table" lay-filter="table"></table>

            <script type="text/template" id="statusTpl">
                {{# var colors = ['', 'green', 'red']; var texts = ['未核销', '已核销', '已退款']; }}
                <span class="layui-badge layui-bg-{{colors[d.verify_status] || 'gray'}}">{{texts[d.verify_status] || '未知'}}</span>
            </script>

            <script type="text/template" id="qrTpl">
                {{# if (d.qr_code_url) { }}
                    <img src="{{d.qr_code_url}}" style="width:50px;height:50px;cursor:pointer" lay-fn="preview" data-src="{{d.qr_code_url}}">
                {{# } else { }}
                    -
                {{# } }}
            </script>

            <script type="text/template" id="actionTpl">
                <a href="{:PluginsAdminUrl('vr_ticket', 'ticket', 'detail')}?id={{d.id}}" class="layui-btn layui-btn-xs">详情</a>
            </script>
        </div>
    </div>
</div>

{include file="public/footer" /}
<script>
layui.use(['table', 'form'], function() {
    var table = layui.table;
    var form = layui.form;

    table.render({
        elem: '#table',
        url: '{:PluginsAdminUrl("vr_ticket", "ticket", "list")}',
        cols: [[
            {field: 'id', title: 'ID', width: 70},
            {field: 'ticket_code', title: '票码', width: 200},
            {field: 'goods_title', title: '商品', minWidth: 150},
            {field: 'real_name', title: '观演人', width: 100},
            {field: 'phone', title: '手机', width: 120},
            {field: 'seat_info', title: '座位', minWidth: 120},
            {field: 'verify_status', title: '状态', width: 100, templet: '#statusTpl'},
            {field: 'qr', title: 'QR码', width: 80, templet: '#qrTpl'},
            {field: 'issued_at', title: '发放时间', width: 160, templet: function(d) {
                return d.issued_at > 0 ? layui.util.toDateString(d.issued_at * 1000) : '-';
            }},
            {field: 'action', title: '操作', width: 80, templet: '#actionTpl'},
        ]]
    });

    form.on('submit(search)', function(data) {
        table.reload('table', {where: data.field, page: {curr: 1}});
        return false;
    });

    // 导出 CSV：POST 触发（当前全量导出，不携带搜索条件）
    $('#export-btn').on('click', function() {
        var $form = $('<form action="{:PluginsAdminUrl(\'vr_ticket\', \'ticket\', \'export\')}" method="post" target="_blank" style="display:none"></form>');
        $(document.body).append($form);
        $form.submit().remove();
        layer.msg('正在导出，请稍候…');
    });

    $(document).on('click', '[lay-fn="preview"]', function() {
        var src = $(this).data('src');
        layer.open({type: 1, title: 'QR码', content: '<img src="'+src+'" style="padding:20px">', area: ['300px', '350px']});
    });
});
</script>
</body>
</html>
