<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>授权申请详情</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css?v=20200903}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css?v=4.6.1}" rel="stylesheet"/>
    <style>
        :root {
            --paper: #F7F8FA;
            --ink: #1F2937;
            --ink-dim: #6B7280;
            --line: #E5E7EB;
            --blue: #2563EB;
            --amber: #D97706;
            --green: #0F766E;
            --red: #DC2626;
            --gray: #6B7280;
        }
        body {
            background: var(--paper);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
            color: var(--ink);
        }
        .mono {
            font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, "Courier New", monospace;
            letter-spacing: .02em;
        }
        .auth-page { max-width: 680px; margin: 0 auto; padding: 28px 24px 48px; }

        /* ---------- 区块卡片 ---------- */
        .auth-card {
            background: #fff; border: 1px solid var(--line); border-radius: 10px;
            padding: 8px 24px 12px; margin-bottom: 18px;
            box-shadow: 0 1px 2px rgba(31,41,55,.04);
        }
        .auth-card-title {
            font-size: 14px; font-weight: 700; color: var(--ink);
            padding: 16px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
        }

        /* 每条一行 */
        .auth-row {
            display: flex; align-items: flex-start; gap: 16px;
            padding: 10px 0; border-bottom: 1px solid #F1F2F4;
        }
        .auth-row:last-child { border-bottom: none; }
        .auth-row-label {
            width: 88px; flex-shrink: 0; font-size: 13px; color: var(--ink-dim);
            padding-top: 1px;
        }
        .auth-row-value {
            flex: 1; font-size: 14px; color: var(--ink); word-break: break-all; line-height: 1.5;
        }
        .auth-row-value.placeholder { color: #9CA3AF; }

        /* 状态徽章 */
        .auth-badge {
            display: inline-block; padding: 2px 12px; border-radius: 999px;
            font-size: 12px; font-weight: 600; line-height: 1.6;
        }
        .badge-pending  { background: #FFF3E0; color: #B45309; }
        .badge-approved { background: #E6F6F3; color: #0F766E; }
        .badge-rejected { background: #FDE8E8; color: #C53030; }
        .badge-revoked  { background: #F3F4F6; color: #6B7280; }

        /* ---------- 附件画廊（横向排列） ---------- */
        .auth-gallery { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 0 20px; }
        .auth-attach {
            width: 96px; height: 96px; border: 1px solid var(--line); border-radius: 8px;
            overflow: hidden; cursor: zoom-in; background: #fff;
            display: flex; align-items: center; justify-content: center;
            transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
        }
        .auth-attach:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37,99,235,.12); }
        .auth-attach img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .auth-attach-ico { font-size: 26px; color: #C4C9D1; }
        .auth-empty {
            padding: 24px 16px; text-align: center; color: #9CA3AF; font-size: 13px;
            border: 1px dashed var(--line); border-radius: 8px; background: #FAFBFC; margin-bottom: 20px;
        }
        .auth-empty i { display: block; font-size: 26px; margin-bottom: 6px; }

        /* ---------- 图片放大灯箱 ---------- */
        .auth-lightbox {
            display: none; position: fixed; inset: 0; z-index: 99999;
            background: rgba(17,24,39,.88); align-items: center; justify-content: center;
        }
        .auth-lightbox.active { display: flex; }
        .auth-lightbox img {
            max-width: 92vw; max-height: 92vh; object-fit: contain;
            border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
        }
        .auth-lightbox-close {
            position: fixed; top: 20px; right: 28px; font-size: 36px; color: #fff;
            cursor: pointer; line-height: 1; user-select: none; opacity: .85;
        }
        .auth-lightbox-close:hover { opacity: 1; }

        @media (max-width: 640px) {
            .auth-page { padding: 20px 14px 32px; }
            .auth-card { padding: 8px 16px 12px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .auth-attach { transition: none; }
        }
    </style>
</head>
<body class="white-bg">
<div class="auth-page" th:object="${apply}">
    <!-- 基本信息 -->
    <div class="auth-card">
        <div class="auth-card-title">基本信息</div>
        <div class="auth-row">
            <div class="auth-row-label">申请ID：</div>
            <div class="auth-row-value mono" th:text="*{applyId} ?: '--'">A202601010001</div>
        </div>
        <div class="auth-row">
            <div class="auth-row-label">申请商家：</div>
            <div class="auth-row-value" th:text="*{storeName} ?: '--'">摩登天空</div>
        </div>
        <div class="auth-row">
            <div class="auth-row-label">关联艺人：</div>
            <div class="auth-row-value" th:text="*{artistName} ?: '-'">陈粒</div>
        </div>
        <div class="auth-row">
            <div class="auth-row-label">申请时间：</div>
            <div class="auth-row-value mono">
                <span th:if="*{applyTime}" th:text="*{applyTime}">2026-01-01 10:00:00</span>
                <span th:if="!*{applyTime}">--</span>
            </div>
        </div>
    </div>

    <!-- 附件信息 -->
    <div class="auth-card" th:if="*{attachmentUrls != null and !attachmentUrls.isEmpty()}">
        <div class="auth-card-title">附件信息</div>
        <div class="auth-gallery">
            <div class="auth-attach" th:each="url : ${apply.attachmentUrls}" th:title="点击放大查看">
                <img th:src="${url}" alt="附件材料"
                     onerror="this.style.display='none';this.parentElement.innerHTML='<i class=&quot;fa fa-file-image-o auth-attach-ico&quot;></i>'"
                     onclick="authLightbox.open(this.src)"/>
            </div>
        </div>
    </div>
    <div class="auth-empty" th:if="*{attachmentUrls == null or attachmentUrls.isEmpty()}">
        <i class="fa fa-file-o"></i>
        暂无附件材料
    </div>

    <!-- 审批信息 -->
    <div class="auth-card">
        <div class="auth-card-title">审批信息</div>
        <div class="auth-row">
            <div class="auth-row-label">申请状态：</div>
            <div class="auth-row-value">
                <span class="auth-badge" th:classappend="*{status == 0 ? 'badge-pending' : (status == 1 ? 'badge-approved' : (status == 2 ? 'badge-rejected' : 'badge-revoked'))}">
                    <th:block th:if="*{status == 0}">待审核</th:block>
                    <th:block th:if="*{status == 1}">已通过</th:block>
                    <th:block th:if="*{status == 2}">已拒绝</th:block>
                    <th:block th:if="*{status == 3}">已撤销</th:block>
                </span>
            </div>
        </div>
        <div class="auth-row">
            <div class="auth-row-label">审批人：</div>
            <div class="auth-row-value" th:text="*{reviewerName} ?: '--'">admin</div>
        </div>
        <div class="auth-row">
            <div class="auth-row-label">审批时间：</div>
            <div class="auth-row-value mono">
                <span th:if="*{reviewTime}" th:text="*{reviewTime}">2026-01-02 09:30:00</span>
                <span th:if="!*{reviewTime}">--</span>
            </div>
        </div>
        <div class="auth-row">
            <div class="auth-row-label">授权截止：</div>
            <div class="auth-row-value mono">
                <span th:if="*{authExpireAt}" th:text="*{authExpireAt}">2027-01-01 00:00:00</span>
                <span th:if="!*{authExpireAt}">--</span>
            </div>
        </div>
        <div class="auth-row" th:if="*{reviewRemark}">
            <div class="auth-row-label">备注：</div>
            <div class="auth-row-value" th:text="*{reviewRemark}">通过</div>
        </div>
        <div class="auth-row" th:if="*{rejectReason}">
            <div class="auth-row-label">驳回原因：</div>
            <div class="auth-row-value" th:text="*{rejectReason}">材料不完整</div>
        </div>
    </div>
</div>

<!-- 图片放大灯箱 -->
<div id="auth-lightbox" class="auth-lightbox" onclick="authLightbox.close()">
    <span class="auth-lightbox-close" onclick="authLightbox.close()">&times;</span>
    <img id="auth-lightbox-img" src="" alt="" onclick="event.stopPropagation()">
</div>

<script>
    var authLightbox = {
        open: function (src) {
            if (!src) return;
            var lb = document.getElementById('auth-lightbox');
            document.getElementById('auth-lightbox-img').src = src;
            lb.classList.add('active');
            document.body.style.overflow = 'hidden';
        },
        close: function () {
            var lb = document.getElementById('auth-lightbox');
            lb.classList.remove('active');
            document.getElementById('auth-lightbox-img').src = '';
            document.body.style.overflow = '';
        }
    };
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') { authLightbox.close(); }
    });
</script>
</body>
</html>
