<script setup lang="ts">
import type { Category } from './index.vue'

// 在unibest框架中，使用definePage宏配置页面属性
definePage({
  // 页面样式配置
  style: {
    // 导航栏标题文本 - 这就是设置头部导航栏标题的属性
    navigationBarTitleText: '%more.category%',
    // 导航栏样式：default(默认)或custom(自定义)
    navigationStyle: 'default',
    backgroundColor: '#ffffff',
    // 可以添加其他配置如背景色、文字颜色等
    navigationBarBackgroundColor: '#ffffff', // 导航栏背景色
    // navigationBarTextStyle: 'black', // 导航栏标题颜色，仅支持black/white
  },
})

const marketingCenter: Array<Category> = [
  { name: 'Special', icon: '/static/images/category/Special.png', label: '特价' },
  { name: 'TopPicks', icon: '/static/images/category/TopPicks.png', label: '精选' },
  { name: 'NewArrival', icon: '/static/images/category/NewArrival.png', label: '新品' },
  { name: 'Merchandise', icon: '/static/images/category/Merchandise.png', label: '周边' },
]

const productCategories: Array<Category> = [
  { name: 'Frame', icon: '/static/images/category/Frame.png', label: '机架' },
  { name: 'Antenna', icon: '/static/images/category/Antenna.png', label: '天线' },
  { name: 'Motor', icon: '/static/images/category/Motor.png', label: '电机' },
  { name: 'Propeller', icon: '/static/images/category/Propeller.png', label: '螺旋桨' },
  { name: 'Accessories', icon: '/static/images/category/Accessories.png', label: '配件' },
  { name: 'FPV', icon: '/static/images/category/FPV.png', label: 'FPV 设备' },
]
</script>

<template>
  <view class="more-category">
    <view class="marketing-center-container">
      <view class="marketing-center-title">
        <text>营销中心</text>
      </view>
      <view class="marketing-center">
        <view v-for="category in marketingCenter" :key="category.name" class="marketing-center-item">
          <image :src="category.icon" />
          <text>{{ category.label }}</text>
        </view>
      </view>
    </view>
    <view class="product-categories-container">
      <view class="product-categories-title">
        <text>产品分类</text>
      </view>
      <view class="product-categories">
        <view v-for="category in productCategories" :key="category.name" class="product-categories-item">
          <image :src="category.icon" />
          <text>{{ category.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.more-category {
  padding: 32rpx 28rpx 0;
  background-color: #fff;
  height: calc(100vh - 28rpx);

  .marketing-center-container {
    padding-bottom: 56rpx;
    .marketing-center-title {
      font-size: 32rpx;
      line-height: 1.4;
      color: #24272c;
      font-weight: bolder;
      margin-bottom: 32rpx;
    }

    .marketing-center {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        image {
          width: 96rpx;
          height: 96rpx;
        }

        text {
          font-size: 28rpx;
          line-height: 1.4;
        }
      }
    }
  }

  .product-categories-container {
    border-top: 1px solid #e7e7e7;
    .product-categories-title {
      font-size: 32rpx;
      line-height: 1.4;
      color: #24272c;
      font-weight: bolder;
      padding: 32rpx 0;
    }

    .product-categories {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      row-gap: 56rpx;

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        image {
          width: 96rpx;
          height: 96rpx;
        }

        text {
          font-size: 28rpx;
          line-height: 1.4;
        }
      }
    }
  }
}
</style>
