<!--
 * @Author: wjc
 * @Date: 2024-06-17 16:02:59
 * @LastEditors: wjc
 * @LastEditTime: 2024-07-10 11:40:21
 * @Description: 
-->
<template>
  <MCard>
    <view>{{ userStore.userInfo.name }}</view>
  </MCard>
  <MCard :space="true" direction="horizontal" justify="between">
    <view>深色模式</view>
    <up-switch v-model="appStore.isDark"></up-switch>
  </MCard>
  <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 { useUserStore } from '@/stores/modules/userStore'
  import { useAppStore } from '@/stores/modules/appStore'

  defineOptions({ name: 'Mine' })

  const userStore = useUserStore()
  const appStore = useAppStore()
  const logoutShow = ref(false)

  const originNavBarStyle = computed(() => {
    if (appStore.isDark) {
      return {
        frontColor: '#ffffff',
        backgroundColor: '#1a1a1a',
        animation: {
          duration: 0,
          timingFunc: 'easeIn',
        },
      }
    } else {
      return {
        frontColor: '#000000',
        backgroundColor: '#f8f8f8',
        animation: {
          duration: 0,
          timingFunc: 'easeIn',
        },
      }
    }
  })

  // watch(
  //   () => appStore.isDark,
  //   (value) => {
  //     if (value) {
  //       uni.setNavigationBarColor({
  //         frontColor: '#ffffff',
  //         backgroundColor: '#1a1a1a',
  //         animation: {
  //           duration: 0,
  //           timingFunc: 'easeIn',
  //         },
  //       })
  //     } else {
  //       uni.setNavigationBarColor({
  //         frontColor: '#000000',
  //         backgroundColor: '#f8f8f8',
  //         animation: {
  //           duration: 0,
  //           timingFunc: 'easeIn',
  //         },
  //       })
  //     }
  //   }
  // )

  const handleCancel = () => {
    logoutShow.value = false
  }
  const handleConfirmLogout = () => {
    logoutShow.value = true
  }

  const handleConfirm = () => {
    onLogout()
  }

  const onLogout = () => {
    userStore.logoutAction().then((res) => {
      if (res) {
        uni.navigateTo({
          url: '/pages/login/index',
        })
      }
    })
  }
</script>
