<script setup lang="ts">
import {useMessage} from "wot-design-uni";
import {useConfigStore, useUserStore} from "@/store";
import {conversionMobile} from "@/utils";
import {Agreement} from "@/constant/enums";
import ChooseLanguage from "./components/choose-language/choose-language.vue";
import Logout from "./components/log-out/log-out.vue";
import Config from "@/config";
import {appUserLogOffPost} from "@/service";

const {t} = useI18n();
const {locale} = useI18n();
const userStore = useUserStore();
const configStore = useConfigStore()
const message = useMessage();
const currentVersion = ref(configStore.appVersion)
const chooseLanguageRef = ref<InstanceType<typeof ChooseLanguage>>()
const logoutRef = ref<InstanceType<typeof Logout>>()

function handleChooseLanguage() {
  if (chooseLanguageRef.value) {
    chooseLanguageRef.value.init()
  }
}


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


function handleSetOrUpdatePassword() {
  if (userStore.userInfo?.payPwd) {
    return navigateTo(`/pages-user/pages/pay-password/change/index`)
  }
  navigateTo(`/pages-user/pages/pay-password/set/index`)
}

function handleLogout() {
  if (logoutRef.value) {
    logoutRef.value.init()
  }
}

function handleLogoutAccount() {
  message
      .confirm({
        msg: t('pages-user.setting.cancelAccountConfirm'),
        title: t('common.prompt.system-prompt'),
        cancelButtonText: t('common.close'),
        confirmButtonText: t('common.confirm'),
        confirmButtonProps: {
          customClass: '!bg-#000'
        }
      })
      .then(() => {
        appUserLogOffPost({
          body: {
            userPort: 1,
          }
        }).then(res=> {
          uni.showToast({
            title: t('pages-user.setting.cancelAccountSuccess'),
            icon: 'none',
          })
          userStore.clear()
          uni.switchTab({
            url: Config.indexPath,
          })
        })
      })
      .catch(() => {})
}
</script>

<template>
  <navbar :title="t('navbar-settings')"/>
  <view class="pt-20rpx">
    <view class="text-30-bold  bg-#fff">
      <view
          class="flex justify-between items-center border-bottom font-bold p-[40rpx+20rpx]"
          @click="navigateTo('/pages-user/pages/password/change/index')"
      >
        <view>{{ t("pages-user.setting.modification") }}</view>
        <image
            src="@img/chef/100202.png"
            class="shrink-0 ml-16rpx w-22rpx h-30rpx"
        ></image>
      </view>

      <view
          @click="
          handleSetOrUpdatePassword
        "
          class="flex justify-between items-center p-[40rpx+20rpx] border-bottom"
      >
        <view>{{ t("pages-user.setting.payPwd") }}</view>
        <view class="flex items-center">
          <text>{{ t('navbar-settings') }}</text>
          <image
              src="@img/chef/100202.png"
              class="shrink-0 ml-16rpx w-22rpx h-30rpx"
          ></image>
        </view>
      </view>

      <view
          class="flex justify-between items-center p-[40rpx+20rpx] border-bottom before:!bg-common"
          @click="handleChooseLanguage"
      >
        <view>{{ t("pages-user.setting.language") }}</view>
        <view class="flex items-center">
          <text>{{ locale === 'en' ? 'English' : '中文'}}</text>
          <image
              src="@img/chef/100202.png"
              class="shrink-0 ml-16rpx w-22rpx h-30rpx"
          ></image>
        </view>
      </view>

      <view
          class="flex justify-between items-center font-bold p-[40rpx+20rpx]"
          @click="handleLogoutAccount"
      >
        <view>{{ t('pages-user.setting.cancelAccount') }}</view>
        <image
            src="@img/chef/100202.png"
            class="shrink-0 ml-16rpx w-22rpx h-30rpx"
        ></image>
      </view>
    </view>

    <view class="px-30rpx mt-180rpx">
      <wd-button  
        custom-class="!h-108rpx !text-36rpx !text-white !bg-#14181B !rounded-16rpx"
        block
        @click="handleLogout"
      >
        {{ t('pages-user.setting.logout') }}
      </wd-button>

    </view>
    
    <choose-language ref="chooseLanguageRef"/>
    <logout ref="logoutRef"/>
  </view>
</template>

<style scoped></style>
