<!--
 * @Author: wjc
 * @Date: 2024-06-17 16:02:59
 * @LastEditors: wjc
 * @LastEditTime: 2024-07-12 17:05:15
 * @Description: 
-->
<template>
  <MCard>
    <view>{{ userStore.userInfo.name }}</view>
  </MCard>
  <MMCard :space="true" direction="vertical">
    <view class="flex justify-between">
      <view>深色模式</view>
      <up-switch v-model="appStore.isDark"></up-switch>
    </view>
    <view class="flex justify-between">
      <view>语言</view>
      <view class="flex-1 text-right" @click="() => (showLang = true)">
        <view>
          {{ appStore.langs.find((item) => item.value === appStore.lang).label }}
        </view>
        <up-picker
          :show="showLang"
          :columns="langs"
          key-name="label"
          @cancel="cancel"
          @confirm="confirm"
        ></up-picker>
      </view>
    </view>
  </MMCard>
  <up-button type="primary" class="btn-primary" @click="handleConfirmLogout">退出登录</up-button>
  <up-modal :show="logoutShow">
    <view class="text-18px py-24px color-text-1">确认退出登录？</view>
    <template #confirmButton>
      <view class="flex justify-between text-center gap-20px">
        <view class="btn-default flex-1" @click="handleCancel">取消</view>
        <view class="btn-primary flex-1" @click="handleConfirm">确定</view>
      </view>
    </template>
  </up-modal>
  <MTabBar></MTabBar>
</template>

<script setup lang="ts">
  import { onLaunch } from '@dcloudio/uni-app'
  import { useUserStore } from '@/stores/modules/userStore'
  import { useAppStore } from '@/stores/modules/appStore'
  import MMCard from '@/components/MCard/index'

  defineOptions({ name: 'Mine' })

  const userStore = useUserStore()
  const appStore = useAppStore()

  const showLang = ref(false)
  const langs = ref([appStore.langs])
  const confirm = (e) => {
    appStore.setLang(e.value[0].value)
    showLang.value = false
    console.log('lang-', uni.getLocale())
  }
  const cancel = (e) => {
    showLang.value = false
  }

  const logoutShow = ref(false)
  const handleCancel = () => {
    logoutShow.value = false
  }
  const handleConfirmLogout = () => {
    logoutShow.value = true
  }
  const handleConfirm = () => {
    onLogout()
  }
  const onLogout = () => {
    userStore.logoutAction().then((res) => {
      if (res) {
        uni.reLaunch({
          url: '/pages/login/index',
        })
      }
    })
  }

  onLaunch(() => {
    uni.hideTabBar()
  })
</script>
