<template>
  <div
    :style="{
      'background-color': '#f6f6f6',
      height: contentHeight + 'px',
      overflow: 'hidden',
    }"
  >
    <view style="padding: 5px 10px">
      <u-search
        placeholder="搜索品牌名称"
        :focus="false"
        :show-action="false"
        :clearabled="true"
        radius="40"
        v-model="msg.BrandName"
        @search="searchHandler"
        @custom="searchHandler"
        bg-color="#FFF"
      ></u-search>
    </view>
    <view style="display: flex; align-items: center">
      <view style="flex: 1; overflow: hidden">
        <u-tabs
          bg-color="#f6f6f6"
          :is-scroll="true"
          name="ClassName"
          :list="typeList"
          :active-color="mainColor"
          :current="active"
          @change="changeHandler"
          :show-bar="true"
          :activeFontSize="34"
          :bold="true"
          height="100"
          duration="0"
          font-size="28"
        ></u-tabs>
      </view>
      <!-- <div style="width: 64rpx;height: 48rpx;display: table-cell; vertical-align: middle;text-align: right;">
				<u-icon name="filter-o" color="#111" size="42"></u-icon>
			</div> -->
    </view>
    <view class="screenBox" v-if="PrizeList.length > 0">
      <view
        v-for="(item, index) in PrizeList"
        :key="index"
        class="screenBoxItem"
        @click="chooseYear(item)"
      >
        <view
          class="screenBoxItemYear"
          :class="{ activeYear: item.Id == msg.PrizeId }"
          >{{ item.YearInfo }}</view
        ><view
          class="screenBoxItemName"
          :class="{ activeName: item.Id == msg.PrizeId }"
          >{{ item.Name }}</view
        >
      </view>
    </view>
    <u-empty v-if="g.length == 0" text="暂无内容" mode="list"></u-empty>
    <view
      style="height: calc(100% - 101px); padding: 2px 10px"
      v-if="g.length > 0"
    >
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        style="height: 100%; padding-bottom: 0px"
      >
        <u-row gutter="24">
          <u-col span="6" v-for="(x, i) in g" :key="i">
            <view
              class="good_study_two"
              @click="openGood(x.ID)"
              :style="{ borderRadius: '10px' }"
            >
              <view class="img-box">
                <view
                  class="img-show"
                  :style="{ 'border-top-left-radius': '10px' }"
                >
                  <image
                    style="width: 100%; height: 100%"
                    mode="aspectFill"
                    :src="x.BannerList[0]"
                  />
                </view>
                <view class="img-show-prize" v-if="x.ListEnroll[0]">
                  <image
                    style="width: 100%; height: 100%"
                    mode="heightFix"
                    :src="x.ListEnroll[0].MedalImage"
                  />
                </view>
              </view>
              <view class="good-info">
                <view class="good-name">{{ x.BrandName }}</view>
                <view class="good-price-info">
                  <span class="price">{{ x.FullBrandName }}</span>
                </view>
              </view>
            </view>
          </u-col>
        </u-row>
        <u-loadmore
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="20"
          :margin-bottom="20"
          bg-color="#f6f6f6"
        />
        <!-- <view style="width: 100%;height: 30px;"></view> -->
      </scroll-view>
    </view>
    <tabbars></tabbars>
  </div>
</template>

