<script setup lang="ts">
import * as R from "ramda";
import dayjs from 'dayjs'
import useEventEmit from "@/hooks/useEventEmit";
import { EventEnum } from "@/constant/enums";
import { useConfigStore, useUserStore } from "@/store";
import MineSkeleton from "./components/mine-skeleton.vue";
const configStore = useConfigStore();
const userStore = useUserStore();
import { Agreement } from "@/constant/enums";
import Config from '@/config/index'
import {formatTimestampWithMonthName, loadWeixinService} from "@/utils/utils";
const { t } = useI18n();

const loading = ref(true);

const emits = defineEmits<{
  chooseLanguage: [];
  logOut: [];
  inviteUser: [];
  customerService: [];
  changeOrder: [];
}>();
interface Tab {
  iconPath: string;
  path: string;
  text: string;
  code: string;
  isLogin: boolean;
}

const tabBarList = ref<Tab[]>([
  {
    iconPath: "/static/images/chef/100201.png",
    path: "/pages-user/pages/coupon/index",
    text: t("pages.mine.discount"),
    code: "discount",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100200.png",
    path: "/pages-user/pages/faqs/index",
    text: t("pages.mine.help"),
    code: "help",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100199.png",
    path: "/pages-user/pages/coupon/index",
    text: t("pages.mine.inviteFriends"),
    code: "inviteFriends",
    isLogin: true,
  },
  {
    iconPath: "/static/images/100203.png",
    path: "/pages-user/pages/invited-person/index",
    text: t('pages.mine.my-invitations'),
    code: "myInvitations",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100198.png",
    path: "/pages-user/pages/store-settle-in/index",
    text: t("pages.mine.storeSettled"),
    code: "storeSettled",
    isLogin: false,
  },
  {
    iconPath: "/static/images/chef/100197.png",
    path: "/pages-user/pages/coupon/index",
    text: t("pages.mine.support"),
    code: "support",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100196.png",
    path: "/pages/agreement/index?code=" + Agreement.CHEF_PLATFORM_AGREEMENT,
    text: t("pages.mine.platformAgreement"),
    code: "platformAgreement",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100195.png",
    path: "/pages/agreement/index?code=" + Agreement.PRIVACY_POLICY,
    text: t("pages.mine.privacyPolicy"),
    code: "privacyPolicy",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100194.png",
    path: "/pages-user/pages/complaints/index",
    text: t("pages.mine.complaintsAndSuggestions"),
    code: "complaintsAndSuggestions",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100192.png",
    path: "/pages-user/pages/setting/index",
    text: t("pages.mine.set"),
    code: "set",
    isLogin: true,
  },
]);

function navigateTo(url: string) {
  if(userStore.checkLogin()) {
    uni.navigateTo({
      url,
    });
  }
}

function checkNeedLogin(isNeedLogin: boolean) {
  return isNeedLogin ? userStore.checkLogin() : true;
}

// 用户会员状态是否已开通
const isUserMember = computed(()=> {
  if(!userStore.userInfo.userMembershipVo) return false
  if(userStore.userInfo.userMembershipVo && userStore.userInfo.userMembershipVo.expireTime ){
    return dayjs().isBefore(dayjs(Number(userStore.userInfo.userMembershipVo.expireTime)))
  } else {
    return false
  }
})

function handleTabClick(item: Tab) {
  switch (item.code) {
    case "inviteFriends": {
      // R.both(checkNeedLogin, R.pipe(() => emits("inviteUser"), R.T))(item.isLogin)
      emits("inviteUser");
      break;
    }
    case "support": {
      // emits("customerService");
      loadWeixinService()
      break;
    }
    default: {
      // navigateTo(item.path)
      if (item.code === "set") {
        navigateTo("/pages-user/pages/setting/index");
      } else {
        R.both(
          checkNeedLogin,
          R.pipe(() => navigateTo(item.path), R.T)
        )(item.isLogin);
      }
      break;
    }
  }
}

function changeOrderFn() {
  emits("changeOrder");
}

async function initData() {
  loading.value = false;
  // setTimeout(() => {
  //   loading.value = false;
  // }, 300);
  userStore.getUserInfo()
}

async function getPlatformDefaultStoreInfo() {}

defineExpose({
  initData,
  init: getPlatformDefaultStoreInfo,
});
</script>

<template>
  <view
    class="bg-#fff"
    :style="[
      {
        height: configStore.windowHeight + 'px',
      },
    ]"
  >
    <z-paging ref="paging">
      <template #top>
        <status-bar />
      </template>
      <view
        v-show="loading"
        class="animate-in fade-in animate-ease-out animate-duration-300"
      >
        <mine-skeleton />
      </view>
      <view
        v-show="!loading"
        class="animate-in fade-in animate-ease-in animate-duration-300"
      >
        <view class="px-30rpx">
          <view
            @click="navigateTo('/pages-user/pages/user-info/index')"
            class="flex-center-sb mt-32rpx mb-82rpx"
          >
