<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': '#ffffff',
    // 可以添加其他配置如背景色、文字颜色等
    'navigationBarBackgroundColor': '#ffffff', // 导航栏背景色
    // navigationBarTextStyle: 'black', // 导航栏标题颜色，仅支持black/white
    'app-plus': {
      bounce: 'none',
    },
  },
})

const searchStore = useSearchStore()
const recommendList = ref([
  'Volador II VD5',
  'Volador II VX5',
  'Atlas 4 的替换零件',
  'SMA 天线- RHCP',
  'FPV 电机',
  '替换转子',
])

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,
  },
  {
    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,
  },
])

const showRelative = computed(() => searchStore.isSearching && searchStore.searchText)

function onClickSearchInput() {
  //   uni.navigateTo({
  //     url: `/pages/search/searchResult?searchText=${searchStore.searchText}`,
  //   })
  searchStore.searched = true
}

function clickSort(sort: string) {
  currentSort.value = sort
}
</script>

<template>
  <view class="search-page">
    <SearchInput :auto-focus="true" :has-feature="true" @on-click-search-input="onClickSearchInput" />
    <view v-if="searchStore.searched" 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 v-if="showRelative" class="search-relative-result">
      <view class="search-relative-list">
        <view class="search-relative-item" @click="searchStore.searchProduct('搜索关联词')">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
      </view>
    </view>

    <view v-else-if="!searchStore.searched" class="search-recommend">
      <view class="search-recommend-title">
        <text>猜你想搜</text>
        <image src="/static/icons/refresh.svg" mode="scaleToFill" />
      </view>
      <view class="search-recommend-content">
        <view
          v-for="item in recommendList" :key="item" class="search-recommend-item"
          @click="searchStore.searchProduct(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <view v-else 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-page {
  height: 100vh;
  background-color: #fff;
  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;
      display: flex;
      align-items: center;
      column-gap: 6rpx;

      &.active {
        color: #0070d5;
      }

      .sort-arrow {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 6rpx;

        &::before {
          content: '';
          display: inline-block;
          border-top: 8rpx solid transparent;
          border-left: 8rpx solid transparent;
          border-right: 8rpx solid transparent;
          border-bottom: 8rpx solid #999999;
        }

        &::after {
          content: '';
          display: inline-block;
          border-top: 8rpx solid #999999;
          border-left: 8rpx solid transparent;
          border-right: 8rpx solid transparent;
          border-bottom: 8rpx solid transparent;
        }
      }
    }
  }

  .search-relative-result {
    background-color: #fff;
    width: 100%;
    height: calc(100vh - 120rpx - 122rpx);
    overflow: auto;

    .search-relative-list {
      .search-relative-item {
        border-bottom: 2rpx solid #e5e5e5;
        padding: 29rpx 0;
        margin-left: 32rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: rgba(0, 0, 0, 0.9);

        &::after {
          content: '';
          display: inline-block;
          width: 18rpx;
          height: 18rpx;
          border-top: 3rpx solid #999999;
          border-right: 3rpx solid #999999;
          position: relative;
          right: 62rpx;
          transform: rotate(45deg);
        }
      }
    }
  }

  .search-recommend {
    margin-top: 48rpx;
    padding: 0 28rpx;

    .search-recommend-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #24272c;
      font-weight: 500;
      margin-bottom: 32rpx;

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

    .search-recommend-content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      column-gap: 24rpx;
      row-gap: 24rpx;

      .search-recommend-item {
        white-space: nowrap;
        background-color: #f7f7f7;
        padding: 8rpx 32rpx;
        font-size: 28rpx;
        color: #999999;
        border-radius: 4rpx;
      }
    }
  }

  .product-list {
    padding: 16rpx 28rpx;
    display: flex;
    flex-direction: column;
    row-gap: 16rpx;
    height: calc(100vh - 120rpx - 142rpx);
    box-sizing: border-box;
    overflow: auto;
    background-color: #f8fafb;

    .product-item {
      overflow: hidden;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 28rpx;
      flex-shrink: 0;
      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>
