<template>
  <view>
    <navbar></navbar>

    <view class="wrap">
      <view class="swiper">
        <u-swiper
          :list="banners"
          :height="340"
          :border-radius="0"
          name="url"
          bg-color="#fff"
        ></u-swiper>
      </view>
      <view class="grid">
        <view
          class="grid-item"
          @tap="
            $u.route({
              url: '/package_sub/pages/Shop/Cart',
              type: 'reLaunch',
            })
          "
        >
          <view class="grid-item__icon">
            <image
              src="~@/package_sub/static/Shop/cart.png"
              mode="aspectFit"
            ></image>
          </view>
          <view class="grid-item__name">购物车</view>
        </view>
        <view
          class="grid-item"
          @tap="
            $u.route({
              url: '/package_sub/pages/Shop/ProductList',
              type: 'reLaunch',
            })
          "
        >
          <view class="grid-item__icon">
            <image
              src="~@/package_sub/static/Shop/fenlei.png"
              mode="aspectFit"
            ></image>
          </view>
          <view class="grid-item__name">更多分类</view>
        </view>
      </view>

      <view class="limit-sale">
        <view class="limit-sale__title">
          <text>特别推荐</text>
          <text>精选好货推荐给你</text>
        </view>

        <scroll-view scroll-x="true" style="margin-top: 30rpx;">
          <view class="limit-sale__wrap">
            <view
                class="product-item"
              v-for="item in recommendPro.slice(0, 6)"
              :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>
        </scroll-view>
      </view>

      <view class="recommend">
        <view class="recommend-title">
          <text>/</text>
          <text>精品特卖</text>
          <text>/</text>
        </view>
        <view class="recommend-wrap">
          <view
            class="product-item"
            v-for="item in recommendPro"
            :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>

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

<script>
import tabbar from "./Tabbar.vue";
import navbar from "./Navbar.vue";
export default {
  components: {
    tabbar,
    navbar,
  },
  data() {
    return {
      banners: [],
      recommendPro: [],
    };
  },
  methods: {
    toDetail(item) {
      this.$u.route({
        url: "/package_sub/pages/Shop/ProductDetail",
        params: {
          id: item.id,
        },
      });
    },
    async getBanner() {
      try {
        const res = await this.$u.api.banner({
          position: 3,
        });
        this.banners = res.map((i) => ({
          ...i,
          url: i.image?.url ?? "",
        }));
      } catch (err) {}
    },
    async getRecommendPro() {
      try {
        const res = await this.$u.api.productList({
          page: 1,
          page_size: 8,
          sort_name: "sort",
        });
        this.recommendPro = res.list?.data;
      } catch (err) {}
    },
  },
  created() {
    this.getBanner();
    this.getRecommendPro();
  },
};
</script>

<style>
page {
  background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
::v-deep .u-swiper-indicator {
  bottom: 38rpx !important;
}
.wrap {
  .grid {
    padding: 36rpx 0;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(4, 25%);

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

      &__icon {
        width: 78rpx;
        height: 78rpx;
        image {
          width: 78rpx;
          height: 78rpx;
        }
      }
      &__name {
        font-size: 24rpx;
        letter-spacing: 2rpx;
        color: #323333;
        padding-top: 16rpx;
      }
    }
  }
}

.limit-sale {
  margin-top: 32rpx;
  background: #fff;
  padding: 44rpx 30rpx;

  &__title {
    text:nth-child(1) {
      font-size: 36rpx;
      letter-spacing: 4rpx;
      color: #333333;
      font-weight: bold;
    }
    text:nth-child(2) {
      font-size: 28rpx;
      letter-spacing: 2rpx;
      color: #999;
      padding-left: 10rpx;
    }
  }
  &__wrap {
    display: flex;

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

      .bottom {
        padding-top: 16rpx;
      }
      &__img {
        width: 219rpx;
        height: 159rpx;
      }
      &__title {
        font-size: 22rpx;
        color: #333333;
        overflow: hidden;
        max-width: 200rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &__price {
        display: flex;
        align-items: center;
        justify-content: space-between;

        text {
          color: red;
        }
        text:nth-child(1) {
          font-size: 24rpx;
        }
        text:nth-child(2) {
          font-size: 26rpx;
        }
      }
    }
  }
}
.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>
