<template>
  <view class="main">
    <view class="headerTitle" :style="{ height: menu.bottom + 4 + 'px', paddingTop: menu.top + 'px' }">
      <image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"
        @click="handleBack" />
      <text class="pageTitle">{{ pageTitle || "" }}</text>
      <view class="backArrow"></view>
    </view>

    <scroll-view scroll-y class="content" @scrolltolower="handleScrollBottom"
      :style="{ height: `calc(100vh - ${menu.bottom + 4}px)` }">
      <view class="shopList" v-if="shopList && shopList.length > 0">
        <div class="buyShopItem" v-for="(subItem, subIndex) in shopList" :key="subIndex"
          @click.stop="handleGoShopDetail(subItem)">
          <div class="shopImgContent">
            <image class="shopImage" :src="subItem.IMAGE_PATH" />
          </div>
          <div class="priceBox">
            <div class="shopName">{{ subItem.COMMODITY_NAME }}</div>
            <!-- <view class="retailPrice"
              >¥{{ subItem.RETbigNumber || "" }}.{{
                subItem.RETsmallNumber || "00"
              }}</view
            > -->
            <view style="
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 12rpx;
              ">
              <view class="nowPrice">
                <text class="unit">¥</text>
                <text class="price">{{ subItem.bigNumber || "" }}.{{
                  subItem.smallNumber || "00"
                }}</text>
              </view>
              <view class="shopState" v-if="!(subItem.COMMODITY_STOCK > 0)">已售罄</view>
            </view>
          </div>
        </div>
        <view class="load-more" v-if="shopList.length > 0">
          <text>{{
            !shopMsg.isOver ? "正在加载,请稍后..." : "——— 我是有底线的 ———"
          }}</text>
        </view>
      </view>

      <view class="noDataBox" v-else>
        <no-data text="暂无商品数据" />
      </view>
    </scroll-view>
  </view>
