<template>
  <view class="goodsType">
    <view class="goodsHeader">
      <view :style="{ height: `${statusBarHeight}px` }"></view>
      <view class="classification-title" :style="[
        { height: `${menuButtonHeight}px`, lineHeight: `${menuButtonHeight}px` },
      ]">
        <text class="title-txt">商品分类</text>
      </view>
      <view class="topsearch u-p30 u-flex-center-sb" @click="goSearch()">
        <view class="u-flex1 u-flex-center leftbox">
          <text class="iconfont u-font30 u-666 u-ml30">&#xe618;</text>
          <text class="u-font22 u-CCC u-ml20">请输入搜索关键字</text>
          <text class="search-btn">搜索</text>
        </view>
      </view>
    </view>

    <view class="goodsBox">
      <scroll-view scroll-y="true" class="goodsBox_lScroll">
        <view class="goodsBox_l">
          <view v-for="(v, i) in firstList" :key="i" :class="activeFirst.categoryId === v.categoryId ? 'active' : ''"
            @click="clickFirst(v)">{{ v.categoryName }}</view>
        </view>
      </scroll-view>
      <view class="goodsBox_r">
        <scroll-view scroll-x="true" class="goodsBox_r_t">
          <view class="goodsBox_r_t_box">
            <view class="goodsBox_r_t_item" v-for="(v, i) in secondList" :key="'a' + i"
              :class="activeSecond.categoryId === v.categoryId ? 'active' : ''" @click="clickSecond(v)">{{
                v.categoryName }}</view>
          </view>
        </scroll-view>
        <scroll-view scroll-y="true" class="listScroll" @scrolltolower="loadMore">
          <view class="list">
            <view class="item" v-for="(v, i) in list" :key="i" @click="goDetails(v)">
              <image :src="v.coverImage" mode=""></image>
              <view class="item_r">
                <view class="item_r_title">{{ v.title }}</view>
                <view class="item_r_price">
                  <text v-if="v.productPaymentMode == 1" style="font-size: 28rpx">{{ v.minPoints }}积分</text>
                  <rich-text v-else :nodes="$mUtil.priceBigSmall(v.salePrice || v.minSalePrice)"></rich-text>
                </view>
              </view>
            </view>
            <noData v-if="list.length <= 0" :config="{ top: 20, content: '暂无商品~' }"></noData>
            <uv-load-more v-else :status="status" />
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { merchantCategoryTree_Api, shopProductPage_Api } from "@/api/shop.js";
import { ref, getCurrentInstance } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
const status = ref("nomore"); //loadmore - 加载前，loading - 加载中，nomore - 没有数据

const firstList = ref([]);
const secondList = ref([]);
const activeFirst = ref({});
const activeSecond = ref({});
const list = ref([]);
const params = ref({
  pageSize: 10,
  pageNum: 1,
  productCategoryId: undefined,
});
const statusBarHeight = ref(0);
const menuButtonHeight = ref(44);

onLoad((options) => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight;
      // console.log("statusBarHeight==>", res.statusBarHeight);
    },
  });
  // #ifdef APP-PLUS
  try {
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    // console.log("menuButtonInfo", menuButtonInfo);
    menuButtonHeight.value = menuButtonInfo.height + 10;
  } catch (error) {
  }
  // #endif
  getTypeList();
});
const goBack = () => {
  uni.navigateBack();
};
const clickFirst = (item) => {
  activeFirst.value = item;
  // getTypeList(item.categoryId);
  secondList.value = item.childrenList || [];
  activeSecond.value = {};
  params.value.merchantCategoryId = item.categoryId;
  params.value.pageNum = 1;
  getList();
};
const clickSecond = (item) => {
  activeSecond.value = item;
  params.value.merchantCategoryId = item.categoryId;
  getList();
};
const goDetails = (item) => {
  uni.navigateTo({
    url: `/pages/shop/goodsDetails?id=${item.productId}`,
  });
};
const loadMore = () => {
  if (status.value == "loadmore") {
    params.value.pageNum++;
    getList();
  }
};
const getTypeList = (parentId) => {
  if (!parentId) parentId = 0;
  let param = {
    parentId: parentId,
  };
  merchantCategoryTree_Api(param).then((res) => {
    // 把一级list根据parentId处理成tree结构
    firstList.value = res.data;
    params.value.merchantCategoryId = res.data[0].categoryId;
    secondList.value = res.data[0].childrenList || [];
    activeFirst.value = res.data[0];
    params.value.pageNum = 1;
    getList();
  });
};
// 获取商品列表
const getList = () => {
  status.value = "loading";
  shopProductPage_Api(params.value)
    .then((res) => {
      if (params.value.pageNum == 1) {
        list.value = res.rows;
      } else {
        list.value = [...list.value, ...res.rows];
      }
      if (list.value.length < res.total) {
        status.value = "loadmore";
      } else {
        status.value = "noMore";
      }
      uni.stopPullDownRefresh();
    })
    .catch((e) => {
      uni.stopPullDownRefresh();
      status.value = "loadmore";
    });
};
const goSearch = () => {
  uni.navigateTo({
    url: "/pages/shop/goodSearch",
  });
};
</script>

