<template>
    <!-- 产品列表页 - 印美达 Inkreach -->
    <view class="products-page">
        <!-- 搜索栏 -->
        <view class="search-bar">
            <view class="search-input-wrap">
                <text class="search-icon">🔍</text>
                <input class="search-input" placeholder="搜索商品" placeholder-class="search-placeholder" @input="onSearchInput" :value="searchKeyword" />
            </view>
            <view class="filter-btn" @tap="toggleFilter">
                <text class="filter-icon">⚙</text>
                <text class="filter-text">筛选</text>
            </view>
        </view>

        <!-- 国家选择条 -->
        <scroll-view class="country-bar" :scroll-x="true" :enhanced="true" :show-scrollbar="false">
            <view :class="'country-item ' + (selectedCountry === item.id ? 'active' : '')" @tap="selectCountry" :data-id="item.id" v-for="(item, index) in countries" :key="index">
                <text class="country-flag">{{ item.flag }}</text>

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

        <!-- 已选筛选标签 -->
        <view class="active-filters" v-if="activeFilters.length > 0">
            <view class="active-filter-tag" v-for="(item, index) in activeFilters" :key="index">
                <text>{{ item.label }}</text>

                <text class="filter-remove" @tap="removeFilter" :data-key="item.key">✕</text>
            </view>
            <view class="clear-all" @tap="clearAllFilters">清除全部</view>
        </view>

        <!-- 主体内容：侧边栏 + 产品列表 -->
        <view class="content-body">
            <!-- 左侧分类侧边栏 -->
            <scroll-view class="sidebar" :scroll-y="true">
                <view
                    :class="'sidebar-item ' + (activeCategory === item.id ? 'active' : '')"
                    @tap="selectCategory"
                    :data-id="item.id"
                    v-for="(item, index) in categories"
                    :key="index"
                >
                    <view class="sidebar-indicator" v-if="activeCategory === item.id"></view>

                    <text>{{ item.name }}</text>
                </view>
                <!-- 促销Banner -->
                <view class="sidebar-promo">
                    <text class="promo-title">0元拿样</text>
                    <text class="promo-desc">全国包邮</text>
                </view>
            </scroll-view>

            <!-- 右侧产品列表 -->
            <scroll-view class="product-list-area" :scroll-y="true" @scrolltolower="loadMore">
                <!-- 子分类 -->
                <view class="sub-categories" v-if="subCategories.length > 0">
                    <view
                        :class="'sub-cat-item ' + (activeSubCategory === item.id ? 'active' : '')"
                        @tap="selectSubCategory"
                        :data-id="item.id"
                        v-for="(item, index) in subCategories"
                        :key="index"
                    >
                        {{ item.name }}
                    </view>
                </view>

                <!-- 产品网格 -->
                <view class="product-grid">
                    <view class="product-card" @tap="goDetail" :data-id="item.id" v-for="(item, index) in products" :key="index">
                        <view class="product-img" :style="'background: ' + item.bgColor + ';'">
                            <text class="product-emoji">{{ item.emoji }}</text>
                            <view class="product-badges">
                                <view class="product-badge" :style="'background: ' + tag.bg + '; color: ' + tag.color + ';'" v-for="(tag, index1) in item.tags" :key="index1">
                                    {{ tag.text }}
                                </view>
                            </view>
                        </view>

                        <view class="product-info">
                            <text class="product-name">{{ item.name }}</text>
                            <view class="product-bottom">
                                <text class="product-price">
                                    ¥{{ item.price }}
                                    <text class="product-price-unit">起</text>
                                </text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 分页 -->
                <view class="pagination">
                    <text class="page-info">显示 {{ pagination.start }}-{{ pagination.end }} 共 {{ pagination.total }} 个产品</text>
                    <view class="page-controls">
                        <view :class="'page-btn ' + (pagination.current === 1 ? 'disabled' : '')" @tap="changePage" data-action="prev">上一页</view>
                        <view
                            :class="'page-num ' + (pagination.current === item ? 'active' : '')"
                            @tap="goToPage"
                            :data-page="item"
                            v-for="(item, index) in pageNumbers"
                            :key="index"
                        >
                            {{ item }}
                        </view>
                        <view :class="'page-btn ' + (pagination.current === pagination.totalPages ? 'disabled' : '')" @tap="changePage" data-action="next">下一页</view>
                    </view>
                    <view class="page-size">
                        <text>{{ pagination.pageSize }}/页</text>
                    </view>
                </view>

                <!-- 加载更多提示 -->
                <view class="loading-more" v-if="loadingMore">
                    <text>加载中...</text>
                </view>
            </scroll-view>
        </view>

        <!-- 筛选弹窗 -->
        <view :class="'filter-overlay ' + (showFilter ? 'show' : '')" @tap="closeFilter"></view>
        <view :class="'filter-drawer ' + (showFilter ? 'show' : '')">
            <view class="filter-drawer-header">
                <text class="filter-drawer-title">筛选条件</text>
                <text class="filter-drawer-close" @tap="closeFilter">✕</text>
            </view>
            <scroll-view class="filter-drawer-body" :scroll-y="true">
                <!-- 工艺 -->
                <view class="filter-group">
                    <text class="filter-group-title">工艺</text>
                    <view class="filter-options">
                        <view
                            :class="'filter-option ' + (selectedCrafts.indexOf(item) > -1 ? 'selected' : '')"
                            @tap="toggleCraft"
                            :data-value="item"
                            v-for="(item, index) in craftOptions"
                            :key="index"
                        >
                            {{ item }}
                        </view>
                    </view>
                </view>
                <!-- 材质 -->
                <view class="filter-group">
                    <text class="filter-group-title">材质</text>
                    <view class="filter-options">
                        <view
                            :class="'filter-option ' + (selectedMaterials.indexOf(item) > -1 ? 'selected' : '')"
                            @tap="toggleMaterial"
                            :data-value="item"
                            v-for="(item, index) in materialOptions"
                            :key="index"
                        >
                            {{ item }}
                        </view>
                    </view>
                </view>
                <!-- 价格区间 -->
                <view class="filter-group">
                    <text class="filter-group-title">价格区间</text>
                    <view class="filter-price-range">
                        <input class="price-input" placeholder="最低价" type="number" />
                        <text class="price-divider">-</text>
                        <input class="price-input" placeholder="最高价" type="number" />
                    </view>
                </view>
            </scroll-view>
            <view class="filter-drawer-footer">
                <view class="filter-reset" @tap="resetFilters">重置</view>
                <view class="filter-confirm" @tap="confirmFilters">确定</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            searchKeyword: '',
            selectedCountry: 'us',

            countries: [
                {
                    id: 'us',
                    name: '美国',
                    flag: '🇺🇸'
                },
                {
                    id: 'uk',
                    name: '英国',
                    flag: '🇬🇧'
                },
                {
                    id: 'jp',
                    name: '日本',
                    flag: '🇯🇵'
                },
                {
                    id: 'mx',
                    name: '墨西哥',
                    flag: '🇲🇽'
                },
                {
                    id: 'br',
                    name: '巴西',
                    flag: '🇧🇷'
                },
                {
                    id: 'ae',
                    name: '中东',
                    flag: '🇦🇪'
                },
                {
                    id: 'pl',
                    name: '波兰',
                    flag: '🇵🇱'
                },
                {
                    id: 'es',
                    name: '西班牙',
                    flag: '🇪🇸'
                },
                {
                    id: 'de',
                    name: '德国',
                    flag: '🇩🇪'
                },
                {
                    id: 'it',
                    name: '意大利',
                    flag: '🇮🇹'
                },
                {
                    id: 'fr',
                    name: '法国',
                    flag: '🇫🇷'
                },
                {
                    id: 'ca',
                    name: '加拿大',
                    flag: '🇨🇦'
                },
                {
                    id: 'au',
                    name: '澳大利亚',
                    flag: '🇦🇺'
                },
                {
                    id: 'kr',
                    name: '韩国',
                    flag: '🇰🇷'
                }
            ],

            activeCategory: 'all',

            categories: [
                {
                    id: 'all',
                    name: '全部商品'
                },
                {
                    id: 'men',
                    name: '男士服装'
                },
                {
                    id: 'women',
                    name: '女士服装'
                },
                {
                    id: 'kids',
                    name: '儿童服装'
                },
                {
                    id: 'home',
                    name: '家居配饰'
                },
                {
                    id: 'bag',
                    name: '包包配饰'
                }
            ],

            subCategories: [],
            activeSubCategory: '',

            activeFilters: [
                {
                    key: 'country',
                    label: '美国'
                },
                {
                    key: 'craft',
                    label: '烫画'
                },
                {
                    key: 'material',
                    label: '棉麻'
                }
            ],

            showFilter: false,
            selectedCrafts: ['烫画'],
            selectedMaterials: ['棉麻'],
            craftOptions: ['烫画', '刺绣', '丝印', '数码直喷', '热转印'],
            materialOptions: ['棉麻', '纯棉', '涤纶', '混纺', '牛奶丝'],

            pagination: {
                start: 1,
                end: 10,
                total: 96,
                current: 1,
                pageSize: 10,
                totalPages: 10
            },

            pageNumbers: [1, 2, 3, 4, 5],
            loadingMore: false,

            products: [
                {
                    id: 1,
                    name: '180G牛奶丝T恤 DG120',
                    price: '28.00',
                    bgColor: '#F5F5F5',
                    emoji: '👕',
                    tags: [
                        {
                            text: '可定制',
                            bg: '#FFF0E5',
                            color: '#FF6800'
                        },
                        {
                            text: '现货',
                            bg: '#E5F5FF',
                            color: '#1890FF'
                        }
                    ]
                },
                {
                    id: 2,
                    name: '纯棉连帽卫衣 HD200',
                    price: '59.00',
                    bgColor: '#E8E8E8',
                    emoji: '🧥',
                    tags: [
                        {
                            text: '可定制',
                            bg: '#FFF0E5',
                            color: '#FF6800'
                        },
                        {
                            text: '快返',
                            bg: '#F0FFE5',
                            color: '#52C41A'
                        }
                    ]
                },
                {
                    id: 3,
                    name: '260G重装T恤 TS260',
                    price: '35.00',
                    bgColor: '#F0F0F0',
                    emoji: '👕',
                    tags: [
                        {
                            text: '可定制',
                            bg: '#FFF0E5',
                            color: '#FF6800'
                        }
                    ]
                },
                {
                    id: 4,
                    name: '精梳棉Polo衫 PL100',
                    price: '45.00',
                    bgColor: '#F8F8F8',
                    emoji: '👔',
                    tags: [
                        {
                            text: '可定制',
                            bg: '#FFF0E5',
                            color: '#FF6800'
                        },
                        {
                            text: '现货',
                            bg: '#E5F5FF',
                            color: '#1890FF'
                        }
                    ]
                },
                {
                    id: 5,
                    name: '抓绒卫裤 PT150',
                    price: '42.00',
                    bgColor: '#F5F5F5',
                    emoji: '👖',
                    tags: [
                        {
                            text: '快返',
                            bg: '#F0FFE5',
                            color: '#52C41A'
                        }
                    ]
                },
                {
                    id: 6,
                    name: '运动速干T恤 ST200',
                    price: '32.00',
                    bgColor: '#E8E8E8',
                    emoji: '👕',
                    tags: [
                        {
                            text: '可定制',
                            bg: '#FFF0E5',
                            color: '#FF6800'
                        }
                    ]
                },
                {
                    id: 7,
                    name: '纯棉背包 BP300',
                    price: '25.00',
                    bgColor: '#F0F0F0',
                    emoji: '🎒',
                    tags: [
                        {
                            text: '可定制',
                            bg: '#FFF0E5',
                            color: '#FF6800'
                        },
                        {
                            text: '现货',
                            bg: '#E5F5FF',
                            color: '#1890FF'
                        }
                    ]
                },
                {
                    id: 8,
                    name: '儿童纯棉T恤 KD100',
                    price: '22.00',
                    bgColor: '#F8F8F8',
                    emoji: '👶',
                    tags: [
                        {
                            text: '可定制',
                            bg: '#FFF0E5',
                            color: '#FF6800'
                        }
                    ]
                },
                {
                    id: 9,
                    name: '帆布托特包 BG150',
                    price: '15.00',
                    bgColor: '#F5F5F5',
                    emoji: '👜',
                    tags: [
                        {
                            text: '可定制',
                            bg: '#FFF0E5',
                            color: '#FF6800'
                        },
                        {
                            text: '快返',
                            bg: '#F0FFE5',
                            color: '#52C41A'
                        }
                    ]
                },
                {
                    id: 10,
                    name: '针织开衫 CR180',
                    price: '55.00',
                    bgColor: '#E8E8E8',
                    emoji: '🧶',
                    tags: [
                        {
                            text: '可定制',
                            bg: '#FFF0E5',
                            color: '#FF6800'
                        }
                    ]
                }
            ],

            tag: {
                bg: '',
                color: '',
                text: ''
            }
        };
    },
    onLoad() {
        this.loadSubCategories('all');
    },
    methods: {
        loadSubCategories(catId) {
            const subCatMap = {
                all: [],
                men: [
                    {
                        id: 'tops',
                        name: '上装'
                    },
                    {
                        id: 'hoodie',
                        name: '卫衣'
                    },
                    {
                        id: 'tshirt',
                        name: 'T恤'
                    },
                    {
                        id: 'shirt',
                        name: '衬衫'
                    },
                    {
                        id: 'pants',
                        name: '裤装'
                    },
                    {
                        id: 'underwear',
                        name: '内衣'
                    }
                ],
                women: [
                    {
                        id: 'dress',
                        name: '连衣裙'
                    },
                    {
                        id: 'tops',
                        name: '上装'
                    },
                    {
                        id: 'bottoms',
                        name: '下装'
                    }
                ],
                kids: [
                    {
                        id: 'baby',
                        name: '婴儿装'
                    },
                    {
                        id: 'kids',
                        name: '儿童装'
                    }
                ],
                home: [
                    {
                        id: 'blanket',
                        name: '毛毯'
                    },
                    {
                        id: 'pillow',
                        name: '抱枕'
                    }
                ],
                bag: [
                    {
                        id: 'tote',
                        name: '托特包'
                    },
                    {
                        id: 'backpack',
                        name: '背包'
                    }
                ]
            };
            this.setData({
                subCategories: subCatMap[catId] || [],
                activeSubCategory: subCatMap[catId]?.[0]?.id || ''
            });
        },

        onSearchInput(e) {
            this.setData({
                searchKeyword: e.detail.value
            });
        },

        selectCountry(e) {
            const id = e.currentTarget.dataset.id;
            const country = this.countries.find((c) => c.id === id);
            const filters = this.activeFilters.filter((f) => f.key !== 'country');
            filters.push({
                key: 'country',
                label: country.name
            });
            this.setData({
                selectedCountry: id,
                activeFilters: filters
            });
        },

        selectCategory(e) {
            const id = e.currentTarget.dataset.id;
            this.setData({
                activeCategory: id
            });
            this.loadSubCategories(id);
        },

        selectSubCategory(e) {
            this.setData({
                activeSubCategory: e.currentTarget.dataset.id
            });
        },

        toggleFilter() {
            this.setData({
                showFilter: !this.showFilter
            });
        },

        closeFilter() {
            this.setData({
                showFilter: false
            });
        },

        toggleCraft(e) {
            const value = e.currentTarget.dataset.value;
            let crafts = [...this.selectedCrafts];
            const idx = crafts.indexOf(value);
            if (idx > -1) {
                crafts.splice(idx, 1);
            } else {
                crafts.push(value);
            }
            this.setData({
                selectedCrafts: crafts
            });
        },

        toggleMaterial(e) {
            const value = e.currentTarget.dataset.value;
            let materials = [...this.selectedMaterials];
            const idx = materials.indexOf(value);
            if (idx > -1) {
                materials.splice(idx, 1);
            } else {
                materials.push(value);
            }
            this.setData({
                selectedMaterials: materials
            });
        },

        removeFilter(e) {
            const key = e.currentTarget.dataset.key;
            const filters = this.activeFilters.filter((f) => f.key !== key);
            this.setData({
                activeFilters: filters
            });
        },

        clearAllFilters() {
            this.setData({
                activeFilters: []
            });
        },

        resetFilters() {
            this.setData({
                selectedCrafts: [],
                selectedMaterials: []
            });
        },

        confirmFilters() {
            const filters = [];
            if (this.selectedCrafts.length > 0) {
                filters.push({
                    key: 'craft',
                    label: this.selectedCrafts.join(',')
                });
            }
            if (this.selectedMaterials.length > 0) {
                filters.push({
                    key: 'material',
                    label: this.selectedMaterials.join(',')
                });
            }
            this.setData({
                activeFilters: filters,
                showFilter: false
            });
        },

        goDetail(e) {
            const id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: `/pages/product-detail/product-detail?id=${id}`
            });
        },

        changePage(e) {
            const action = e.currentTarget.dataset.action;
            let current = this.pagination.current;
            if (action === 'prev' && current > 1) {
                current--;
            }
            if (action === 'next' && current < this.pagination.totalPages) {
                current++;
            }
            this.updatePagination(current);
        },

        goToPage(e) {
            this.updatePagination(e.currentTarget.dataset.page);
        },

        updatePagination(current) {
            const total = this.pagination.total;
            const pageSize = this.pagination.pageSize;
            const totalPages = Math.ceil(total / pageSize);
            let pageNumbers = [];
            for (let i = Math.max(1, current - 2); i <= Math.min(totalPages, current + 2); i++) {
                pageNumbers.push(i);
            }
            this.setData({
                pagination: {
                    ...this.pagination,
                    current,
                    start: (current - 1) * pageSize + 1,
                    end: Math.min(current * pageSize, total),
                    totalPages
                },
                pageNumbers
            });
        },

        loadMore() {
            if (this.loadingMore) {
                return;
            }
            this.setData({
                loadingMore: true
            });
            setTimeout(() => {
                this.setData({
                    loadingMore: false
                });
            }, 1000);
        }
    }
};
</script>
<style>
@import './products.css';
</style>
