<template>
  <view>
    <navbar :use-search="false" title="搜索"></navbar>

    <view class="wrap">
      <view class="search">
        <u-search placeholder="请输入搜索内容"
                  :height="68"
                  v-model="keyword"
                  @custom="getProducts(true)"
                  @search="getProducts(true)"></u-search>
      </view>

      <view class="recommend">
        <view class="recommend-wrap">
          <view
              class="product-item"
              v-for="item in products"
              :key="item.id"
              @tap="
              $u.throttle(() => {
                toDetail(item);
              }, 500)
            "
          >
            <view class="top">
              <image
                  class="product-item__img"
                  :src="item.image ? item.image.url : ''"
                  mode="aspectFill"
              ></image>
            </view>
            <view class="bottom">
              <view class="product-item__title">
                {{ item.name }}
              </view>
              <view class="product-item__price">
                <view>
                  <text>¥</text>
                  <text>{{ item.price }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" :margin-bottom="20" @loadmore="getProducts" />

    <tabbar></tabbar>
  </view>
</template>

<script>
import tabbar from "@/package_sub/pages/Shop/Tabbar.vue";
import navbar from "@/package_sub/pages/Shop/Navbar.vue";

export default {
  components: {
    navbar,
    tabbar
  },
  data() {
    return {
      status: 'loadmore',
      keyword: '',
      select: {
        page: 1,
        page_size: 8,
        sort_name: "sort",
        'filter[0][key]': 'name',
        'filter[0][op]': 'like',
      },
      inputStyle: {
        width: "600rpx",
        fontSize: "28rpx",
        fontWeight: "500",
      },
      products: [],
      total: 0
    };
  },
  methods: {
    toDetail(item) {
      this.$u.route({
        url: "/package_sub/pages/Shop/ProductDetail",
        params: {
          id: item.id,
        },
      });
    },
    async getProducts(isRefresh = false) {
      if(isRefresh) {
        this.select.page = 1
        this.status = 'loadmore'
      }
      try {
        if(this.status === 'nomore') return
        if(this.products.length >= this.total && this.products.length !== 0 && !isRefresh) {
          this.status = 'nomore'
          return
        }
        this.status = 'loading';
        const res = await this.$u.api.productList({
          ...this.select,
          'filter[0][value]': this.keyword
        });
        this.products.push(...res.list?.data);
        this.total = res.list?.total;
        ++this.select.page;
        this.status = 'loadmore'
      } catch (err) {
        console.error(err)
        this.status = 'loadmore'
      }
    },
  },
  created() {
    this.getProducts(true)
  },
  onReachBottom() {
    this.getProducts()
  }
}
</script>

<style lang="scss">
.search {
  background: #fff;
  padding: 20rpx;
  filter: drop-shadow(0 2rpx 4rpx #00000012);
}

.recommend {
  margin-top: 38rpx;
  padding-bottom: 60rpx;

  &-title {
    display: flex;
    justify-content: center;
    color: red;
    font-size: 40rpx;
    letter-spacing: 5rpx;
    font-weight: bold;
    position: relative;
    & > text:nth-child(2) {
      padding: 0 20rpx;
    }
  }
  &-wrap {
    padding: 0 20rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20rpx 56rpx;
    margin-top: 36rpx;

    .product-item {
      background: #fff;
      padding: 12rpx;

      .bottom {
        padding-top: 16rpx;
      }
      &__img {
        width: 100%;
        height: 266rpx;
      }
      &__title {
        font-size: 25rpx;
        color: #333333;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      &__price {
        display: flex;
        align-items: center;
        justify-content: space-between;

        text {
          color: red;
        }
        text:nth-child(1) {
          font-size: 21rpx;
        }
        text:nth-child(2) {
          font-size: 32rpx;
        }
      }
    }
  }
}
</style>
