<template>
  <view class="mine-content">
    <MSafeAreaTop />
    <view class="user-container">
      <view class="user">
        <view class="user-avatar">
          <view class="i-custom-avatar wh-102rpx rounded-50%" />
        </view>
        <view class="user-name">
          <view class="font-600 text-38rpx">{{ userStore.user.real_name }}</view>
          <view class="text-color-place text-26rpx">部门</view>
        </view>
      </view>
      <nut-button class="bg-transparent!">
        <template #icon>
          <text class="i-custom-edit?mask wh-44rpx" :class="{ 'color-primary': !themeChecked }" />
        </template>
        编辑
      </nut-button>
    </view>
    <view class="points">
      <view class="points-value">
        <view class="value">2323</view>
        <view class="text">我的积分</view>
      </view>
      <view class="points-actions">
        <view class="lottery-btn btn" type="default">抽奖</view>
        <view class="exchange-btn btn" type="default">兑换</view>
      </view>
    </view>
    <MCard direction="vertical" class="mine-actions">
      <view class="actions-item">
        <view class="i-custom-sm?mask icon" />
        <view class="flex-1">
          <view class="flex items-center justify-between">
            <view class="text">我的消息</view>
            <view class="i-custom-arrow-right wh-16px color-white" />
          </view>
          <MDivider />
        </view>
      </view>
      <view class="actions-item">
        <view class="i-custom-theme?mask icon" />
        <view class="flex-1">
          <view class="flex items-center justify-between">
            <view class="text">{{ $tt('index.dark') }}</view>
            <nut-switch v-model="themeChecked" @change="onChangeTheme" />
          </view>
          <MDivider />
        </view>
      </view>
      <view class="actions-item">
        <view class="i-custom-lang?mask icon" />
        <view class="flex-1">
          <view class="flex items-center justify-between">
            <view class="text">{{ $tt('index.language') }}</view>
            <MPicker v-model="userStore.lang" :columns="langs" @confirm="onConfirmLang" />
          </view>
          <MDivider />
        </view>
      </view>
      <view class="actions-item">
        <view class="i-custom-info?mask icon" />
        <view class="flex-1">
          <view class="flex items-center justify-between">
            <view class="text">版本介绍</view>
            <view class="flex-center text-color-place">
              <text>{{ getAppVersion() }}</text>
              <text class="i-custom-arrow-right wh-16px color-white ml-10rpx" />
            </view>
          </view>
          <MDivider />
        </view>
      </view>
      <view class="actions-item">
        <view class="i-custom-download?mask icon" />
        <view class="flex-1">
          <view class="flex items-center justify-between">
            <view class="text">检查更新</view>
            <view class="i-custom-update wh-36rpx color-white" />
          </view>
        </view>
      </view>
    </MCard>
    <MCard>
      <view class="text-28rpx w-full text-center" @click="handleConfirmLogout">
        {{ $tt('index.logout') }}
      </view>
    </MCard>
    <MDialog :visible="logoutShow" @cancel="handleCancel" @confirm="handleConfirm">
      <view class="text-18px py-24px color-text-1">确认退出登录？</view>
    </MDialog>
  </view>
</template>

<script setup lang="ts">
  import { useUserStore } from '@/stores/modules/userStore'
  import { getAppVersion } from '@/utils'
  import { langs, Theme } from '@/utils/const'

  defineOptions({
    name: 'Mine',
    options: {
      virtualHost: true,
    },
  })
  withDefaults(defineProps<{ scrollPage: boolean }>(), { scrollPage: false })

  const userStore = useUserStore()

  const onConfirmLang = (e) => {
    userStore.setLangAction(e.value)
  }

  const logoutShow = ref(false)
  const handleCancel = () => {
    logoutShow.value = false
  }
  const handleConfirmLogout = () => {
    logoutShow.value = true
  }
  const handleConfirm = () => {
    userStore.logoutAction()
  }

  const themeChecked = ref(userStore.theme === Theme.dark)
  const onChangeTheme = (value: boolean) => {
    userStore.theme = value ? Theme.dark : Theme.light
  }

  onMounted(() => {
    console.log('mine mounted----')
  })
</script>

<style scoped lang="scss">
  .mine-content {
    @apply p-20rpx h-full;
  }
  .user-container {
    @apply mb-33rpx flex items-center justify-between;
    .user {
      @apply gap-16px flex items-center;
      .user-avatar {
        @apply flex-center wh-54px rounded-50% bg-bg-card;
      }
    }
  }
  .points {
    @apply rounded-24rpx px-40rpx py-20rpx mb-24rpx flex items-center justify-between;
    background: linear-gradient(90deg, #ffeebe 0%, #ff9c00 100%);
    .points-value {
      .value {
        @apply color-#9A4300 font-600 text-58rpx line-height-80rpx;
      }
      .text {
        @apply color-#412A00 text-28rpx;
      }
    }
    .points-actions {
      @apply flex;
      .btn {
        position: relative;
        color: white;
        padding: 10px 20px;
        border: none;
      }
      .lottery-btn {
        @apply bg-#E28B00;
        border-radius: 25px 0 0 25px;
      }
      .exchange-btn {
        @apply bg-#974300;
        border-radius: 0 25px 25px 0;
      }
    }
  }
  .mine-actions {
    .actions-item {
      @apply text-14px gap-28rpx flex w-full items-start justify-between;
      --nut-switch-width: 110rpx;
      --nut-switch-height: 54rpx;
      --nut-switch-inside-width: 44rpx;
      --nut-switch-inside-height: 44rpx;
      --nut-switch-border-radius: 28rpx;
      --nut-switch-inside-close-transform: translateX(10%);
      --nut-switch-inside-open-transform: translateX(134%);
      .icon {
        @apply wh-44rpx;
      }
      .text {
        @apply text-28rpx text-color-1;
      }
    }
  }
  // 图标以浅色主题的显示效果为主，深色主题下处理图标的显示
  .dark {
    .mine-content {
      background-image: url('@/static/images/mine-dark-bg.svg');
    }
    .user-container {
      .nut-button {
        border-color: #fff;
      }
    }
    .mine-actions {
      .icon {
        @apply color-white;
      }
    }
  }
</style>
