<script setup lang="ts">
import SearchInput from '@/components/searchInput.vue'
import { useSearchStore } from '@/store/search'
// 在unibest框架中，使用definePage宏配置页面属性
definePage({
  // 页面样式配置
  style: {
    // 导航栏标题文本 - 这就是设置头部导航栏标题的属性
    // navigationBarTitleText: '%more.category%',
    // 导航栏样式：default(默认)或custom(自定义)
    'navigationStyle': 'custom',
    'backgroundColor': '#f8fafb',
    // 可以添加其他配置如背景色、文字颜色等
    'navigationBarBackgroundColor': '#ffffff', // 导航栏背景色
    // navigationBarTextStyle: 'black', // 导航栏标题颜色，仅支持black/white
    'app-plus': {
      bounce: 'none',
    },
  },
})
const searchStore = useSearchStore()
const currentSort = ref('综合')
const sortType = ref([
  {
    name: '综合',
    value: '综合',
  },
  {
    name: '销量',
    value: '销量',
  },
  {
    name: '新品',
    value: '新品',
  },
  {
    name: '价格',
    value: '价格',
  },
])

const productList = ref([
  {
    name: 'Volador lI VD5 O4 Deadcat FPV T7O0 机架套件-颜色：黄色',
    price: 100,
    originalPrice: 150,
  },
  {
    name: 'Volador lI VD5 O4 Deadcat FPV T7O0 机架套件-颜色：黄色',
    price: 200,
    originalPrice: 250,
  },
  {
    name: 'Volador lI VD5 O4 Deadcat FPV T7O0 机架套件-颜色：黄色',
    price: 200,
    originalPrice: 250,
  },
  {
    name: 'Volador lI VD5 O4 Deadcat FPV T7O0 机架套件-颜色：黄色',
    price: 200,
    originalPrice: 250,
  },
  {
    name: 'Volador lI VD5 O4 Deadcat FPV T7O0 机架套件-颜色：黄色',
    price: 200,
    originalPrice: 250,
  },
  {
    name: 'Volador lI VD5 O4 Deadcat FPV T7O0 机架套件-颜色：黄色',
    price: 200,
    originalPrice: 250,
  },
  {
    name: 'Volador lI VD5 O4 Deadcat FPV T7O0 机架套件-颜色：黄色',
    price: 200,
    originalPrice: 250,
  },
])

function onClickSearchInput() {

}

function clickSort(sort: string) {
  currentSort.value = sort
}

onMounted(() => {
  console.log(searchStore.isSearching)
  console.log(searchStore.searchText)
})
</script>

<template>
  <view class="search-result-page">
    <SearchInput :auto-focus="false" :has-feature="true" @on-click-search-input="onClickSearchInput" />

    <view class="search-sort-type">
      <view v-for="item in sortType" :key="item.value" class="sort-item" :class="{ active: item.value === currentSort }" @click="clickSort(item.value)">
        {{ item.name }}
        <view v-if="item.name === '价格'" class="sort-arrow" />
      </view>
    </view>
    <view class="product-list">
      <view v-for="item in productList" :key="item.name" class="product-item">
        <image
          src="/static/images/fifty5@m.webp"
          mode="scaleToFill"
        />
        <view class="product-info">
          <view class="product-name">
            {{ item.name }}
          </view>
          <view class="product-price">
            <view class="price">
              <view class="unit">
                ￥
              </view>{{ item.price }}
            </view>
            <view class="original-price">
              {{ item.originalPrice }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.search-result-page {
  height: 100vh;
  background-color: #f8fafb;
  padding-top: 120rpx;
  box-sizing: border-box;
  .search-sort-type {
    display: flex;
    align-items: center;
    .sort-item {
      font-size: 24rpx;
      line-height: 1.2;
      color: #666666;
      padding: 12rpx 24rpx;
      border-radius: 32rpx;
      margin-right: 24rpx;

      &.active {
        color: #0070d5;
      }
    }

    .sort-arrow {
      display: flex;
      flex-direction: column;

      &::before {
        display: inline-block;
        width: 12rpx;
        height: 12rpx;
        border-top: 32rpx solid transparent;
        border-left: 32rpx solid transparent;
        border-right: 32rpx solid transparent;
        border-bottom: 32rpx solid #999999;
        transform: rotate(-45deg);
      }

      &::after {
        display: inline-block;
        width: 12rpx;
        height: 12rpx;
      }
    }
  }

  .product-list {
    padding: 16rpx 28rpx;
    display: flex;
    flex-direction: column;
    row-gap: 16rpx;
    .product-item {
      overflow: hidden;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 28rpx;
      display: flex;
      align-items: center;
      image {
        flex-shrink: 0;
        width: 160rpx;
        height: 160rpx;
        margin-right: 16rpx;
      }
      .product-info {
        display: flex;
        flex-direction: column;
        row-gap: 24rpx;
        .product-name {
          font-size: 28rpx;
          line-height: 1.4;
          color: #24272c;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .product-price {
          display: flex;
          align-items: center;
          .price {
            font-size: 32rpx;
            line-height: 1.2;
            color: #ea4141;
            .unit {
              display: inline-block;
              font-size: 24rpx;
              line-height: 1.2;
              color: #ea4141;
            }
          }
          .original-price {
            font-size: 24rpx;
            line-height: 1.2;
            text-decoration: line-through;
            color: #cccccc;
            margin-left: 8rpx;
          }
        }
      }
    }
  }
}
</style>
