<template>
  <div
    style="background-color: #f6f6f6; overflow: hidden"
    :style="{ height: contentHeight + 'px' }"
  >
    <view style="padding: 5px 10px">
      <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 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">
      <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>
    <u-empty
      v-if="dataList.length == 0"
      text="暂无数据"
      mode="list"
      class="noBox"
    ></u-empty>
    <view style="height: calc(100% - 101px)" v-if="dataList.length > 0">
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        style="height: 100%; padding-bottom: 0px"
      >
        <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>
        <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>
    <tabbars></tabbars>
  </div>
</template>

<script>
import tabbars from "@/components/tabbar/index";
export default {
  components: {
    tabbars,
  },
  data() {
    return {
      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,
      },
      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",
      },
      list: [],
      kystatus: [
        {
          id: -1,
          name: "全部",
        },
        {
          id: 0,
          name: "即将开业",
        },
        {
          id: 1,
          name: "已开业",
        },
      ],
      curStatusName: "全部",
    };
  },
  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) {
    if (options && options.id) {
      this.msg.ProjectType = options.id;
    }
    let c = this.$uiConfig.is_bang ? 78 : 50;
    this.contentHeight = this.$utils.calcContentHeight(c) + 40;
    if (options && options.FirstStoreTest) {
      this.msg.FirstStoreTest = options.FirstStoreTest;
    }
    this.getTypeList();
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "载体列表",
    });
  },
  methods: {
    // 获取载体列表
    getTypeList() {
      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;
              }
            });
          }
        }
      });
      this.getCarrierPageList();
    },
    // 获取载体分页列表
    getCarrierPageList() {
      let parms = {
        url: "/api/AppletTrade/GetCarrierPageList",
        data: this.msg,
      };
      this.request2(parms, (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;
      this.msg.ProjectType = this.typeList[i].Id;
      this.msg.pageIndex = 1;
      this.dataList = [];
      this.getCarrierPageList();
    },
    openGood(id, type) {
      uni.navigateTo({
        url: "/pages/kotra/carrier/detail?id=" + id + "&&type=" + type,
      });
    },
    searchHandler(val) {
      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>
.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: 130rpx;
  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: 60rpx;
  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>
