<template>
    <!-- 产品详情页 -->
    <view class="detail-page">
        <!-- 产品图片区 -->
        <view class="detail-images">
            <swiper class="detail-swiper" :indicator-dots="true" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#FF6800" :circular="true">
                <swiper-item v-for="(item, index) in productImages" :key="index">
                    <view class="swiper-img" :style="'background: ' + item.bg + ';'">
                        <text class="swiper-emoji">{{ item.emoji }}</text>
                    </view>
                </swiper-item>
            </swiper>
            <view class="detail-badges">
                <view class="detail-badge" :style="'background: ' + item.bg + '; color: ' + item.color + ';'" v-for="(item, index) in productTags" :key="index">
                    {{ item.text }}
                </view>
            </view>
        </view>

        <!-- 产品信息 -->
        <view class="detail-info-section">
            <view class="detail-header">
                <text class="detail-name">{{ product.name }}</text>
                <text class="detail-code">SKU: {{ product.code }}</text>
            </view>
            <view class="detail-price-row">
                <text class="detail-price">¥{{ product.price }}</text>
                <text class="detail-price-unit">起</text>
                <text class="detail-price-original" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
            </view>
            <view class="detail-meta">
                <view class="meta-item">
                    <text class="meta-label">起订量</text>
                    <text class="meta-value">{{ product.moq }}件</text>
                </view>
                <view class="meta-item">
                    <text class="meta-label">生产周期</text>
                    <text class="meta-value">{{ product.leadTime }}</text>
                </view>
                <view class="meta-item">
                    <text class="meta-label">工艺</text>
                    <text class="meta-value">{{ product.craft }}</text>
                </view>
            </view>
        </view>

        <!-- 颜色选择 -->
        <view class="detail-section">
            <text class="section-label">颜色选择</text>
            <view class="color-options">
                <view :class="'color-option ' + (selectedColor === index ? 'selected' : '')" @tap="selectColor" :data-index="index" v-for="(item, index) in colors" :key="index">
                    <view class="color-dot" :style="'background: ' + item.value + ';'"></view>

                    <text class="color-name">{{ item.name }}</text>
                </view>
            </view>
        </view>

        <!-- 尺码选择 -->
        <view class="detail-section">
            <text class="section-label">尺码选择</text>
            <view class="size-options">
                <view :class="'size-option ' + (selectedSize === item ? 'selected' : '')" @tap="selectSize" :data-size="item" v-for="(item, index) in sizes" :key="index">
                    {{ item }}
                </view>
            </view>
        </view>

        <!-- 产品详情 -->
        <view class="detail-section">
            <text class="section-label">产品参数</text>
            <view class="params-table">
                <view class="param-row" v-for="(item, index) in productParams" :key="index">
                    <text class="param-label">{{ item.label }}</text>

                    <text class="param-value">{{ item.value }}</text>
                </view>
            </view>
        </view>

        <!-- 工艺说明 -->
        <view class="detail-section">
            <text class="section-label">工艺说明</text>
            <view class="craft-info">
                <view class="craft-card" v-for="(item, index) in crafts" :key="index">
                    <view class="craft-icon" :style="'background: ' + item.bg + ';'">
                        <text class="craft-emoji">{{ item.emoji }}</text>
                    </view>

                    <text class="craft-name">{{ item.name }}</text>

                    <text class="craft-desc">{{ item.desc }}</text>
                </view>
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="detail-bottom-bar safe-bottom">
            <view class="bottom-btn-icon" @tap="toggleFav">
                <text class="bottom-icon">{{ isFav ? '❤️' : '🤍' }}</text>
                <text class="bottom-icon-text">收藏</text>
            </view>
            <view class="bottom-btn-icon" @tap="contactService">
                <text class="bottom-icon">💬</text>
                <text class="bottom-icon-text">客服</text>
            </view>
            <view class="bottom-btn-cart" @tap="addToCart">
                <text>加入清单</text>
            </view>
            <view class="bottom-btn-design" @tap="startDesign">
                <text>立即定制</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            productId: null,
            product: {
                name: '180G牛奶丝T恤 DG120',
                code: 'DG120',
                price: '28.00',
                originalPrice: '35.00',
                moq: 1,
                leadTime: '48小时',
                craft: '烫画/数码直喷'
            },
            productImages: [
                {
                    bg: '#F5F5F5',
                    emoji: '👕'
                },
                {
                    bg: '#E8E8E8',
                    emoji: '👕'
                },
                {
                    bg: '#F0F0F0',
                    emoji: '👕'
                }
            ],
            productTags: [
                {
                    text: '可定制',
                    bg: '#FFF0E5',
                    color: '#FF6800'
                },
                {
                    text: '现货',
                    bg: '#E5F5FF',
                    color: '#1890FF'
                },
                {
                    text: '快返',
                    bg: '#F0FFE5',
                    color: '#52C41A'
                }
            ],
            colors: [
                {
                    name: '白色',
                    value: '#FFFFFF'
                },
                {
                    name: '黑色',
                    value: '#1a1a1a'
                },
                {
                    name: '灰色',
                    value: '#999999'
                },
                {
                    name: '橙色',
                    value: '#FF6800'
                },
                {
                    name: '藏青',
                    value: '#1B365D'
                },
                {
                    name: '军绿',
                    value: '#4A5D23'
                }
            ],
            selectedColor: 0,
            sizes: ['XS', 'S', 'M', 'L', 'XL', '2XL', '3XL'],
            selectedSize: 'M',
            productParams: [
                {
                    label: '克重',
                    value: '180g'
                },
                {
                    label: '材质',
                    value: '牛奶丝（改性聚酯纤维）'
                },
                {
                    label: '版型',
                    value: '常规版'
                },
                {
                    label: '领型',
                    value: '圆领'
                },
                {
                    label: '袖型',
                    value: '短袖'
                },
                {
                    label: '适用工艺',
                    value: '烫画、数码直喷、刺绣'
                },
                {
                    label: '可售区域',
                    value: '全球'
                },
                {
                    label: '洗涤说明',
                    value: '冷水机洗，不可漂白'
                }
            ],
            crafts: [
                {
                    name: '烫画',
                    desc: '色彩鲜艳，适合复杂图案，成本低',
                    emoji: '🎨',
                    bg: '#FFF0E5'
                },
                {
                    name: '数码直喷',
                    desc: '触感柔软，透气性好，适合大面积印花',
                    emoji: '🖨️',
                    bg: '#E5F5FF'
                },
                {
                    name: '刺绣',
                    desc: '质感高级，经久耐用，适合logo',
                    emoji: '🪡',
                    bg: '#F0FFE5'
                }
            ],
            isFav: false
        };
    },
    onLoad(options) {
        if (options.id) {
            this.setData({
                productId: options.id
            });
        }
    },
    methods: {
        selectColor(e) {
            this.setData({
                selectedColor: e.currentTarget.dataset.index
            });
        },

        selectSize(e) {
            this.setData({
                selectedSize: e.currentTarget.dataset.size
            });
        },

        toggleFav() {
            this.setData({
                isFav: !this.isFav
            });
            uni.showToast({
                title: this.isFav ? '已收藏' : '已取消',
                icon: 'none'
            });
        },

        contactService() {
            uni.showToast({
                title: '客服功能开发中',
                icon: 'none'
            });
        },

        addToCart() {
            uni.showToast({
                title: '已加入清单',
                icon: 'success'
            });
        },

        startDesign() {
            uni.showToast({
                title: '定制功能开发中',
                icon: 'none'
            });
        }
    }
};
</script>
<style>
@import './product-detail.css';
</style>
