<template>
  <!-- 品牌商首页 -->
  <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.originalImageCode}`"
              mode=""
            ></image>
            <!-- 
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></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
              v-if="hotStylePage.records.length > 0"
              :recordsList="hotStylePage.records"
            ></hot-style>
            <!-- <hot-style></hot-style>
            <hot-style></hot-style>
            <hot-style></hot-style> -->
          </view>
        </view>
      </u-card>
    </view>
    <!-- 底部占位符 -->
    <view class="mask-template"></view>
  </view>
</template>

<script>
import headTitle from "./components/header"; //每日更新头部的东西
import hotStyle from "./components/hotStyle"; //热门款式
export default {
  components: {
    headTitle,
    hotStyle,
  },
  data() {
    return {
      fabricObj: "",
      dailyNewStyleList: [],
      hotStylePage: [],
      imgUrl: this.$IMG_URL, // 上传地址
      background: {
        backgroundColor: "rgba(245,245,245,0)",
      },
    };
  },
  created() {
    console.log("ces");
    this.getList();
  },
  methods: {
    // 搜索按钮
    searchCli() {
      this.$router.push("/pages/home/search");
    },
    headTab() {
      this.$router.push("pages/brands/everyDay");
      // this.$router.push("pages/brands/detail");
    },
    getList() {
      let param = {
        current: 1,
        size: 10,
        styleTag: "",
      };
      this.$http("mobileBrand.stylePage", param).then((res) => {
        let { code, data } = res;
        if (code === 200) {
          this.dailyNewStyleList = data.dailyNewStyleList;
          this.hotStylePage = data.hotStylePage;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 底部占位符
.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;
    display: flex;

    image {
      width: 240rpx;
      height: 160rpx;
      border-radius: 5px;
      padding-left: 20.3rpx;
    }
  }
}

//热门款式
.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>
