<template>
  <view :class="['home-box', isBindShop ? 'pages-bg-2' : '']">
    <template v-if="isGetBindShopLoading">
      <!-- 初次进入，不知道有没有绑定店铺 -->
      <HomeHint />
    </template>
    <template v-else-if="isBindShop">
      <!-- 绑定店铺 -->
      <uv-navbar
        title="商城"
        placeholder
        leftIcon=""
        :title-style="NavTitleStyle"
        :bg-color="NavBgColor"
      />
      <template v-if="BannerList && BannerList.length">
        <SwitchBanner :banner-list="BannerList" />
      </template>
      <ShopCard :shop-vo="BusinessShopVo" isSwitchShop isBindMore @SwitchStore="SwitchStore"/>
      <view style="width: 100%; height: 30rpx; flex-shrink: 0" />
      <view class="shop-content-box">
        <shopContent ref="shopContentRef" :height="ContentHeight" :shop-vo="BusinessShopVo" />
      </view>
    </template>
    <template v-else>
      <!-- 未绑定店铺 -->
      <HomeHint />
    </template>

    <!-- #ifdef APP-PLUS -->
    <!-- 版本更新 -->
    <VersionUpdate />
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance, nextTick, watch } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import shopContent from "./components/shopContent.vue";
import SwitchBanner from "./components/SwitchBanner.vue";
import HomeHint from "./components/HomeHint.vue";
import { getUserBusinessRoleApi } from "@/api/home.ts";
import { getBusinessInfoId_Api } from "@/api/shop";
import { usePages } from "@/hooks/usePages.ts";
const { NavBgColor, NavTitleStyle } = usePages(1);
// import notJoin from './notJoin.vue'
// import goodsType from './goodsType.vue'
const instance = getCurrentInstance();
const ContentHeight = ref(0);
const isBindShop = ref(false); // 是否绑定店铺
const isGetBindShopLoading = ref(false);
const BusinessShopVo = ref(null); // 店铺信息
const isBindMore = ref(false); // 是否绑定多个店铺
const BannerList = ref(null);
const shopContentRef = ref(null);
const apiToken = ref("");
const originalBusinessId = ref(null);  // 原店铺id，切换店铺时使用，防止重复调用购物车数据

watch(
  () => isGetBindShopLoading.value,
  (newStatus) => {
    if (newStatus) {
      uni.showLoading({
        mask: true,
      });
    } else {
      uni.hideLoading();
    }
  }
);
// 获取会员在店铺详细信息
const getUserBusinessRole = async (businessId = '') => {
//   let businessId = uni.getStorageSync("businessId") || "";
  try {
    isGetBindShopLoading.value = true;
    let url = businessId ? getBusinessInfoId_Api : getUserBusinessRoleApi;
    const BindInfo = await url(businessId);
    if (!BindInfo) {
      // 未绑定店铺
      isBindShop.value = false;
    } else {
      const { businessVo, isBoundMore } = BindInfo.data;
      let objData = businessId ? BindInfo.data : businessVo;
      BusinessShopVo.value = objData;
      originalBusinessId.value = objData.businessId;
      let list = objData.innerImages || [];
      BannerList.value = list.map((item) => item + '?x-oss-process=style/w_700');
      isBindMore.value = businessId ? true : isBoundMore;
      // 已绑定店铺
      isBindShop.value = true;
      nextTick(() => {
        initShopContentHeight();
      });
    }
  } catch (error) {
    //TODO handle the exception
  } finally {
    isGetBindShopLoading.value = false;
  }
};

const initShopContentHeight = (num = 1) => {
  nextTick(() => {
    try {
      const query = uni.createSelectorQuery().in(instance);
      query
        .select(".shop-content-box")
        .boundingClientRect((data) => {
          ContentHeight.value = data.height;
        })
        .exec();
    } catch (error) {
      if (num >= 10) {
        return;
      } else {
        const delayTimeout = setTimeout(() => {
          clearTimeout(delayTimeout);
          initShopContentHeight((num += 1));
        }, 100);
      }
    }
  });
};
// 切换店铺
const SwitchStore = (businessId) => {
  originalBusinessId.value = null;
	getUserBusinessRole(businessId);
};

onShow(() => {
  let originalApiToken = uni.getStorageSync("apiToken") || "";
  if (apiToken.value != originalApiToken) {
    apiToken.value = originalApiToken;
    isBindShop.value = false;
    if (originalApiToken) {
      getUserBusinessRole();
      return;
    } else {
      isBindShop.value = false;
    }
  }
  if (shopContentRef.value && originalApiToken && BusinessShopVo.value && originalBusinessId.value) {
    shopContentRef.value.cartListBusinessList(BusinessShopVo.value.businessId);
  }
});
// onMounted(() => {
//   getUserBusinessRole();
// });
</script>

<style lang="scss" scoped>
.home-box {
  background-color: #f2f3f5;
  width: 100%;
  height: 100vh;
  /* #ifdef H5 */

  height: calc(100vh - 55px);
  /* #endif */
  display: flex;
  flex-direction: column;

  .shop-content-box {
    flex: 1;
    width: 100%;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    overflow: hidden;
  }
}
</style>
