<template>
  <!-- 品牌商首页 -->
  <view>
    <view class="brandsindex">
      <!-- 展示图 -->
      <view id="header" class="back_img">
        <u-navbar title="" :border-bottom="false" :background="background">
          <template slot="right">
            <!-- 插槽搜索按钮 -->
            <view @click="searchCli" class="u-m-r-24 search">
              <image
                class="hs-img"
                src="../../static/images/home/search@2x.png"
                mode=""
              ></image>
            </view>
          </template>
        </u-navbar>
      </view>
      <!-- 每日上新 -->
      <view class="everyUpdate">
        <u-card full :head-border-bottom="false" @head-click="headTab">
          <view slot="head">
            <head-title title="每日上新" subtitle="DAILY NEW"></head-title>
          </view>
          <view slot="body">
            <view class="imgList">
              <image
                v-for="(item, index) in dailyNewStyleList"
                :key="index"
                :src="`${imgUrl}${item.effectPictureCode}`"
                mode="aspectFit"
              ></image>
            </view>
          </view>
        </u-card>
      </view>
      <!-- 热门款式 -->
      <view class="hotstyle">
        <u-card full :head-border-bottom="false">
          <view slot="head">
            <head-title title="热门款式" subtitle="HOT STYLES"></head-title>
          </view>
          <view slot="body">
            <view class="hotFlex">
              <hot-style
                :recordsList="hotStylePage"
                @update="update"
              ></hot-style>
            </view>
          </view>
        </u-card>
      </view>
      <view v-if="loadText" class="loadStyle">没有可用的数据了</view>
      <!-- 导航条 -->
      <hs-tab-bar></hs-tab-bar>
      <!-- 底部占位符 -->
      <view class="mask-template"></view>
    </view>
  </view>
</template>

<script>
import headTitle from "./components/header"; //每日更新头部的东西
import hotStyle from "./components/hotStyle"; //热门款式

export default {
  components: {
    headTitle,
    hotStyle,
    // HsTabBar,
  },
  data() {
    return {
      fabricObj: "",
      dailyNewStyleList: [], //每日上新的数据
      hotStylePage: [], //款式的数据
      imgUrl: this.$IMG_URL, // 图片前面的url
      background: {
        backgroundColor: "rgba(245,245,245,0)",
      },
      total: 0, //总页数
      current: 1,
      size: 10,
      loadText: false,
    };
  },
  created() {
    this.getList(1, 10);
  },
  methods: {
    // 搜索按钮
    searchCli() {
      this.$Router.push("/pages/brands/search");
    },
    // 每日更新跳转
    headTab() {
      this.$Router.push("/pages/brands/everyDay");
    },
    //更新
    update() {
      this.getList(1, 10);
    },
    // 款式列表分页查询接口
    getList(current, size) {
      let param = {
        current: current,
        size: size,
        styleTag: "",
      };
      this.$http("mobileBrand.stylePage", param).then((res) => {
        let { code, data } = res;
        if (code === 200) {
          if (current == 1) {
            this.hotStylePage = data.hotStylePage.records;
          } else {
            this.hotStylePage.push(...data.hotStylePage.records);
          }
          this.dailyNewStyleList = data.dailyNewStyleList;

          this.total = data.hotStylePage.total;
        }
      });
    },
  },
  //上拉加载
  onReachBottom() {
    console.log("触发了");
    //判断当前页是否到达总页数
    if (this.current >= this.total) {
      this.loadText = true;
    } else {
      this.current++;
      (this.size = 5), this.getList(this.current, this.size);
    }
  },
};
</script>

<style lang="scss" scoped>
// 上拉加载
.loadStyle {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
// 底部占位符
.mask-template {
  width: 100%;
  height: 100rpx;
}
//头部
.back_img {
  height: 486rpx;
  width: 100%;
  background: url(../../static/images/home/exhibition.png) no-repeat;
  background-size: 100% 100%;
}
.search {
  width: 60rpx;
  height: 60rpx;
}

//每日更新
.everyUpdate {
  width: 100%;

  ::v-deep .u-card__body {
    padding: 0rpx 0rpx 40rpx 36rpx !important;
  }

  ::v-deep .u-card__head {
    padding-bottom: 34rpx !important;
  }

  .imgList {
    overflow-x: auto;
    white-space: nowrap;
    image {
      border: 1px solid #c7c6c7;
      width: 240rpx;
      height: 160rpx;
      border-radius: 10rpx;
      margin-left: 20rpx;
    }
  }
}

//热门款式
.hotstyle {
  ::v-deep .u-card__body {
    padding-top: 24rpx !important;
  }

  ::v-deep .u-card__head {
    padding-bottom: 0rpx !important;
  }

  width: 100%;

  .hotFlex {
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
  }
}
</style>
