<template>
  <view class="pages-box">
    <uv-navbar autoBack title="经营数据" placeholder bgColor="#f5f5f5" />
    <view class="tabs-box">
      <template v-for="item in TabsList">
        <view
          :class="[
            'tab-item',
            activeTabs === item.value ? 'active-tab-item' : '',
          ]"
          @click.stop="activeTabs = item.value"
        >
          <text class="text">{{ item.label }}</text>
          <template v-if="activeTabs === item.value">
            <ActiveTabIocn />
          </template>
        </view>
      </template>
    </view>
    <view class="tabs-placeholder" />

    <!-- 筛选店铺 -->
    <view
      class="label-box"
      @click.stop="pickerRef.open()"
      v-if="partnerList.length"
    >
      <view class="label-icon-box">
        <text class="iconfont label-icon">&#xe60f;</text>
        <text class="label-name one-row">筛选店铺</text>
      </view>
      <text class="label-text">{{ businessName ? businessName : "全部" }}</text>
      <text class="iconfont label-next">&#xe671;</text>
    </view>

    <template v-if="activeTabs === TabsList[0].value">
      <ShopData :business-id="BusinessId" :business-type="BusinessType" />
    </template>
    <template v-else-if="activeTabs === TabsList[1].value">
      <DataStatistics :business-id="BusinessId" />
    </template>

    <uv-picker
      ref="pickerRef"
      :columns="[partnerList]"
      @confirm="confirmPicker"
      keyName="businessName"
    ></uv-picker>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import ShopData from "./components/ShopData.vue";
import DataStatistics from "./components/DataStatistics.vue";
// import { getManageDataApi } from "@/api/ShopContent.ts";
import { businessUserInfo_Api } from "@/api/userInfo.js";
import { BusinessTypeEnum } from "@/util/Enum.ts";
import { getPartnerPageApi } from "@/api/ShopContent";
const pickerRef = ref(null);

const activeTabs = ref(1);
const TabsList = [
  {
    label: "店铺数据",
    value: 1,
  },
  {
    label: "数据统计",
    value: 2,
  },
];

const BusinessType = ref(); // 店铺类型
const BusinessId = ref(); // 店铺ID

// const getUserBusiness = async () => {
// 	try {
// 		const Business = await businessUserInfo_Api();
// 		console.log('Business = ' , Business)
// 	} catch (error) {
// 		//TODO handle the exception
// 	}
// }

// const getManageData = () => {

// 	getManageDataApi()

// };

// onMounted(() => {
// 	getUserBusiness()
// })

const businessName = ref(null);

const confirmPicker = (e) => {
  //   console.log("confirmPicker = ", e.value[0]);
  if (e.value[0]) {
    BusinessId.value = e.value[0].businessId;
    businessName.value = e.value[0].businessName;
  }
};

// 连锁店数据
const partnerList = ref([]);
const getPartnerPage = async () => {
  try {
    const { rows } = await getPartnerPageApi({ pageSize: 1000, pageNum: 1 });
    console.log("getPartnerPage = ", rows);
    if (rows.length > 0) {
      partnerList.value = [
        { businessId: BusinessId.value, businessName: businessName.value },
        ...rows,
      ];
    }
  } catch (error) {
    //TODO handle the exception
  }
};

getPartnerPage();

onLoad((opt) => {
  const { businessType, businessId } = opt || {};
  BusinessType.value = Number(businessType);
  BusinessId.value = Number(businessId);
  businessName.value = opt.businessName;
});
</script>

<style lang="scss" scoped>
// :deep(.uni-scroll-view-content) {
// 	display: flex;
// 	flex-direction: row;
// 	justify-content: center;
// }
.tabs-placeholder {
  display: 100%;
  height: 100rpx;
}

.tabs-box {
  display: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0;
  background-color: $my-pages-bg;
  z-index: 1;

  .tab-item {
    padding-top: 30rpx;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    & + .tab-item {
      margin-left: 160rpx;
    }

    .text {
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 1;
      padding-bottom: 10rpx;
    }
  }

  .active-tab-item {
    .text {
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #ff0000;
    }
  }
}

// <view class="tab-box">
// 	<template v-for="item in TabsList">
// 		<view class="tab-item">
// 			{{item.label}}
// 		</view>
// 	</template>
// </view>

.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 30rpx;
  width: 100%;
  min-height: 100rpx;
  background-color: #fff;
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  box-sizing: border-box;

  .label-icon {
    font-size: 38rpx;
    color: #eb5153;
  }
  .label-icon-box {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  .label-name {
    padding: 0 12rpx;
    color: #1a1a1a;
  }

  .label-text {
    color: #666666;
    padding-right: 10rpx;
  }

  .label-next {
    color: #000000;
    flex-shrink: 0;
  }
}
</style>