<!--            <text class="text-56rpx text-#333 leading-56rpx font-bold tracking-[.04em]"-->
<!--              >{{ userStore.isLogin ? `${userStore.userInfo.firstName} ${userStore.userInfo.surname}` : t('common.pleaseLogin') }}-->
<!--            </text>-->

            <text
                class="text-56rpx text-#333 leading-56rpx font-bold tracking-[.04em]"
            >
              {{
                userStore.isLogin
                    ? ([userStore.userInfo.firstName, userStore.userInfo.surname].filter(Boolean).join(' ') || t('common.unknownUser'))
                    : t('common.pleaseLogin')
              }}
            </text>

            <image
                v-if="userStore.isLogin"
                :src="userStore.userInfo.avatar"
                class="w-130rpx h-130rpx rounded-50%"
                mode="aspectFill"
            />
            <image
                v-else
                class="w-130rpx h-130rpx rounded-50%"
                mode="aspectFill"
                src="@img/chef/default_avatar.png"
            />
          </view>
          <view class="flex-center-sb mb-36rpx">
            <view
                @click="navigateTo('/pages-user/pages/collection/index')"
              class="flex-1 flex-col center bg-#F6F6F6 rounded-24rpx h-194rpx"
            >
              <view
                class="text-44rpx text-#333 leading-44rpx font-bold mb-24rpx"
                >{{ userStore.userInfo.collectNum || 0 }}</view
              >
              <view class="text-28rpx text-#333 leading-28rpx tracking-[.04em]">{{
                t("pages.mine.collection")
              }}</view>
            </view>
            <view
              @click="navigateTo('/pages-user/pages/balance/index')"
              class="flex-1 mx-32rpx flex-col center bg-#F6F6F6 rounded-24rpx h-194rpx"
            >
              <view
                class="text-44rpx text-#333 leading-44rpx font-bold mb-24rpx"
                >{{ userStore.userInfo?.balance || 0 }}</view
              >
              <view class="text-28rpx text-#333 leading-28rpx tracking-[.04em]">{{
                t("pages.mine.wallet")
              }}</view>
            </view>
            <view
              @click="changeOrderFn"
              class="flex-1 flex-col center bg-#F6F6F6 rounded-24rpx h-194rpx"
            >
              <view
                class="text-44rpx text-#333 leading-44rpx font-bold mb-24rpx"
                >{{ userStore.userInfo.orderNum || 0 }}</view
              >
              <view class="text-28rpx text-#333 leading-28rpx tracking-[.04em]">{{
                t("pages.mine.order")
              }}</view>
            </view>
          </view>
          <template v-if="isUserMember">
            <view @click="navigateTo('/pages-user/pages/member/index')" class="w-full h-152rpx relative mb-52rpx">
              <image src="@img/chef/100203.png" class="w-full h-full absolute top-0 left-0"></image>
              <view class="pl-28rpx py-22rpx pr-165rpx relative z-1 h-full flex flex-col justify-between">
                <view class="text-40rpx text-#333 font-bold">
                  {{ Config.appName }}
                </view>
                <view class="text-24rpx lh-24rpx text-#935D04 tracking-[.08em]">
                  {{ t('common.expireTime') }}：{{ formatTimestampWithMonthName(userStore.userInfo.userMembershipVo?.expireTime) }}
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view @click="navigateTo('/pages-user/pages/member/index')" class="w-full h-152rpx relative mb-52rpx">
              <image src="@img/chef/100203.png" class="w-full h-full absolute top-0 left-0"></image>
              <view class="pl-28rpx py-22rpx pr-165rpx relative z-1 h-full flex flex-col justify-between">
                <view class="text-40rpx text-#333 font-bold">
                  <!--用户没有试用过会员-->
                  <template v-if="!userStore.userInfo.userMembershipVo">{{ t('pages.mine.member-title') }}</template>
                  <template v-else>{{ t('pages.mine.join') }} {{ Config.appName }}</template>
                </view>
                <view class="text-24rpx lh-24rpx text-#935D04 tracking-[.08em]">{{ t('pages.mine.member-desc') }}</view>
              </view>
            </view>
          </template>


          <view
            class="flex-center-sb py-28rpx bg-#fff"
            v-for="(item, index) in tabBarList"
            :key="item.code"
            :class="[
              index === tabBarList.length - 1 ? 'mb-58rpx' : 'border-bottom',
            ]"
            @click="handleTabClick(item)"
          >
            <view class="flex items-center">
              <image
                class="w-44rpx h-44rpx shrink-0 mr-18rpx"
                :src="item.iconPath"
              ></image>
              <text class="text-30rpx text-primary font-500 lh-30rpx tracking-[.04em]">{{
                item.text
              }}</text>
            </view>
            <view class="flex items-center shrink-0 ml-20rpx">
              <image class="w-22rpx h-30rpx" src="@img/chef/100202.png"></image>
            </view>
          </view>
        </view>
      </view>
      <template #bottom>
        <view class="h-50px"></view>
        <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
      </template>
    </z-paging>
  </view>
</template>

<style scoped lang="scss">
.border-bottom {
  border-bottom: 1rpx solid #dfdfdf;
}
</style>
