<template>
  <div
    :style="{
      'background-color': '#f6f6f6',
      height: contentHeight + 'px',
      overflow: 'hidden',
    }"
  >
    <view class="brandHeadBgBox"
    :style="{'background': TenantId!=18?`linear-gradient(-3deg, #eff8ff, #c6e6ff)`:''}">
      <headers :title="replace.state=='1'?'品牌列表':'企业列表'"></headers>
      <view v-if="TenantId==18" 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 v-else class="brandSearch" style="padding: 5px 10px;margin-top: 6rpx;">
        <view class="brandSearch-right">
          <input v-model="msg.BrandName" 
          :placeholder="`搜索${replace.state=='1'?'品牌':'企业'}名称`" 
          @input="ResetQuery"></input>
        </view>
      </view>
      <template v-if="TenantId==18">
        <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="brandScreen" >
        <view
          class="statusBox"
          v-if="msg.IsInChengdu == 0"
          @click="changeFirstStoreTest(-1)"
        >
          未在成都落地
        </view>
        <view
          class="statusBox2"
          v-if="msg.IsInChengdu == -1"
          @click="changeFirstStoreTest(0)"
        >
          未在成都落地
        </view>
      </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>
      </template>
      <view v-else style="display: flex; align-items: center;padding: 28rpx 0;">
        <view style="flex: 1; overflow: hidden;padding-left: 32rpx;"
        class="brandTabBox">
          <u-tabs
              bg-color="none"
              :is-scroll="true"
              name="ClassName"
              :list="typeList"
              :active-color="mainColor"
              inactive-color="#000000"
              :active-item-style="activeItemStyleBrand"
              :current="active"
              @change="changeHandler"
              :show-bar="false"
              :activeFontSize="23"
              :bold="true"
              height="45"
              duration="0"
              font-size="23"
              gutter="29"
            ></u-tabs>
        </view>
      </view>

    </view>
    
    <u-empty v-if="g.length == 0" text="暂无内容" mode="list"></u-empty>
    <view
      style="height: calc(100% - 192px); 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;padding-top: 20rpx;"
      >
        <u-row v-if="TenantId==18" 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: '20rpx' }"
            >
              <view class="img-box">
                <view class="img-show">
                  <image
                    style="
                      width: 100%;
                      height: 100%;
                      border-radius: 20rpx 20rpx 0 0;
                    "
                    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>
        <template v-else>
          <brandComponent v-if="g&&g.length>0" :g="g"></brandComponent>
        </template>
        <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>
	<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth" ></auth>
    <tabbars></tabbars>
  </div>
</template>

<script>
import auth from "@/components/auth/index.vue";
import tabbars from "@/components/tabbar/index";
import headers from "@/components/header/header";
import brandComponent from "./brandComponent";
export default {
  components: {
    tabbars,
	  auth,
    headers,
    brandComponent
  },
  data() {
    return {
		showAuth:false,
		u:{},
      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, //
		    IsInChengdu:-1,//是否已在成都落地
        BrandEnterpriseType:null,
      },
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      page_count: 1,
      status: "loadmore",
      g: [],
      contentHeight: 0,
      PrizeList: [], //首店年份列表
      activeItemStyleBrand:{
        "font-size": "23rpx",
        "font-family": "PingFang SC",
        "font-weight": "Bold",
        color: "#017EDF",
        "border": "1rpx solid #017EDF",
        "border-radius": "10rpx",
        "height": "50rpx",
        "line-height": "45rpx",
        "padding": "0 22rpx",
        "background": "#FFF"
      },
      TenantId: 18,
      replace: null,
      secondary: null,
    };
  },
  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) {
    let uid = uni.getStorageSync("mall_UserInfo")
    this.TenantId = uid.TenantId
    this.replace = uni.getStorageSync('replace_page_index')
    this.msg.BrandEnterpriseType = this.replace.state=='1'?1:2
    
    if (options && options.id) {
      this.msg.BrandClassId = options.id;
    }
	// this.u = uni.getStorageSync("mall_UserInfo");
	// if (!this.u) {
	//   this.u = {
	//     nickName: "未登录",
	//     avatarUrl: "",
	//   };
	//     this.showAuth = true;
	// } else {
		this.GetBrandClassList();
		this.getPrizeList();
	// }
	
    
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "品牌列表",
    });
    let c = this.$uiConfig.is_bang ? 78 : 50;
    this.contentHeight = this.$utils.calcContentHeight(c) + 40;
  },
  methods: {
	  reloadUserinfo() {
		this.u = uni.getStorageSync("mall_UserInfo");
		this.msg.BrandName=''
		this.GetBrandClassList();
		this.getPrizeList();
	  },
	  //关闭登录窗口
	  gbAuth() {
		this.showAuth  = false
	  },
    GetBrandClassList() {
      let BrandCategory = ''
      if(this.TenantId!=18) BrandCategory = this.replace.state=='1' ? 3 : 4
      this.request2(
        {
          url: "/api/AppletTrade/GetBrandClassList",
          data: {
            BrandCategory
          },
        },
        (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();
    },
    ResetQuery(){
      this.g = []
      this.msg.pageIndex=1
      this.init()
    },
    init() {
      let url = "/api/AppletTrade/GetBrandPageList"
      if(this.TenantId!=18&&this.replace.state){
        if(this.replace.state=='1') url = "/api/AppletTrade/GetBrandEnterprisePageList"
        else url = "/api/AppletTrade/GetEnterpriseServicesPageList"
      }
      this.request2(
        {
          url: url,
          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.u = uni.getStorageSync("mall_UserInfo");
		// if (!this.u) {
		//   this.u = {
		//     nickName: "未登录",
		//     avatarUrl: "",
		//   };
		//     this.showAuth = true;
		// } else {
			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();
    },
	changeFirstStoreTest(i) {
	  this.msg.IsInChengdu = i;
	  this.msg.pageIndex = 1;
	   this.g = [];
	  this.init();
	},
  },
};
</script>

<style>
  .brandSearch-right>input::placeholder{
    color: #95AAB9;
  }
  .brandSearch-right{
    font-size: 27rpx;
    font-weight: 100;
  }
  .brandSearch{
      height: 76rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      z-index: 101;
      margin: 0 32rpx;
      background: #EEF7FF;
      border-radius: 18rpx;
      position: relative;
    }
.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;
}
.brandScreen {
  height: 50rpx;
  margin: 20rpx 0;
  display: flex;
  padding: 0 30rpx;
}
.statusBox {
  /* width: 150rpx; */
  height: 46rpx;
  background: #1f1f1f;
  border-radius: 23rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin-right: 30rpx;
  padding: 0 18rpx;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
}

.statusBox2 {
  /* width: 150rpx; */
  height: 46rpx;
  background: #eaeaea;
  border-radius: 23rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999999;
  padding: 0 18rpx;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
}
</style>
