<template>
  <div
    style="background-color: #f6f6f6; overflow: hidden"
    :style="{ height: contentHeight + 'px' }"
  > 
    <view class="carrierHeadBgBox"
    :style="{'background': TenantId!=18?`linear-gradient(-3deg, #eff8ff, #c6e6ff)`:''}">
      <headers :title="replace.state=='1'?'载体列表':'楼宇列表'"></headers>
      <template v-if="isauth">
        <view v-if="TenantId==18" style="padding: 5px 10px">
			{{TenantId}}
          <u-search
              placeholder="搜索载体名称"
              :focus="false"
              :show-action="false"
              :clearabled="true"
              radius="40"
              v-model="searchKey"
              @search="searchHandler"
              @custom="searchHandler"
              bg-color="#FFF"
            ></u-search>
        </view>
        <view v-else class="carrierSearch" style="padding: 5px 10px;margin-top: 6rpx;">
            <template v-if="iscpswjselectall==1&&replace.state=='1'">
              <view class="carrierSearch-left">
                <uni-section title="" type="line">
                  <uni-data-select
                    v-model="msg.MallBaseId"
                    :localdata="ShopTypeList"
                    :clear="false"
                    @change="ResetQuery"
                  ></uni-data-select>
                </uni-section>
              </view>
              <view class="carrierSearch-auto"></view>
            </template>
            <view class="carrierSearch-right">
              <input v-if="replace.state=='1'" v-model="msg.CarrierName" 
              :placeholder="`搜索载体名称`" 
              @input="ResetQuery"></input>
              <input v-else v-model="msg.MetroName" 
              :placeholder="`搜索楼宇名称`" 
              @input="ResetQuery"></input>
            </view>
        </view>
      </template>
      <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="Name"
              :list="typeList"
              :active-color="mainColor"
              :active-item-style="activeItemStyle"
              :current="active"
              @change="changeHandler"
              :show-bar="true"
              :activeFontSize="34"
              :bold="true"
              height="100"
              duration="0"
              :font-size="28"
            ></u-tabs>
          </view>
          <!-- <div style="width: 60rpx" @click="showPopup = true">
            <u-icon name="wap-nav" color="#111" size="42"></u-icon>
          </div> -->
        </view>
        <view class="carrierScreen" v-if="isauth">
          <view class="statusBox">
            <picker @change="statusChange" :range="kystatus" range-key="name">
              <view class="curStatusName"
                >{{ curStatusName
                }}<u-icon
                  name="arrow-down"
                  color="#ffffff"
                  size="22"
                  style="margin-left: 10rpx"
                ></u-icon
              ></view>
            </picker>
          </view>
          <view
            class="statusBox"
            v-if="msg.FirstStoreTest === 1"
            @click="changeFirstStoreTest(0)"
          >
            首店经济试验场
          </view>
          <view
            class="statusBox2"
            v-if="msg.FirstStoreTest === 0"
            @click="changeFirstStoreTest(1)"
          >
            首店经济试验场
          </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="carrierTabBox">
          <u-tabs
              bg-color="none"
              :is-scroll="true"
              name="ClassName"
              :list="typeList"
              :active-color="mainColor"
              inactive-color="#000000"
              :active-item-style="activeItemStyleCarr"
              :current="active"
              @change="changeHandler"
              :show-bar="false"
              :activeFontSize="28"
              :bold="true"
              height="45"
              duration="0"
              :font-size="26"
              gutter="29"
            ></u-tabs>
        </view>
      </view>
    </view>
    
    <u-empty
      v-if="dataList&&dataList.length == 0"
      text="暂无数据"
      mode="list"
      class="noBox"
    ></u-empty>
    <view 
    :style="{ height: TenantId==18?'calc(100% - 101px)':'calc(100% - 191px)'}"
    v-if="dataList&&dataList.length > 0">
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        style="height: 100%; padding-bottom: 0px"
      > 
        <template v-if="TenantId==18">
          <view v-for="(item, index) in dataList" :key="index">
            <div
              class="good_study_one"
              @click="openGood(item.ID, typeList[item.ProjectType].Name)"
              :style="{
                borderRadius: '15px',
              }"
            >
              <view class="carriertag" v-if="item.FirstStoreTest === 1">
                <view class="carriertagsub1">首店</view>
                <view class="carriertagsub2">经济试验场</view>
              </view>
              <view class="img-box">
                <view class="img-show">
                  <image
                    style="
                      width: 100%;
                      height: 100%;
                      border-radius: 10rpx 10rpx 0 0;
                    "
                    mode="aspectFill"
                    :src="item.BannerList[0]"
                  />
                </view>
              </view>
              <div class="good-info">
                <div class="good-name">
                  <div class="span-name" style="display: flex">
                    <div class="span-name-sub">{{ item.CarrierName }}</div>
                    <view v-if="item.ListEnroll.length > 0">
                      <image
                        style="height: 100%; border-radius: 10rpx 10rpx 0 0"
                        mode="heightFix"
                        :src="item.ListEnroll[0].MedalImage"
                      />
                    </view>
                  </div>
                  <div class="span-type">
                    {{ item.ProjectTypeName }}
                    <text
                      v-if="item.OpeningStatus == 0"
                      style="
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #f70027;
                        margin-left: 10rpx;
                      "
                      >即将开业</text
                    >
                    <text
                      v-if="item.OpeningStatus == 1"
                      style="
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #111111;
                        margin-left: 10rpx;
                      "
                      >已开业</text
                    >
                  </div>
                </div>
                <div class="good-price-info">
                  <u-icon name="location" color="#999" size="24"></u-icon>
                  <span class="price" style="margin-left: 5px">{{
                    item.Address
                  }}</span>
                </div>
              </div>
            </div>
          </view>
        </template>
        <template v-else>
          <carrierElement v-if="dataList&&dataList.length>0" :dataList="dataList"></carrierElement>
        </template>
        
        <u-loadmore
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="20"
          :margin-bottom="20"
          bg-color="#F6F6F6"
        />
      </scroll-view>
    </view>
    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <u-loading mode="flower" size="48"></u-loading>
      <Text style="color: #f6f6f6; margin-top: 10rpx">加载中...</Text>
    </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 carrierElement from "./carrierElement";
