<?php
/**
 * 芋头CMS - 家具定制企业网站模板 - 产品详情
 */
if (!defined('ROOT_PATH')) { exit('Access Denied'); }
if (!isset($product) && isset($id) && $id > 0) {
    $product = $db->fetch("SELECT p.*, c.channel_name FROM {$db->table('product')} p LEFT JOIN {$db->table('channel')} c ON p.channel_id=c.id WHERE p.id=? AND p.status=1", [$id]);
}
$pageTitle = htmlspecialchars($product['title'] ?? '产品详情');
$extraHead = '';

require_once __DIR__ . '/../_header.php';

$pictures = [];
if (!empty($product['pictures'])) {
    $pictures = is_array($product['pictures']) ? $product['pictures'] : json_decode($product['pictures'], true);
}
$defaultPic = !empty($product['litpic']) ? $product['litpic'] : 'https://picsum.photos/800/600?random=' . ($product['id'] ?? 1);
?>
<style>
.product-detail { padding-top: 70px; }
.product-detail-main { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 40px 0; }
.product-gallery-main { border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.product-gallery-main img { width: 100%; height: 400px; object-fit: cover; }
.product-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.product-gallery-thumbs img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; }
.product-gallery-thumbs img.active { border-color: var(--accent); }
.product-info h1 { font-size: 24px; color: var(--dark); margin-bottom: 12px; }
.product-info .p-price { font-size: 28px; color: var(--primary); font-weight: 700; margin-bottom: 20px; }
.product-info .p-price small { font-size: 14px; font-weight: 400; color: var(--gray-light); }
.product-info .p-desc { color: var(--gray); font-size: 15px; line-height: 1.8; }
.product-info .p-meta { margin-top: 20px; font-size: 13px; color: var(--gray-light); }
.product-info .p-meta span { margin-right: 20px; }
.product-detail-content { margin: 40px 0; }
.product-detail-content h2 { font-size: 20px; color: var(--dark); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
.product-detail-content .content { color: var(--text); line-height: 1.8; font-size: 15px; }
.back-btn { display: inline-block; padding: 10px 24px; background: var(--dark); color: white; border-radius: 4px; margin-bottom: 20px; }
.back-btn:hover { background: var(--gray-dark); color: white; }
@media(max-width:768px) {
.product-detail-main { grid-template-columns: 1fr; }
.product-gallery-main img { height: 300px; }
}
</style>

<div class="product-detail">
<div class="container">
<a href="javascript:history.back();" class="back-btn">‹ 返回</a>
<div class="product-detail-main">
<div class="product-gallery">
<div class="product-gallery-main">
<img src="<?php echo htmlspecialchars($defaultPic); ?>" id="galleryMainImg" alt="">
</div>
<?php if (count($pictures) > 0): ?>
<div class="product-gallery-thumbs" id="galleryThumbs">
<?php foreach ($pictures as $idx => $pic): ?>
<img src="<?php echo htmlspecialchars($pic); ?>" class="<?php echo $idx === 0 ? 'active' : ''; ?>" onclick="switchImg(this, '<?php echo htmlspecialchars($pic); ?>')" alt="">
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>

<div class="product-info">
<h1><?php echo htmlspecialchars($product['title'] ?? ''); ?></h1>
<?php if (!empty($product['price'])): ?>
<p class="p-price">¥<?php echo number_format($product['price'], 2); ?><small> / 起</small></p>
<?php endif; ?>
<?php if (!empty($product['description'])): ?>
<p class="p-desc"><?php echo nl2br(htmlspecialchars($product['description'])); ?></p>
<?php endif; ?>
<div class="p-meta">
<span>发布时间：<?php echo !empty($product['create_time']) ? date('Y-m-d', $product['create_time']) : ''; ?></span>
<span>浏览：<?php echo intval($product['view'] ?? 0); ?> 次</span>
</div>
</div>
</div>

<?php if (!empty($product['content'])): ?>
<div class="product-detail-content">
<h2>产品详情</h2>
<div class="content">
<?php echo $product['content']; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>

<script>
function switchImg(thumb, src) {
document.getElementById('galleryMainImg').src = src;
document.querySelectorAll('.product-gallery-thumbs img').forEach(function(i){ i.classList.remove('active'); });
thumb.classList.add('active');
}
</script>

<?php require_once __DIR__ . '/../_footer.php'; ?>