<script>
import tabbars from "@/components/tabbar/index";
export default {
  components: {
    tabbars,
  },
  data() {
    return {
      mainColor: "",
      active: 0,
      searchKey: "",
      typeList: [],
      msg: {
        pageIndex: 1,
        pageSize: 20,
        BrandName: "",
        ProjectType: 0,
        Plumbing: -1,
        Caliber: -1,
        Sewage: -1,
        RanQi: -1,
        DianLiang: "",
        PaiYan: -1,
        KongTiao: -1,
        XinFeng: -1,
        BrandClassId: 0,
        PrizeId: 0, //
      },
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      page_count: 1,
      status: "loadmore",
      g: [],
      contentHeight: 0,
      PrizeList: [], //首店年份列表
    };
  },
  onShareTimeline() {
    //朋友圈
    let uid = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserId
      : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").SmallShopId
      : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
        : 0;
    }
    let Up = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserPageType
      : 0;
    return {
      title: "品牌列表",
      query: "user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up,
      imageUrl: "",
    };
  },
  onShareAppMessage(res) {
    //朋友
    let uid = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserId
      : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").SmallShopId
      : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
        : 0;
    }
    let Up = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserPageType
      : 0;
    return {
      title: "品牌列表",
      path:
        "/pages/kotra/brand/list?user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        Up,
      imageUrl: "",
    };
  },
  onLoad(options) {
    if (options && options.id) {
      this.msg.BrandClassId = options.id;
    }
    this.GetBrandClassList();
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.getPrizeList();
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "品牌列表",
    });
    let c = this.$uiConfig.is_bang ? 78 : 50;
    this.contentHeight = this.$utils.calcContentHeight(c) + 40;
  },
  methods: {
    GetBrandClassList() {
      this.request2(
        {
          url: "/api/AppletTrade/GetBrandClassList",
          data: {},
        },
        (res) => {
          if (res.resultCode == 1) {
            let obj = {
              ID: 0,
              ClassName: "全部",
            };
            this.typeList = res.data;
            this.typeList.unshift(obj);
            if (this.msg.BrandClassId == 0) {
              this.msg.BrandClassId = this.typeList[0].ID;
            } else {
              //指定跳入分类
              this.typeList.map((x, i) => {
                if (x.ID == this.msg.BrandClassId) {
                  this.active = i;
                  return;
                }
              });
            }
          }
        }
      );
      this.init();
    },
    init() {
      this.request2(
        {
          url: "/api/AppletTrade/GetBrandPageList",
          data: this.msg,
        },
        (res) => {
          if (res.resultCode == 1) {
            this.g = this.g.concat(res.data.pageData);
            this.page_count = res.data.pageCount;
            if (this.page_count == 1) {
              this.status = "nomore";
            }
          }
        }
      );
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.init();
      } else {
        this.status = "nomore";
      }
    },
    changeHandler(i) {
      this.active = i;
      this.msg.BrandClassId = this.typeList[i].ID;
      this.msg.pageIndex = 1;
      this.g = [];
      this.init();
    },
    openGood(id) {
      uni.navigateTo({
        url: "/pages/kotra/brand/detail?id=" + id,
      });
    },
    searchHandler(val) {
      this.msg.BrandName = val;
      this.msg.pageIndex = 1;
      this.g = [];
      this.init();
    },
    getPrizeList() {
      this.request2(
        {
          url: "/api/AppletTrade/GetPrizePageList",
          data: this.msg,
        },
        (res) => {
          if (res.resultCode == 1) {
            this.PrizeList = res.data;
          }
        }
      );
    },
    chooseYear(item) {
      if (this.msg.PrizeId == item.Id) {
        this.msg.PrizeId = 0;
      } else {
        this.msg.PrizeId = item.Id;
      }
      this.g = [];
      this.msg.pageIndex = 1;
      this.init();
    },
  },
};
</script>

<style>
.good_study_two {
  position: relative;
  margin-bottom: 12px;
  border: 1rpx solid transparent;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 4px 10px 1px #e6e5e5;
  background-color: #fff;
}

.good_study_two .tips {
  width: 64rpx;
  height: 64rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}

.good_study_two .img-box {
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}

.good_study_two .img-box .img-show {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 338rpx;
  overflow: hidden;
}

.good_study_two .guding {
  position: relative;
}

.good_study_two .guding .img-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.good_study_two .good-info {
  padding: 15rpx;
  height: 112rpx;
}

.good_study_two .good-info .good-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 8px;
  color: #111111;
  font-size: 26rpx;
  font-weight: bold;
}

.good_study_two .good-info .good-price-info {
  display: flex;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 22rpx;
}

.good_study_two .good-info .good-price-info .price {
  color: #999999;
  /* flex: 1; */
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.good_study_two .good-info .good-price-info .buy {
  width: 24px;
  text-align: right;
}
.screenBox {
  display: flex;
  align-items: center;
  overflow-x: scroll;
  box-sizing: border-box;
  padding: 0 30rpx;
  margin-top: 35rpx;
  margin-bottom: 35rpx;
}
.screenBoxItem {
  /* width: 130rpx; */
  height: 46rpx;
  background-color: #e2e2e2;
  border-radius: 23rpx;
  margin-right: 30rpx;
  display: flex;
  color: #999999;
  overflow: hidden;
}
.screenBoxItemYear {
  /* width: 50%; */
  height: 46rpx;
  background: #e2e2e2;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 23px 0px 0px 23px;
  box-sizing: border-box;
  padding: 0 10rpx;
}
.activeYear {
  background: #1f1f1f;
  color: #ffffff;
}
.screenBoxItemName {
  /* width: 50%; */
  height: 46rpx;
  background: #eaeaea;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  box-sizing: border-box;
  padding: 0 10rpx;
  white-space: nowrap;
  border-radius: 0px 23px 23px 0px;
}
.activeName {
  background: #d0aa7b;
  color: #111111;
}
.img-show-prize {
  height: 36rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 20rpx 0rpx;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
