<script lang="ts" setup>
import {useMessage} from "wot-design-uni";
import {useConfigStore, useUserStore} from "@/store";
import {appUserLogOffPost} from "@/service";
import {Agreement} from "@/constant/enums";

const {t} = useI18n();
const {locale} = useI18n();
const userStore = useUserStore();
const configStore = useConfigStore()
const message = useMessage();
const currentVersion = ref(configStore.appVersion)


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


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


// 确认注销
const show = ref(false);

function handleConfirmCancel() {
  appUserLogOffPost({
    body: {
      userPort: 2
    }
  }).then(() => {
    userStore.clear();
  })
}

function close() {
  show.value = false;
}
</script>

<template>
  <navbar :title="t('navbar-settings')"/>
  <view class="pt-20rpx">
    <view class="text-28rpx text-#333  bg-#fff mb-20rpx">
      <view
          class="flex justify-between items-center p-[40rpx+20rpx] before:!bg-common"
          @click="
          handleSetOrUpdatePassword
        "
      >
        <view>{{ t("pages-user.setting.payPwd") }}</view>
        <view class="flex items-center">
          <text>{{ t('navbar-settings') }}</text>
          <image
              class="shrink-0 ml-16rpx w-22rpx h-30rpx"
              src="@img/chef/100202.png"
          ></image>
        </view>
      </view>
      <view
          class="flex justify-between items-center p-[40rpx+20rpx]"
          @click="navigateTo(`/pages/agreement/index?code=${Agreement.USER_AGREEMENT}`)"
      >
        <view>{{ t('agreement.user-terms-conditions') }}</view>
        <image
            class="shrink-0 ml-16rpx w-22rpx h-30rpx"
            src="@img/chef/100202.png"
        ></image>
      </view>
      <view
          class="flex justify-between items-center p-[40rpx+20rpx]"
          @click="navigateTo(`/pages/agreement/index?code=${Agreement.PRIVACY_POLICY}`)"
      >
        <view>{{ t('agreement.privacy-policy') }}</view>
        <image
            class="shrink-0 ml-16rpx w-22rpx h-30rpx"
            src="@img/chef/100202.png"
        ></image>
      </view>
    </view>

    <view class="bg-white h-112rpx flex-center-sb px-20rpx" @click="show = true">
      <text class="text-28rpx text-#333">{{ t('pages-user.setting.logOff') }}</text>
      <image
          class="shrink-0 ml-16rpx w-22rpx h-30rpx"
          src="@img/chef/100202.png"
      ></image>
    </view>
  </view>

  <wd-popup
      v-model="show"
      custom-class="!bg-transparent"
      position="bottom"
      safe-area-inset-bottom
      @close="close"
  >
    <view class="p-[40rpx+20rpx] relative">
      <image class="w-28rpx h-28rpx absolute top-60rpx right-40rpx" src="@img/chef/100404.png" @click="close"></image>
      <view
          class="mb-20rpx py-35rpx px-24rpx bg-white shadow-[0rpx_3rpx_6rpx_rgba(0,0,0,0.16)] rounded-12rpx"
      >
        <view class="text-30rpx text-#333 font-500 mb-26rpx">{{ t('pages-user.setting.logOffRisk') }}！</view>
        <view class="bg-#F5F5F5 rounded-12rpx p-22rpx text-28rpx text-#999 lh-36rpx">
          {{ t('pages-user.setting.logOffDesc') }}
        </view>
      </view>
      <view
          class="h-100rpx flex items-center justify-center text-28rpx text-primary font-bold shadow-[0rpx_3rpx_6rpx_rgba(0,0,0,0.16)] bg-white rounded-12rpx"
          @click="handleConfirmCancel"
      >
        {{ t('pages-user.setting.logOffConfirm') }}
      </view>
    </view>
  </wd-popup>
</template>

<style scoped></style>