<style lang='scss' scoped>
page {
  height: 100vh;
  overflow: hidden;
}

.goodsType {
  background: linear-gradient(180deg, #fffaec, #ffffff 36%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.goodsHeader {
  flex-shrink: 0;
}

.classification-title {
  font-size: 36rpx;
  font-family: PingFang SC, PingFang SC-Bold;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
  box-sizing: border-box;
}

.leftbox {
  height: 80rpx;
  line-height: 80rpx;
  // background-color: rgba($color: #E6E6E6, $alpha: .4);
  background: #ffffff;
  border-radius: 35rpx;
  padding: 5rpx;
  box-sizing: border-box;

  .search-btn {
    margin-left: auto;
    width: 124rpx;
    // background: linear-gradient(98deg, #fa6339 5%, #fdae6a 94%);
    background: #fbd415;
    border-radius: 35rpx;
    text-align: center;
    line-height: 70rpx;
    color: #1a1a1a;
  }
}

.goodsBox {
  // background-color: rgba(230, 230, 230, 0.4);
  display: flex;
  flex: 1;
  min-height: 0;

  .goodsBox_lScroll {
    width: 176rpx;
    background-color: #f4f4f4;
    height: 100%;
    flex-shrink: 0;
  }

  .goodsBox_l {
    >view {
      width: 176rpx;
      height: 100rpx;
      text-align: center;
      color: #808080;
      line-height: 100rpx;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 24rpx;
    }

    >.active {
      position: relative;
      background-color: #fff;
      color: #fa6137;
      font-size: 24rpx;
      font-weight: bold;
      border-radius: 0rpx 20rpx 20rpx 0rpx;

      &::after {
        width: 8rpx;
        height: 40rpx;
        background: linear-gradient(180deg, #fa6239, #feaf6b);
        position: absolute;
        left: 0;
        top: 50%;
        content: "";
        border-radius: 0 8rpx 8rpx 0;
        transform: translateY(-50%);
      }
    }
  }

  .goodsBox_r {
    // background: #fff;
    width: 570rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;

    .goodsBox_r_t {
      width: 510rpx;
      height: 90rpx;
      line-height: 90rpx;
      border-bottom: 1px solid #e7e7e7;
      flex-shrink: 0;

      .goodsBox_r_t_box {
        display: flex;
        flex-wrap: nowrap;

        .active {
          color: #fa6138;
          font-weight: bold;
        }
      }

      .goodsBox_r_t_item {
        margin-right: 45rpx;
        display: inline-block;
        font-size: 28rpx;
        flex-shrink: 0;
      }
    }
  }
}

.list {
  .item {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;

    image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      overflow: hidden;
      flex-shrink: 0;
    }

    .item_r {
      padding-bottom: 25rpx;
      border-bottom: 1px solid #e7e7e7;
      margin-left: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1;

      .item_r_title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal !important;
        font-size: 28rpx;
      }

      .item_r_price {
        font-size: 32rpx;
        color: #ff6600;
        font-weight: bold;
        margin-top: 17rpx;
        display: flex;
        align-items: baseline;
      }
    }
  }
}

.listScroll {
  flex: 1;
  min-height: 0;
}
</style>