export default {
  components: {
    tabbars,
    auth,
    headers,
    carrierElement
  },
  data() {
    return {
		showAuth:false,
		u:{},
		isauth:false,
      mainColor: "",
      active: 0,
      searchKey: "",
      typeList: [],
      dataList: [],
      msg: {
        pageIndex: 1,
        pageSize: 10,
        MetroName: "",
        CarrierName: "",
        MetroNum: "",
        Developers: "",
        StartOpenTime: "",
        EndOpenTime: "",
        ProjectType: 0,
        OrderBy: 0,
        OpeningStatus: -1,
        FirstStoreTest: 0,

        CategoryId: 0,
        BuildingCarrierType: null,
        IsChengDu: -1,//首店类型 1成都 0宜宾

        OrderBy: "",
        MallBaseId: 0,
        TenantId: 0,
      },
      loading: false,
      pageCount: 0,
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      contentHeight: 0,
      activeItemStyle: {
        "font-size": "34rpx",
        "font-family": "PingFang SC",
        "font-weight": 800,
        color: "#111111",
      },
      activeItemStyleCarr:{
        "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"
      },
      list: [],
      kystatus: [
        {
          id: -1,
          name: "全部",
        },
        {
          id: 0,
          name: "即将开业",
        },
        {
          id: 1,
          name: "已开业",
        },
      ],
      curStatusName: "全部",
      TenantId: null,
      replace: null,
      secondary: null,
      ShopTypeList: [
          // {
          //     text: '全部',
          //     value: -1
          //   },  
          // {
          //   text: '成都',
          //   value: 1
          // },
          // {
          //   text: '宜宾',
          //   value: 2
          // },
      ],
      GetYBConfig: null,
      iscpswjselectall: 0,
    };
  },
  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/carrier/list?user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        Up,
      imageUrl: "",
    };
  },
  onLoad(options) {
    this.iscpswjselectall = uni.getStorageSync("basedata").iscpswjselectall
    let uid = uni.getStorageSync("mall_UserInfo")
    this.TenantId = uid.TenantId
    // this.msg.TenantId = uid.TenantId
    this.replace = uni.getStorageSync('replace_page_index')
    this.msg.BuildingCarrierType = this.replace.state=='1'?1:2

    if (options && options.id) {
      this.msg.ProjectType = options.id;
      this.msg.CategoryId = options.id
    }
    let c = this.$uiConfig.is_bang ? 78 : 50;
    this.contentHeight = this.$utils.calcContentHeight(c) + 40;
    if (options && options.FirstStoreTest) {
      this.msg.FirstStoreTest = parseInt(options.FirstStoreTest);
    }
	// this.u = uni.getStorageSync("mall_UserInfo");
	// if (!this.u) {
	//   this.u = {
	//     nickName: "未登录",
	//     avatarUrl: "",
	//   };
	//     this.showAuth = true;
	// } else {
		this.getTypeList();
		this.isauth = true
	// }
    
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "载体列表",
    });
  },
  methods: {
	  reloadUserinfo() {
	  		this.u = uni.getStorageSync("mall_UserInfo");
	  		this.isauth = true;//成都登录 就显示
	  		this.getTypeList();
	  },
	  //关闭登录窗口
	  gbAuth() {
	  		this.showAuth  = false
	  },
    // 获取类型
    getTypeList() {
      if(this.TenantId==18){
        let parms = {
          url: "/api/AppletTrade/GetProjectTypeEnumList",
        };
        this.request2(parms, (res) => {
          if (res.resultCode == 1) {
            // this.pageCount = res.data.pageCount
            this.typeList.push({
              Id: 0,
              Name: "全部",
            });
            this.typeList = this.typeList.concat(res.data);
            if (this.msg.ProjectType == 0) {
            } else {
              //指定跳入分类
              this.typeList.map((x, i) => {
                if (x.Id == this.msg.ProjectType) {
                  this.active = i;
                }
              });
            }
          }
        });
      }else{
        this.request2({
          url:"/api/AppletTrade/GetBrandClassList",
          data: {
            BrandCategory: this.replace.state=='1' ? 1 : 2
          }
        }, (res) => {
         
          if (res.resultCode == 1) {
            this.typeList = res.data;
            this.typeList.unshift({
              ID: 0,
              ClassName: "全部",
            });
            if (this.msg.CategoryId) {
              //指定跳入分类
              this.typeList.map((x, i) => {
                if (x.ID == this.msg.CategoryId) {
                  this.active = i;
                }
              });
            }
          }
        });
        this.request2({
						url: "/api/AppletTrade/GetYBConfig",
						data: {},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.GetYBConfig =  res.data
              res.data.mallBaselList.forEach(x=>{
                let obj = {
                  text: x.Name,
                  value: x.MallBaseId
                }
                this.ShopTypeList.push(obj)
              })
						}
					}
				);
      }
      
      this.getCarrierPageList();
    },
    ResetQuery(){
      this.dataList = []
      this.msg.pageIndex=1
      this.getCarrierPageList()
    },
    // 获取载体分页列表
    getCarrierPageList() {
      let url = "/api/AppletTrade/GetCarrierPageList"
      if(this.TenantId!=18&&this.replace.state){
        if(this.replace.state=='1') url = "/api/AppletTrade/GetAllCarrierPageList"
        else url = "/api/AppletTrade/GetBuildingPageList"
      }
      this.request2({
        url: url,
        data: {
          ...this.msg
        }
      }, (res) => {
        this.loading = false;
        if (res.resultCode == 1) {
          this.dataList = this.dataList.concat(res.data.pageData);
          this.pageCount = res.data.pageCount;
          if (this.pageCount == 1) {
            this.status = "nomore";
          }
        }
      });
    },
    changeHandler(i) {
      this.active = i;
      if(this.TenantId==18) this.msg.ProjectType = this.typeList[i].Id;
      else this.msg.CategoryId = this.typeList[i].ID;
      this.ResetQuery()
    },
    openGood(id, type) {
      uni.navigateTo({
        url: "/pages/kotra/carrier/detail?id=" + id + "&&type=" + type,
      });
    },
    searchHandler(val) {
		
	  this.u = uni.getStorageSync("mall_UserInfo");
	  if (!this.u) {
	    this.u = {
	      nickName: "未登录",
	      avatarUrl: "",
	    };
	      this.showAuth = true;
	  } else {
	  	this.msg.CarrierName = val;
	  	this.msg.pageIndex = 1;
	  	this.dataList = [];
	  	this.getCarrierPageList();
	  }
      
    },
    //触底事件
    lower(e) {
      if (this.msg.pageIndex < this.pageCount) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.getCarrierPageList();
      } else {
        this.status = "nomore";
      }
    },
    statusChange(e) {
      let index = parseInt(e.detail.value);
      this.msg.OpeningStatus = this.kystatus[index].id;
      this.curStatusName = this.kystatus[index].name;
      this.msg.pageIndex = 1;
      this.dataList = [];
      this.getCarrierPageList();
    },
    changeFirstStoreTest(i) {
      this.msg.FirstStoreTest = i;
      this.msg.pageIndex = 1;
      this.dataList = [];
      this.getCarrierPageList();
    },
  },
};
</script>

