<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>艺人专题详情</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <style>
        body {
            background-color: #fff;
            color: #333;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            font-size: 14px;
            padding: 24px 32px;
            margin: 0;
        }
        .detail-container {
            padding-bottom: 60px;
        }
        .detail-section {
            margin-bottom: 24px;
        }
        .detail-section-title {
            font-size: 15px;
            font-weight: bold;
            color: #262626;
            padding-bottom: 10px;
            margin-bottom: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        .detail-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .detail-item {
            display: flex;
            align-items: center;
            line-height: 1.5;
        }
        .detail-item .label-text {
            color: #8c8c8c;
            width: 85px;
            flex-shrink: 0;
            white-space: nowrap;
        }
        .detail-item .value-text {
            color: #262626;
            margin-left: 12px;
            word-break: break-all;
        }
        .goods-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
        }
        .goods-table th, .goods-table td {
            padding: 12px 16px;
            text-align: left;
            vertical-align: middle;
            border-bottom: 1px solid #f0f0f0;
        }
        .goods-table th {
            background: #fafafa;
            font-weight: bold;
            color: #262626;
            border-top: none;
            border-left: none;
            border-right: none;
        }
        .goods-cover-wrap {
            width: 52px;
            height: 52px;
        }
        .goods-cover {
            width: 52px;
            height: 52px;
            object-fit: cover;
            border-radius: 4px;
            display: block;
        }
        .goods-cover-placeholder {
            width: 52px;
            height: 52px;
            border-radius: 4px;
            background: #5c62d6;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .goods-name {
            color: #262626;
        }
        .goods-spec {
            color: #595959;
        }
        .goods-price {
            color: #ff4d4f;
            font-weight: bold;
        }
        .detail-empty {
            color: #8c8c8c;
            text-align: center;
            padding: 32px 0;
            font-size: 14px;
        }
        .detail-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            padding: 12px 24px;
            text-align: right;
            border-top: 1px solid #f0f0f0;
            z-index: 10;
        }
        .btn-close {
            background: #e0e0e0;
            border: none;
            color: #333;
            font-size: 14px;
            padding: 6px 22px;
            border-radius: 4px;
            cursor: pointer;
            outline: none;
            transition: background 0.2s;
        }
        .btn-close:hover {
            background: #d4d4d4;
        }
    </style>
</head>
<body>
<div class="detail-container" th:object="${topic}">

    <!-- 基本信息 -->
    <div class="detail-section">
        <div class="detail-section-title">基本信息</div>
        <div class="detail-list">
            <div class="detail-item">
                <span class="label-text">专题名称：</span>
                <span class="value-text" th:text="*{topicName} ?: '-'">-</span>
            </div>
            <div class="detail-item">
                <span class="label-text">所属商家：</span>
                <span class="value-text" th:text="${store != null ? store.storeName : '-'}">-</span>
            </div>
            <div class="detail-item">
                <span class="label-text">关联艺人：</span>
                <span class="value-text" th:text="${artist != null ? artist.artistName : '-'}">-</span>
            </div>
            <div class="detail-item">
                <span class="label-text">专题标签：</span>
                <span class="value-text" th:text="*{tag} ?: '-'">-</span>
            </div>
            <div class="detail-item">
                <span class="label-text">创建时间：</span>
                <span class="value-text" th:text="*{createdAt} ?: '-'">-</span>
            </div>
        </div>
    </div>

    <!-- 上架时间 -->
    <div class="detail-section">
        <div class="detail-section-title">上架时间</div>
        <div class="detail-list">
            <div class="detail-item">
                <span class="label-text">开始时间：</span>
                <span class="value-text" th:text="*{onSaleStart} ?: '-'">-</span>
            </div>
            <div class="detail-item">
                <span class="label-text">结束时间：</span>
                <span class="value-text" th:text="*{onSaleEnd} ?: '-'">-</span>
            </div>
        </div>
    </div>

    <!-- 关联商品 -->
    <div class="detail-section">
        <div class="detail-section-title" th:text="|关联商品（共 ${topic.goods != null ? #lists.size(topic.goods) : 0} 个）|">关联商品（共0个）</div>
        <table class="goods-table" th:if="${topic.goods != null and !#lists.isEmpty(topic.goods)}">
            <thead>
            <tr>
                <th style="width: 90px;">商品头图</th>
                <th>商品名称</th>
                <th>商品规格</th>
                <th style="width: 120px;">商品价格</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="good : ${topic.goods}">
                <td>
                    <div class="goods-cover-wrap">
                        <img class="goods-cover" th:if="${good.coverPic != null and !#strings.isEmpty(good.coverPic)}"
                             th:src="${good.coverPic}" alt="商品图"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"/>
                        <div class="goods-cover-placeholder"
                             th:style="${good.coverPic != null and !#strings.isEmpty(good.coverPic)} ? 'display:none;' : 'display:flex;'">
                            商品图
                        </div>
                    </div>
                </td>
                <td class="goods-name" th:text="${good.name} ?: '-'">-</td>
                <td class="goods-spec" th:text="${good.spec} ?: '-'">-</td>
                <td class="goods-price"
                    th:text="${good.sellPrice != null and !#strings.isEmpty(good.sellPrice) ? '¥' + good.sellPrice : '-'}">-</td>
            </tr>
            </tbody>
        </table>
        <div class="detail-empty" th:if="${topic.goods == null or #lists.isEmpty(topic.goods)}">暂未配置商品</div>
    </div>

    <!-- 底部关闭按钮 -->
    <div class="detail-footer">
        <button type="button" class="btn-close" onclick="closeDialog()">关 闭</button>
    </div>
</div>

<script>
    function closeDialog() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>
</body>
</html>
