<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '%setting.title%',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script lang="ts" setup>
import { t } from '@/locale'
import i18n from '@/locale/index'
import { useUserStore } from '@/store'
import { toPage } from '@/utils/page'

defineOptions({
  name: 'Setting', // 设置
})
const userStore = useUserStore()
const columns = ref([{ label: t('setting.lang.en'), value: 'en' }, { label: t('setting.lang.bn'), value: 'bn' }])
const language = ref(uni.getLocale() === 'bn' ? 'bn' : 'en')
function changeLanguage(data: any) {
  console.log(data)
  // 下面2句缺一不可！！！
  uni.setLocale(data.value)
  i18n.global.locale = data.value
}
function logout() {
  userStore.removeUserInfo()
  toPage('/pages/login/login', {}, true)
}
</script>

<template>
  <view class="py-20rpx">
    <wd-cell-group custom-class="mb-20rpx" border>
      <wd-cell :title="$t('setting.changePassword')" custom-title-class="text-32rpx" is-link @click="toPage('/pages/forgotPassword/forgotPassword')" />
      <wd-picker v-model="language" :columns="columns" use-default-slot @confirm="changeLanguage">
        <wd-cell :title="$t('setting.language')" custom-title-class="text-32rpx" custom-value-class="text-#838383! text-32rpx!" :value="columns.find(item => item.value === language)?.label" is-link />
      </wd-picker>
      <wd-cell :title="$t('setting.policies')" custom-title-class="text-32rpx" is-link />
      <wd-cell :title="$t('setting.help')" custom-title-class="text-32rpx" is-link />
      <wd-cell :title="$t('setting.feedback')" custom-title-class="text-32rpx" is-link />
    </wd-cell-group>

    <!-- Logout -->
    <view class="mb-20rpx bg-white p-24rpx text-center text-32rpx text-[var(--wot-color-theme)]" @click="logout">
      {{ $t('setting.logout') }}
    </view>
    <view class="text-center text-32rpx text-#909090">
      {{ t('setting.version', ['1.1.0']) }}
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