</template>
<script>
import NoData from "../../../components/noData.vue";
export default {
  data() {
    return {
      menu: {},
      pageTitle: "",
      shopList: [],
      pageType: "",
      selectType: "",
      brandName: "", // 查询的品牌商品
      shopMsg: {
        pageSize: 10,
        pageIndex: 1,
        isOver: false,
      },
      queryType: "",
    };
  },
  components: {
    NoData,
  },
  onLoad(query) {
    console.log("query", query);
    if (query.pageType === "UnionMall") {
      this.selectType = query.type;
      if (query.type === "1") {
        this.pageTitle = "新品榜";
      } else if (query.type === "2") {
        this.pageTitle = "热销榜";
      } else if (query.type === "3") {
        this.pageTitle = "推荐榜";
      }
    } else if (query.pageType === "brand") {
      this.selectType = query.type;
      this.brandName = query.name;
      this.pageTitle = "品牌列表";
    } else if (query.pageType === "pointsMall") {
      this.pageTitle = "积分商城";
    } else {
      this.selectType = query.type;
      if (query.type === "5030") {
        this.pageTitle = "促销单品";
      } else if (query.type === "5040") {
        this.pageTitle = "甄选商品";
      } else if (query.type === "5050") {
        this.pageTitle = "今日推荐";
      } else if (query.type === "4597") {
        this.pageTitle = "每周特惠";
      }
    }
    this.queryType = query.pageType;
    this.pageType = query.pageType === "brand" ? "UnionMall" : query.pageType;
    this.menu = uni.getMenuButtonBoundingClientRect();
    this.handleGetShopList(query.type);
    this.$utils.addUserBehaviorNew();
  },
  methods: {
    // 找到对应类型的商品列表
    async handleGetShopList(type) {
      // 如果已经到底了 就调用
      if (this.shopMsg.isOver) {
        return;
      }

      uni.showLoading({
        title: "加载中...",
      });
      let req = {};
      if (this.queryType === "UnionMall") {
        req = {
          action_type: "WeChat_GetMallGoodsInfo",
          ownerUnitId: 911,
          COMMODITYNATURE: 5070,
          payMethod: "1000,3000",
          justCommodity: 1,
          userdefinedtypeId:
            this.selectType === "1"
              ? "1317"
              : this.selectType === "2"
                ? "1318"
                : this.selectType === "3"
                  ? "1319"
                  : "",
          sortStr: this.selectType === "2" ? "COMMODITY_EN desc" : "",
          Page_Size: this.shopMsg.pageSize,
          Page_Index: this.shopMsg.pageIndex,
        };
      } else if (this.queryType === "brand") {
        req = {
          action_type: "WeChat_GetMallGoodsInfo",
          ownerUnitId: 911,
          COMMODITYNATURE: 5070,
          payMethod: "1000,3000",
          justCommodity: 1,
          brandName: this.brandName,
          Page_Size: this.shopMsg.pageSize,
          Page_Index: this.shopMsg.pageIndex,
        };
      } else if (this.queryType === "pointsMall") {
        req = {
          action_type: "WeChat_GetMallGoodsInfo",
          ownerUnitId: 911,
          justCommodity: 1,
          payMethod: "2000,3000",
          Page_Size: this.shopMsg.pageSize,
          Page_Index: this.shopMsg.pageIndex,
        };
      } else {
        req = {
          action_type: "WeChat_GetMallGoodsInfo",
          ownerUnitId: 911,
          COMMODITYNATURE: type === '4597' ? "" : type,
          userdefinedtypeId: type === '4597' ? '4597' : "",
          justCommodity: type === '4597' ? '' : 1,
          payMethod: type === '4597' ? '' : "1000,3000",
          Page_Size: this.shopMsg.pageSize,
          Page_Index: this.shopMsg.pageIndex,
        };
      }
      const data = await this.$api.getCoop(req);
      let oldList = [];
      if (this.shopList && this.shopList.length > 0) {
        oldList = this.shopList;
      }
      let shopList = [];
      let list = data.Data.List;
      if (list && list.length > 0) {
        if (list.length < 10) {
          this.shopMsg.isOver = true;
        }
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }
              shopList.push(subItem);
            });
          }
        });
      }

      console.log("shopList", shopList);
      this.shopList = oldList.concat(shopList);
      uni.hideLoading();
    },
    // 跳转商品详情
    handleGoShopDetail(obj) {
      console.log("obj", obj);
      uni.navigateTo({
        url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}&pageType=${this.pageType}`,
      });
    },
    // 返回上级
    handleBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 滚动到底部 加载更多
    handleScrollBottom() {
      this.shopMsg.pageIndex = this.shopMsg.pageIndex + 1;
      this.handleGetShopList(this.queryType);
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: #f8f8f8;

  .headerTitle {
    width: 100vw;
    background: #fff;
    box-sizing: border-box;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .backArrow {
      width: 48rpx;
      height: 48rpx;
    }

    .pageTitle {
      font-size: 32rpx;
      font-weight: 600;
      color: #000;
    }
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx;

    .shopList {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .buyShopItem {
        width: calc((100% - 22rpx) / 2);
        background: #fff;
        border-radius: 16rpx;
        box-sizing: border-box;
        margin-bottom: 24rpx;

        .shopImgContent {
          width: 100%;
          height: 330rpx;
          box-sizing: border-box;
          overflow: hidden;
          border-radius: 16rpx 16rpx 0 0;

          .shopImage {
            width: 100%;
            height: 100%;
          }
        }

        .priceBox {
          width: 100%;
          box-sizing: border-box;
          padding: 16rpx 24rpx 32rpx;

          .shopName {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #130f05;
            line-height: 32rpx;
            font-style: normal;
            width: calc((100vw - 80rpx) / 2 - 40rpx);
            height: 64rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* 设置显示的行数，超出的行数会被省略 */
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .retailPrice {
            margin-top: 12rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #756c6a;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            text-decoration-line: line-through;
          }

          .nowPrice {
            .unit {
              font-family: DINAlternate, DINAlternate;
              font-weight: bold;
              font-size: 24rpx;
              color: #fe3f22;
              line-height: 24rpx;
              text-align: left;
              font-style: normal;
            }

            .price {
              font-family: DINAlternate, DINAlternate;
              font-weight: bold;
              font-size: 36rpx;
              color: #fe3f22;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
          }

          .shopState {
            font-size: 24rpx;
            color: #fff;
            background: #bbbbbb;
            padding: 4rpx 16rpx;
            border-radius: 8rpx;
          }

          .buyCarBox {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .buyCarLeft {
              .price {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 32rpx;
                color: #ff6219;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;

                .smallPrice {
                  font-size: 28rpx;
                }
              }

              .unit {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #9fa3a8;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
            }

            .buyCarIcon {
              width: 70rpx;
              height: 70rpx;
              border-radius: 50%;
              overflow: hidden;

              .icon {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }

      .mallItem {
        width: calc((100% - 16rpx) / 2);
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
        overflow: hidden;

        .mallTop {
          width: 100%;
          height: 330rpx;
          box-sizing: border-box;

          .mallImg {
            width: 100%;
            height: 100%;
          }
        }

        .mallBottom {
          width: 100%;
          height: 188rpx;
          box-sizing: border-box;
          padding: 8rpx 20rpx 24rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .priceTop {
            .mallTitle {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #130f05;
              line-height: 32rpx;
              text-align: justify;
              font-style: normal;
              width: 100%;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              -webkit-line-clamp: 2;
            }

            .sumText {
              margin-top: 4rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 20rpx;
              color: #716f69;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
          }

          .priceBox {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .leftPrice {
              .unit {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 24rpx;
                color: #130f05;
                line-height: 24rpx;
                text-align: left;
                font-style: normal;
              }

              .price {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 36rpx;
                color: #090c1a;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
            }

            .rightPrice {
              width: 32rpx;
              height: 32rpx;

              .mallIcon {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }

      .load-more {
        text-align: center;
        width: 100%;
        height: 80rpx;
        color: #d0d0d0;
        font-size: 24rpx;
      }
    }

    .noDataBox {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .content ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
  }
}
</style>