<template>
  <view>
    <uv-navbar title="分类" placeholder leftIcon=""></uv-navbar>
    <view class="searchBox" @click="goSearch()">
      <view>
        <text class="iconfont">&#xe7a6;</text>
        <text class="searchBox_inp">请输入搜索关键字</text>
        <text class="searchBox_btn">搜索</text>
      </view>
    </view>
    <view
      class=""
      style="height: 13rpx; background-color: rgba(230, 230, 230, 0.4)"
    ></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";
const { proxy } = getCurrentInstance();
import { onShow, onLoad } from "@dcloudio/uni-app";
const status = ref("nomore"); //loadmore - 加载前，loading - 加载中，nomore - 没有数据
const tabTop = ref(0);
const firstList = ref([]);
const secondList = ref([]);
const activeFirst = ref({});
const activeSecond = ref({});
const list = ref([]);
const params = ref({
  pageSize: 10,
  pageNum: 1,
  productCategoryId: undefined,
});
onLoad((options) => {
  uni.getSystemInfo({
    success: (res) => {
      tabTop.value = res.statusBarHeight + 44;
    },
  });
  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>
.searchBox {
  display: flex;
  align-items: center;
  padding: 30rpx;
  > view {
    width: 100%;
    height: 70rpx;
    line-height: 70rpx;
    background-color: rgba(230, 230, 230, 0.4);
    border-radius: 35rpx;
    padding-left: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .iconfont {
      color: #666;
      font-size: 30rpx;
    }
    .searchBox_inp {
      color: #ccc;
      font-size: 22rpx;
      margin-left: 20rpx;
    }
    .searchBox_btn {
      margin-left: auto;
      width: 124rpx;
      background: linear-gradient(98deg, #fa6339 5%, #fdae6a 94%);
      border-radius: 35rpx;
      text-align: center;
      line-height: 70rpx;
      color: #fff;
    }
  }
}
.goodsBox {
  background-color: rgba(230, 230, 230, 0.4);
  display: flex;
  .goodsBox_lScroll {
    height: calc(100vh - 150rpx - v-bind(tabTop) * 1rpx);
  }
  .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;
    .goodsBox_r_t {
      width: 510rpx;
      height: 90rpx;
      line-height: 90rpx;
      border-bottom: 1px solid #e7e7e7;
      .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 {
  height: calc(100vh - 220rpx - v-bind(tabTop) * 1rpx);
}
</style>