<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('艺人专题管理')" />
    <style>
        /* 状态与推荐 标签样式 (匹配图2) */
        .badge-status {
            display: inline-block;
            padding: 3px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.4;
        }
        .badge-status-success {
            background-color: #e6f7eb;
            color: #52c41a;
        }
        .badge-status-warning {
            background-color: #fef8e7;
            color: #d99b00;
        }
        .badge-status-gray {
            background-color: #f5f5f5;
            color: #8c8c8c;
        }
        
        .badge-rec {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.4;
        }
        .badge-rec-active {
            background-color: #e6f7ff;
            color: #1890ff;
        }
        .badge-rec-none {
            background-color: #f5f5f5;
            color: #8c8c8c;
        }

        /* 操作按钮样式 (匹配图2) */
        .action-cell {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .action-row-top {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .btn-act {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 2px 8px;
            font-size: 12px;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none !important;
            transition: all 0.2s;
        }
        .btn-act i {
            margin-right: 3px;
        }
        .btn-act-detail {
            background-color: #e6f7ff;
            color: #1890ff;
            border: 1px solid #91d5ff;
        }
        .btn-act-detail:hover {
            background-color: #bae7ff;
            color: #096dd9;
        }
        .btn-act-offsale {
            background-color: #fff7e6;
            color: #fa8c16;
            border: 1px solid #ffd591;
        }
        .btn-act-offsale:hover {
            background-color: #ffe7ba;
            color: #d46b08;
        }
        .btn-act-rec {
            background-color: #ffffff;
            color: #595959;
            border: 1px solid #d9d9d9;
            padding: 2px 10px;
        }
        .btn-act-rec:hover {
            border-color: #40a9ff;
            color: #40a9ff;
        }

        /* 推荐设置下拉菜单 */
        .rec-menu {
            position: absolute; z-index: 9999; display: none;
            min-width: 110px; padding: 5px 0;
            background: #fff; border: 1px solid #e4e7ed; border-radius: 4px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
        }
        .rec-menu a {
            display: block; padding: 6px 16px; font-size: 12px;
            color: #606266; white-space: nowrap; cursor: pointer;
            text-decoration: none !important;
        }
        .rec-menu a:hover { background: #f5f7fa; color: #1890ff; }
        .rec-menu a.active { color: #1890ff; font-weight: bold; }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>专题名称：<input type="text" name="topicName" placeholder="请输入专题名称"/></li>
                        <li>关联艺人：<input type="text" name="artistName" placeholder="请输入艺人名称"/></li>
                        <li>专题状态：<select name="status">
                            <option value="">全部</option>
                            <option value="0">待上架</option>
                            <option value="1">上架中</option>
                            <option value="2">已下架</option>
                        </select></li>
                        <li>所属商家：<input type="text" name="storeName" placeholder="请输入商家名称"/></li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "goblin/artist/topic";
    var recommendFlg = [[${@permission.hasPermi('goblin:artist:topic:recommend')}]];
    var statusFlg = [[${@permission.hasPermi('goblin:artist:topic:status')}]];
    var infoFlg = [[${@permission.hasPermi('goblin:artist:topic:info')}]];

    function statusHtml(v) {
        if (v == 1) {
            return '<span class="badge-status badge-status-success">上架中</span>';
        } else if (v == 0) {
            return '<span class="badge-status badge-status-warning">待上架</span>';
        } else {
            return '<span class="badge-status badge-status-gray">已下架</span>';
        }
    }
    function recommendHtml(v) {
        return v ? '<span class="badge-rec badge-rec-active">推荐' + v + '号位</span>'
                 : '<span class="badge-rec badge-rec-none">无推荐</span>';
    }
    function saleTimeHtml(row) {
        if (!row.onSaleStart && !row.onSaleEnd) return '-';
        return (row.onSaleStart || '--') + ' 至 ' + (row.onSaleEnd || '--');
    }

    $(function() {
        $.table.init({
            url: prefix + "/list",
            sortName: "sort",
            sortOrder: "asc",
            columns: [
                { field: 'topicId', title: '专题ID' },
                { field: 'topicName', title: '专题名称' },
                { field: 'artistName', title: '关联艺人', formatter: function(v, row) { return v || row.artistId || '-'; }},
                { field: 'goodsCount', title: '商品数' },
                { field: 'storeName', title: '所属商家', formatter: function(v, row) { return v || row.storeId || '-'; }},
                { field: 'createdAt', title: '创建时间' },
                { field: 'onSaleStart', title: '上架时间', formatter: function(v, row) { return saleTimeHtml(row); }},
                { field: 'status', title: '专题状态', align: 'center', formatter: function(v) { return statusHtml(v); }},
                { field: 'recommendPosition', title: '推荐状态', align: 'center', formatter: function(v) { return recommendHtml(v); }},
                { title: '操作', align: 'center', formatter: function(v, row) {
                    var html = '<div class="action-cell">';
                    html += '<div class="action-row-top">';
                    html += '<a class="btn-act btn-act-detail ' + infoFlg + '" onclick="openDetail(\'' + row.topicId + '\')"><i class="fa fa-eye"></i> 详情</a>';
                    if (row.status == 1) {
                        html += '<a class="btn-act btn-act-offsale ' + statusFlg + '" onclick="changeStatus(\'' + row.topicId + '\',2)"><i class="fa fa-arrow-down"></i> 下架</a>';
                    }
                    html += '</div>';
                    html += '<a class="btn-act btn-act-rec ' + recommendFlg + '" onclick="openRecMenu(event, \'' + row.topicId + '\',' + (row.recommendPosition || 0) + ')">推荐设置 <i class="fa fa-caret-down"></i></a>';
                    html += '</div>';
                    return html;
                }}
            ]
        });
    });

    // ---------- 详情弹框 ----------
    function openDetail(topicId) {
        layer.open({
            type: 2,
            title: '艺人专题详情',
            area: ['680px', '600px'],
            shade: 0.3,
            content: prefix + "/detail/" + topicId
        });
    }

    // ---------- 下架 ----------
    function changeStatus(topicId, status) {
        $.modal.confirm("确认要将该专题下架吗？", function() {
            $.ajax({
                type: 'post', url: prefix + "/status",
                data: { topicId: topicId, status: status },
                success: function() { $.table.refresh(); }
            });
        });
    }

    // ---------- 推荐设置下拉菜单 ----------
    var recPositions = [1, 2, 3, 4, 5];
    var $recMenu = null;

    function openRecMenu(event, topicId, curPos) {
        event.stopPropagation();
        closeRecMenu();

        var html = '<div class="rec-menu">';
        recPositions.forEach(function(pos) {
            html += '<a data-val="' + pos + '"' + (pos == curPos ? ' class="active"' : '') + '>推荐' + pos + '号位</a>';
        });
        html += '<a data-val="0"' + (curPos == 0 ? ' class="active"' : '') + '>无推荐</a></div>';

        $recMenu = $(html).appendTo('body');
        var $btn = $(event.currentTarget);
        $recMenu.css({
            top: $btn.offset().top + $btn.outerHeight() + 4,
            left: $btn.offset().left
        }).show();

        $recMenu.on('click', 'a', function() {
            setRecommend(topicId, $(this).data('val'));
        });
        $(document).on('click.recMenu', closeRecMenu);
    }

    function closeRecMenu() {
        if ($recMenu) { $recMenu.remove(); $recMenu = null; }
        $(document).off('click.recMenu');
    }

    function setRecommend(topicId, position) {
        closeRecMenu();
        $.ajax({
            type: 'post', url: prefix + "/recommend",
            data: { topicId: topicId, position: position },
            success: function() { $.table.refresh(); }
        });
    }
</script>
</body>
</html>
