{extend name="../../admin/view/main"}

{block name="button"}
{if auth("batchDisableCodes")}
<button class='layui-btn layui-btn-sm layui-btn-danger' data-batch-confirm="确定要禁用选中的激活码吗？" data-csrf="{:systoken('batchDisableCodes')}" data-action='{:url("batchDisableCodes")}' data-rule="ids#{key}">批量禁用</button>
{/if}
<button class='layui-btn layui-btn-sm layui-btn-warm' id="batchCopyBtn" data-checkbox="true">批量复制激活码</button>
<a class='layui-btn layui-btn-sm layui-btn-normal' href="{:url('exportCodes')}?{:http_build_query($get)}">导出激活码</a>
{/block}

{block name="content"}
<div class="think-box-shadow">
    <form class="layui-form layui-form-pane form-search" action="{:sysuri()}" onsubmit="return false" method="get" autocomplete="off">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">激活码</label>
            <div class="layui-input-inline">
                <input name="code" value="{$get.code|default=''}" placeholder="请输入激活码" class="layui-input">
            </div>
        </div>

        {if $Think.admin.is_super}
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">代理商</label>
            <div class="layui-input-inline">
                <select name='agent_id' lay-search class='layui-select'>
                    <option value=''>-- 全部 --</option>
                    {foreach $agents as $agent}
                    <option value='{$agent.id}' {if isset($get.agent_id) and $get.agent_id==$agent.id}selected{/if}>
                        {$agent.username} ({if $agent.level==1}一级代理{else}二级代理{/if})
                    </option>
                    {/foreach}
                </select>
            </div>
        </div>
        {/if}

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">使用状态</label>
            <div class="layui-input-inline">
                <select name='is_used' lay-search class='layui-select'>
                    <option value=''>-- 全部 --</option>
                    <option value='0' {if isset($get.is_used) and $get.is_used=='0'}selected{/if}>未使用</option>
                    <option value='1' {if isset($get.is_used) and $get.is_used=='1'}selected{/if}>已使用</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">禁用状态</label>
            <div class="layui-input-inline">
                <select name='status' lay-search class='layui-select'>
                    <option value=''>-- 全部 --</option>
                    <option value='1' {if isset($get.status) and $get.status=='1'}selected{/if}>正常</option>
                    <option value='0' {if isset($get.status) and $get.status=='0'}selected{/if}>已禁用</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">卡类型</label>
            <div class="layui-input-inline">
                <select name='days' lay-search class='layui-select'>
                    <option value=''>-- 全部 --</option>
                    {foreach :app\manager\model\AgentCode::getCardTypes() as $days => $info}
                    <option value='{$days}' {if isset($get.days) and $get.days==$days}selected{/if}>{$info.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">生成时间</label>
            <div class="layui-input-inline">
                <input data-date-range name="create_time" value="{$get.create_time|default=''}" placeholder="请选择生成时间" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">使用时间</label>
            <div class="layui-input-inline">
                <input data-date-range name="use_time" value="{$get.use_time|default=''}" placeholder="请选择使用时间" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
        </div>
    </form>

    <table class="layui-table margin-top-10" lay-skin="line">
        {notempty name='list'}
        <thead>
        <tr>
            <th class='list-table-check-td think-checkbox'>
                <label><input data-auto-none data-check-target='.list-check-box' type='checkbox'></label>
            </th>
            <th class='text-left'>激活码</th>
            <th class='text-left'>有效天数</th>
            {if $Think.admin.is_super}
            <th class='text-left'>代理商</th>
            <th class='text-left'>代理级别</th>
            {/if}
            <th class='text-left'>销售价格</th>
            <th class='text-left'>佣金</th>
            <th class='text-left'>使用状态</th>
            <th class='text-left'>使用时间</th>
            <th class='text-left'>使用者</th>
            <th class='text-left'>生成时间</th>
            <th class='text-left'>状态</th>
            <th></th>
        </tr>
        </thead>
        {/notempty}
        <tbody>
        {foreach $list as $key=>$vo}
        <tr>
            <td class='list-table-check-td think-checkbox'>
                <label><input class="list-check-box" value='{$vo.id}' type='checkbox'></label>
            </td>
            <td class='text-left'>{$vo.code}</td>
            <td class='text-left'>{$vo.days} 天</td>
            {if $Think.admin.is_super}
            <td class='text-left'>{$vo.agent_name|default='--'}</td>
            <td class='text-left'>
                {if $vo.agent_level eq 1}
                <span class="color-blue">一级代理</span>
                {elseif $vo.agent_level eq 2}
                <span class="color-green">二级代理</span>
                {else}
                --
                {/if}
            </td>
            {/if}
            <td class='text-left'>{$vo.price|default='--'}</td>
            <td class='text-left'>{$vo.commission|default='--'}</td>
            <td class='text-left'>
                {if $vo.is_used eq 1}
                <span class="color-red">已使用</span>
                {else}
                <span class="color-green">未使用</span>
                {/if}
            </td>
            <td class='text-left'>{$vo.used_at|format_datetime|default='--'}</td>
            <td class='text-left'>{$vo.used_by|default='--'}</td>
            <td class='text-left'>{$vo.created_at|format_datetime}</td>
            <td class='text-left'>
                {if $vo.status eq 1}
                <span class="color-green">正常</span>
                {else}
                <span class="color-red">已禁用</span>
                {/if}
            </td>
            <td class='text-left'>
                {if auth("disableCode") && $vo.status eq 1}
                <a class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="确定要禁用该激活码吗？" data-csrf="{:systoken('disableCode')}" data-action='{:url("disableCode")}' data-value="id#{$vo.id}">禁用</a>
                {/if}
            </td>
        </tr>
        {/foreach}
        </tbody>
    </table>
    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
</div>

<!-- 复制弹窗 -->
<div id="copyDialog" style="display:none;">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form-item">
                <textarea id="codeList" class="layui-textarea" style="height: 500px;margin:10px 0;font-size:14px;line-height:1.8;" readonly></textarea>
            </div>
            <div class="text-center">
                <button class="layui-btn layui-btn-lg" onclick="copyToClipboard()">一键复制</button>
            </div>
        </div>
    </div>
</div>

<script>
// 批量复制按钮点击事件
$('#batchCopyBtn').click(function(){
    var codes = [];
    $('.list-check-box:checked').each(function(){
        var tr = $(this).closest('tr');
        var code = tr.find('td:eq(1)').text(); // 激活码
        var days = tr.find('td:eq(2)').text(); // 天数
        codes.push(code + ' - ' + days);
    });
    
    if(codes.length === 0){
        layer.msg('请选择要复制的激活码');
        return;
    }
    
    // 格式化激活码列表
    var formattedCodes = codes.map(function(item){
        return item.trim();
    }).join('\n\n');
    
    // 显示弹窗
    layer.open({
        type: 1,
        title: '复制激活码',
        area: ['800px', '700px'],
        content: $('#copyDialog'),
        offset: '50px',
        fixed: false,
        resize: true,
        shadeClose: true,
        shade: [0.3, '#000'],
        maxmin: true,
        moveOut: true,
        anim: 1,
        zIndex: layer.zIndex + 1000, // 增加 zIndex 确保显示在最上层
        success: function(layero, index){
            layer.setTop(layero);
            $('#codeList').val(formattedCodes);
            
            // 添加自定义样式
            $(layero).css({
                'background-color': '#fff',
                'box-shadow': '0 2px 8px rgba(0,0,0,.1)'
            }).find('.layui-layer-content').css({
                'padding': '30px'
            });
        }
    });
});

// 复制到剪贴板
function copyToClipboard() {
    var textarea = document.getElementById('codeList');
    textarea.select();
    try {
        document.execCommand('copy');
        layer.msg('复制成功！', {icon: 1, zIndex: layer.zIndex + 101});
    } catch (err) {
        layer.msg('复制失败，请手动复制', {icon: 2, zIndex: layer.zIndex + 101});
    }
}
</script>

<style>
/* 美化时间选择器样式 */
.layui-laydate {
    border: none !important;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.layui-laydate-header {
    border-bottom: 1px solid #f0f0f0;
}
.layui-laydate-content td:hover,
.layui-laydate-content td.laydate-selected {
    border-radius: 2px;
}
.layui-laydate-footer {
    border-top: 1px solid #f0f0f0;
}
.laydate-time-list>li:hover {
    background-color: #f8f8f8;
}
.layui-laydate-content td.layui-this {
    border-radius: 2px;
}
/* 输入框样式优化 */
.layui-input[readonly] {
    background-color: #fff !important;
    cursor: pointer;
}
.layui-input:hover {
    border-color: #D2D2D2 !important;
}
.layui-input:focus {
    border-color: #009688 !important;
    box-shadow: 0 0 0 2px rgba(0,150,136,.2);
}
</style>
{/block}