<script lang="ts" setup>
import * as R from "ramda";
import {useConfigStore, useUserStore} from "@/store";

const configStore = useConfigStore();
const userStore = useUserStore();
const {t, locale} = useI18n();

const emits = defineEmits<{
  chooseLanguage: [];
  logOut: [];
}>();

interface Tab {
  iconPath: string;
  path: string;
  text: string;
  code: string;
  isLogin: boolean;
}

const tabBarList = ref<Tab[]>([
  {
    iconPath: "/static/images/chef/100190.png",
    path: "/pages-user/pages/store-settle-in/list",
    text: t("pages.mine.storeAuth"),
    code: "auth",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100191.png",
    path: "/pages-user/pages/store-management/list",
    text: t("pages.mine.storeManage"),
    code: "management",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100192.png",
    path: "/pages-user/pages/complaints/index",
    text: t("pages.mine.complaintsSuggestions"),
    code: "complaintsAndSuggestions",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100193.png",
    path: "/pages-user/pages/coupon/index",
    text: t("pages.mine.language"),
    code: "language",
    isLogin: true,
  },
  {
    iconPath: "/static/images/chef/100194.png",
    path: "/pages-user/pages/setting/index",
    text: t("pages.mine.set"),
    code: "set",
    isLogin: true,
  },
]);

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

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

function handleTabClick(item: Tab) {
  switch (item.code) {
    case "language": {
      emits("chooseLanguage");
      break;
    }
    case "logOut": {
      emits("logOut");
      break;
    }
    case "auth": {
      console.log('auth')
      if (userStore.checkLogin()) {
        if (userStore.firstShopSettled) {
          uni.navigateTo({
            url: '/pages-user/pages/store-settle-in/list',
          })
        } else {
          uni.navigateTo({
            url: '/pages-user/pages/store-settle-in/index?from=top',
          })
        }
      }
      break;
    }
    default: {
      R.both(
          checkNeedLogin,
          R.pipe(() => navigateTo(item.path), R.T)
      )(item.isLogin);
      break;
    }
  }
}

function handleChooseLanguage() {
  emits("chooseLanguage");
}

async function initData() {
  try {
    // const res = await getSocialPlatformList()
    // console.log(res)
    // dataList.value = res.data
  } catch (e) {
  }
}

async function getPlatformDefaultStoreInfo() {
}

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

<template>
  <view
      :style="[
      {
        height: configStore.windowHeight + 'px',
      },
    ]"
      class="bg-#F6F6F6"
  >
    <z-paging ref="paging">
      <template #top>
        <view class="bg-white">
          <status-bar/>
          <view class="h-88rpx center text-36rpx text-#333 font-500">Profile</view>
        </view>
      </template>
      <view class="px-30rpx pt-28rpx">
        <view class="flex items-center h-164rpx rounded-16rpx bg-white px-20rpx mb-20rpx" @click="checkNeedLogin">
          <image
              v-if="userStore.isLogin && userStore.currenMerchantInfo"
              :src="userStore.currenMerchantInfo.logo"
              class="w-96rpx h-96rpx rounded-50% mr-20rpx"
              mode="aspectFill"
          />
          <image
              v-else
              class="w-96rpx h-96rpx rounded-50% mr-20rpx"
              mode="aspectFill"
              src="@img/chef/default_avatar.png"
          />
          <view>
            <template v-if="userStore.isLogin">
              <view class="text-32rpx lh-32rpx text-#333 font-500">
                <text v-if="userStore.currenMerchantInfo && userStore.currenMerchantInfo.merchantName">
                  {{ userStore.currenMerchantInfo.merchantName }}
                </text>
                <text v-else>{{ userStore.userInfo.firstName }} {{ userStore.userInfo.surname }}</text>
              </view>
              <view class="text-26rpx lh-26rpx text-#666 mt-20rpx flex items-center">
                <image class="w-28rpx h-28rpx mr-4rpx" src="@img/chef/1.png"></image>
                {{ userStore.userInfo.phone }}
              </view>
            </template>
            <template v-else>
              <view>{{ t('pages.mine.loginTips') }}</view>
            </template>
          </view>
        </view>

        <view class="px-20rpx py-4rpx rounded-16rpx bg-#fff">
          <view
              v-for="(item, index) in tabBarList"
              :key="item.code"
              class="flex-center-sb py-32rpx border-b-1rpx border-b-solid border-b-#DFDFDF last:border-none"
              @click="handleTabClick(item)"
          >
            <view class="flex items-center">
              <image
                  :src="item.iconPath"
                  class="w-44rpx h-44rpx shrink-0 mr-18rpx"
              ></image>
              <text class="text-30rpx text-#333 lh-30rpx font-500 tracking-[.04em]">{{
                  item.text
                }}
              </text>
            </view>
            <view class="flex items-center shrink-0 ml-20rpx">
              <text v-if="item.code === 'language'"
                    class="text-30rpx text-#333 lh-30rpx font-500 tracking-[.04em] mr-10rpx">
                {{ locale === 'en' ? 'English' : '中文' }}
              </text>
              <image class="w-22rpx h-30rpx" src="@img/chef/100202.png"></image>
            </view>
          </view>
        </view>

        <view v-if="userStore.isLogin"
              class="mt-98rpx bg-white rounded-16rpx center text-32rpx text-#333 font-500 py-32rpx"
              @click="handleTabClick({code: 'logOut'})">{{ t('pages.mine.logOut') }}
        </view>
      </view>
      <template #bottom>
        <view class="h-50px"></view>
        <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
      </template>
    </z-paging>
  </view>
</template>

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