<style>
  .carrierTabBox .u-tab-item{
    background: #FFFFFF;
    margin-right: 29rpx;
    border-radius: 10rpx;
    line-height: 39rpx;
    padding: 13rpx 22rpx;
    border: 1rpx solid #FFFFFF;
  }
  .carrierSearch-right>input::placeholder{
    color: #95AAB9;
  }
  .carrierSearch-right{
    font-size: 27rpx;
    font-weight: 100;
  }
  .carrierSearch-auto{
    width: 2rpx;
    height: 40rpx;
    background: #E1EDF7;
    border-radius: 1rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
  }
  .carrierSearch-ex{
    width: 152rpx;
    /* position: absolute;
    width: 202rpx;
    left: 0;
    top: 0;
    z-index: 1; */
  }
  .carrierSearch-left .uni-select__selector{
    /* width: 202rpx !important; */
  }
  .carrierSearch-left .uni-icons{
    color: #017EDF !important;
    margin-left: 24rpx !important;
  }
  .carrierSearch-left .uni-select__input-text{
    font-size: 27rpx;
    font-weight: bold;
  }
  .carrierSearch-left .uni-select {
    border: 0;
    padding: 0;
    padding-left: 0;
  }
    .carrierSearch-left{
      display: flex;
      flex-direction: row;
      align-items: center;
      font-family: PingFang SC;
    }
    .carrierSearch{
      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_one {
  margin: 12px;
  position: relative;
  border: 1rpx solid transparent;
  border-radius: 10rpx;
  overflow: hidden;
}

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

.good_study_one .guding {
  position: relative;
}

/* .good_study_one .guding .img-box {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	} */
.good_study_one .img-box {
  width: 100%;
  height: 0;
  padding-top: 49%;
  position: relative;
  overflow: hidden;
}

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

.good_study_one .good-info {
  padding: 12px;
  background-color: #fff;
}

.good_study_one .good-info .good-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5px;
}
.good_study_one .good-info .good-name .span-name {
  width: 350rpx;
  height: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #111;
}
.span-name-sub {
  max-width: 320rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.good_study_one .good-info .good-name .span-type {
  font-weight: 500;
  color: #999999;
  font-size: 24rpx;
  margin-left: 10px;
}
.good_study_one .good-info .good-price-info {
  display: flex;
}

.good_study_one .good-info .good-price-info .price {
  color: #999999;
  font-size: 24rpx;
  flex: 1;
}

.good_study_one .good-info .good-price-info .buy {
  width: 24px;
  text-align: right;
}
.carrierScreen {
  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;
}
.curStatusName {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  display: flex;
}
.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;
}
.carriertag {
  width: 170rpx;
  height: 40rpx;
  background: #fff;
  border-radius: 0px 0px 20rpx 0px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}
.carriertagsub1 {
  width: 48rpx;
  height: 22rpx;
  background: #1f1f1f;
  border-radius: 4rpx 0rpx 0rpx 4rpx;
  font-size: 18rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.carriertagsub2 {
  width: 100rpx;
  height: 22rpx;
  background: #d0aa7b;
  border-radius: 0px 4rpx 4rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
</style>
