<script lang="ts" setup>
import SearchBar from '@/components/searchBar.vue'

definePage({
  style: {
    'navigationBarTitleText': '%tabbar.me%',
    'navigationStyle': 'custom',
    'backgroundColor': '#F8FAFB',
    'app-plus': {
      bounce: 'none',
    },
  },
})

interface Category {
  name: string
  label: string
  key: number
}

interface ProductData {
  [key: string]: Product[]
}

interface Product {
  name: string
  key: number
  image: string
  price: number
}
const categories: Category[] = [
  // {
  //   name: 'recommend',
  //   label: '推荐✨️',
  //   key: 0,
  // },
  {
    name: 'frame',
    label: '机架',
    key: 1,
  },
  {
    name: 'antenna',
    label: '天线',
    key: 2,
  },
  {
    name: 'motor',
    label: '电机',
    key: 3,
  },
  {
    name: 'propeller',
    label: '螺旋桨',
    key: 4,
  },
]
const productData: ProductData = {
  // recommend: [
  //   {
  //     name: 'VD5',
  //     key: 1,
  //     image: '/static/images/frame_model.png',
  //     price: 100,
  //   },
  //   {
  //     name: 'VD6',
  //     key: 2,
  //     image: '/static/images/frame_model.png',
  //     price: 100,
  //   },
  //   {
  //     name: 'VD7',
  //     key: 3,
  //     image: '/static/images/frame_model.png',
  //     price: 100,
  //   },
  // ],
  frame: [
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD1',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },

  ],
  antenna: [
    {
      name: 'VD5',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD6',
      key: 2,
      image: '/static/images/frame_model.png',
      price: 100,
    },

  ],
  motor: [
    {
      name: 'VD5',
      key: 1,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD6',
      key: 2,
      image: '/static/images/frame_model.png',
      price: 100,
    },
    {
      name: 'VD7',
      key: 3,
      image: '/static/images/frame_model.png',
      price: 100,
    },
  ],
}

const activeCategory = ref<Category>(categories[0])
</script>

<template>
  <view class="category-page">
    <view class="top-content">
      <SearchBar class="search-bar" />
    </view>

    <view class="main-content">
      <view class="category-nav">
        <view v-for="(item, index) in categories" :key="index" class="category-nav-item" :class="{ active: activeCategory.key === item.key }" @click="activeCategory = item">
          <view class="category-nav-inner">
            <text class="category-text">{{ item.label }}</text>
          </view>
        </view>
      </view>

      <view class="category-content">
        <view class="category-title">
          {{ activeCategory.label }}
        </view>
        <view class="product-list">
          <view v-for="product in productData[activeCategory.name]" :key="product.key" class="product-item">
            <image class="product-image" :src="product.image" mode="aspectFit" />
            <view class="product-info">
              <view class="product-name">
                {{ product.name }}
              </view>
              <view class="product-price">
                <text class="text-11px">$</text>{{ product.price.toFixed(2) }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="less" scoped>
.category-page {
  background-color: #f8fafb;
  padding-top: 195rpx;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // min-height: calc(100vh - 128rpx);

  .top-content {
    padding-top: 120rpx;
    background-color: #fff;
    padding-bottom: 10rpx;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    :deep(.search-bar) {
      .search-input {
        background-color: rgba(249, 249, 249, 1);
      }
    }
  }

  .main-content {
    display: flex;
    flex: 1;

    .category-nav {
      flex-basis: 206rpx;
      flex-shrink: 0;

      &-item {
        height: 112rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;

        &.active {
          color: #333333;
          background-color: #fff;
          .category-nav-inner {
            color: #333333;
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 6rpx;
              height: 100%;
              background-color: #0070d5;
              border-radius: 4rpx;
            }
          }
        }

        .category-nav-inner {
          padding: 0 32rpx;
          position: relative;
          color: #666666;
        }
      }
    }

    .category-content {
      flex: 1;
      height: fit-content;
      padding: 0 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;

      .category-title {
        font-size: 28rpx;
        height: 112rpx;
        line-height: 112rpx;
        color: #333333;
      }

      .product-list {
        flex: 1;
        display: flex;
        flex-direction: column;
        row-gap: 24rpx;
        overflow-y: auto;
        max-height: calc(100vh - 332rpx);
        background-color: #ffffff;
        padding-bottom: 20rpx;
        .product-item {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #333333;
          background-color: #f8fafb;
          border-radius: 6rpx;
          column-gap: 4rpx;

          .product-image {
            width: 162rpx;
            height: 162rpx;
          }

          .product-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            row-gap: 26rpx;
            .product-name {
              color: #666666;
              font-size: 28rpx;
            }
            .product-price {
              color: #333333;
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }
}
</style>
