<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('艺人详情')"/>
    <style>
        .artist-detail-container {
            padding: 20px;
        }

        .artist-basic-info {
            margin-bottom: 30px;
        }

        .artist-basic-info h3 {
            margin-bottom: 15px;
            color: #333;
            font-size: 18px;
        }

        .info-row {
            display: flex;
            margin-bottom: 12px;
        }

        .info-label {
            width: 120px;
            font-weight: bold;
            color: #666;
        }

        .info-value {
            flex: 1;
            color: #333;
        }

        .artist-intro {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }

        .section-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin: 30px 0 15px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #e9ecef;
        }

        .album-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .album-item {
            width: 100px;
            height: 100px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
        }

        .album-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .table-container {
            margin-top: 15px;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            overflow: hidden;
        }

        .custom-table {
            width: 100%;
            border-collapse: collapse;
        }

        .custom-table thead {
            background-color: #f8f9fa;
        }

        .custom-table th,
        .custom-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #e9ecef;
            text-align: left;
        }

        .custom-table th {
            font-weight: bold;
            color: #333;
        }

        .custom-table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .product-image {
            width: 60px;
            height: 60px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .product-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
        }

        .status-on {
            background-color: #d4edda;
            color: #155724;
        }

        .status-off {
            background-color: #f8d7da;
            color: #721c24;
        }

        .empty-data {
            text-align: center;
            padding: 40px;
            color: #999;
            font-style: italic;
        }

        /* Lightbox */
        .img-zoomable {
            cursor: zoom-in;
        }

        #artist-lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 99999;
            align-items: center;
            justify-content: center;
        }

        #artist-lightbox.active {
            display: flex;
        }

        #artist-lightbox img {
            max-width: 90vw;
            max-height: 90vh;
            object-fit: contain;
            border-radius: 6px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.6);
            transition: transform 0.2s;
        }

        #artist-lightbox-close {
            position: fixed;
            top: 20px;
            right: 28px;
            font-size: 36px;
            color: #fff;
            cursor: pointer;
            line-height: 1;
            user-select: none;
            opacity: 0.85;
        }

        #artist-lightbox-close:hover {
            opacity: 1;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox">
        <div class="ibox-content" th:object="${ArtistVo}">
            <div class="artist-detail-container">
                <!-- 基本信息 -->
                <div class="artist-basic-info">
                    <h3>基本信息</h3>

                    <div class="info-row">
                        <div class="info-label">艺人ID：</div>
                        <div class="info-value" th:text="*{artistId}">10001</div>
                    </div>

                    <div class="info-row">
                        <div class="info-label">艺人名称：</div>
                        <div class="info-value" th:text="*{artistName}">摩登天空</div>
                    </div>

                    <div class="info-row">
                        <div class="info-label">艺人类型：</div>
                        <div class="info-value" th:text="*{artistTypeName}">品牌方</div>
                    </div>

                    <!-- 艺人头像 -->
                    <div class="info-row" th:if="*{avatarUrl}">
                        <div class="info-label">艺人头像：</div>
                        <div class="info-value">
                            <div style="width: 100px; height: 100px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center;">
                                <img th:src="*{avatarUrl}" alt="艺人头像" style="max-width: 100%; max-height: 100%;" class="img-zoomable" onclick="artistLightboxOpen(this.src, this.alt)">
                            </div>
                        </div>
                    </div>

                    <!-- 艺人简介 -->
                    <div class="artist-intro">
                        <div class="info-label" style="margin-bottom: 8px;">艺人简介：</div>
                        <div class="info-value" th:utext="*{introduction} ?: '暂无介绍'">
                            摩登天空是中国知名音乐厂牌，致力于推广独立音乐。
                        </div>
                    </div>
                </div>

                <!-- 艺人相册 -->
                <div th:if="*{albumImages != null and !albumImages.isEmpty()}">
                    <div class="section-title">艺人相册</div>
                    <div class="album-gallery">
                        <th:block th:each="img, iterStat : ${ArtistVo.albumImages}">
                            <div class="album-item">
                                <img th:src="${img}" th:alt="'相册图片' + ${iterStat.index + 1}" class="img-zoomable" onclick="artistLightboxOpen(this.src, this.alt)">
                            </div>
                        </th:block>
                    </div>
                </div>

                <!-- 演出信息 -->
                <div>
                    <div class="section-title">
                        艺人演出信息
                        <span th:if="*{performanceVoList != null}" style="font-size: 14px; color: #666; margin-left: 10px;">
                            (共<span th:text="*{performanceVoList.size()}">2</span>条)
                        </span>
                    </div>

                    <div class="table-container" th:if="*{performanceVoList != null and !performanceVoList.isEmpty()}">
                        <table class="custom-table">
                            <thead>
                            <tr>
                                <th width="40%">演出名称</th>
                                <th width="30%">演出ID</th>
                                <th width="30%">演出时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="performance : ${ArtistVo.performanceVoList}">
                                <td th:text="${performance.title}">摩登天空音乐节</td>
                                <td th:text="${performance.performanceId}">show001</td>
                                <td th:text="${performance.timeStart}">2023-05-01</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div th:if="*{performanceVoList == null or performanceVoList.isEmpty()}" class="empty-data">
                        暂无演出信息
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 图片放大灯箱 -->
<div id="artist-lightbox" onclick="artistLightboxClose()">
    <span id="artist-lightbox-close" onclick="artistLightboxClose()">&times;</span>
    <img id="artist-lightbox-img" src="" alt="" onclick="event.stopPropagation()">
</div>

<script>
    function artistLightboxOpen(src, alt) {
        var lb = document.getElementById('artist-lightbox');
        var img = document.getElementById('artist-lightbox-img');
        img.src = src;
        img.alt = alt || '';
        lb.classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    function artistLightboxClose() {
        var lb = document.getElementById('artist-lightbox');
        lb.classList.remove('active');
        document.getElementById('artist-lightbox-img').src = '';
        document.body.style.overflow = '';
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') { artistLightboxClose(); }
    });
</script>

<th:block th:include="include :: footer"/>
</body>
</html>