<script lang="ts" setup>
import {debounce} from "throttle-debounce"
import Config from "@/config"
import {useConfigStore} from "@/store"
import {setDayjsLocale, setWotDesignLocale} from "@/plugin"

const {t} = useI18n()
const {locale} = useI18n()
const configStore = useConfigStore()

// 语言选项 - 参考组件的语言配置
const languageOptions = ref([
  {
    name: "English",
    systemValue: "en",
    selected: false
  },
  {
    name: "中文",
    systemValue: "zh-Hans",
    selected: false
  }
])

// 初始化当前语言选择状态
const initLanguageSelection = () => {
  const currentLocale = uni.getLocale()
  languageOptions.value.forEach(option => {
    option.selected = option.systemValue === currentLocale
  })
}

// 选择语言
const selectLanguage = (selectedValue: string) => {
  languageOptions.value.forEach(option => {
    option.selected = option.systemValue === selectedValue
  })
}

// 确认语言选择 - 参考组件的切换逻辑
const confirmLanguage = () => {
  const selectedLanguage = languageOptions.value.find(option => option.selected)
  if (selectedLanguage) {
    const localeLanguages = uni.getLocale()
    console.log(localeLanguages)

    if (selectedLanguage.systemValue === uni.getLocale()) {
      // 如果选择的语言和当前语言相同，直接跳转
      uni.redirectTo({
        url: '/pages-login/pages/index'
      })
      return
    }

    // 设置语言 - 使用组件相同的方法
    uni.setLocale(selectedLanguage.systemValue)
    locale.value = selectedLanguage.systemValue
    setWotDesignLocale()
    setDayjsLocale()

    // #ifdef APP-PLUS
    if (configStore.isIos) {
      setTimeout(() => {
        plus.runtime.restart()
      }, 1000)
    }
    // #endif

    // 显示成功提示
    uni.showToast({
      title: t('pages-login.choose-language.success'),
      icon: 'none'
    })

    // 延迟跳转到登录页面
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/home/index'
      })
    }, 1500)
  }
}

// 使用防抖处理确认操作
const handleConfirm = debounce(Config.debounceShortTime, confirmLanguage, {
  atBegin: true,
})

// 页面加载时初始化语言选择
onMounted(() => {
  initLanguageSelection()
})
</script>

<template>
  <view class="language-container">

    <!-- 欢迎文字 -->
    <view class="welcome-section">
      <text class="welcome-text">{{ t('pages-login.choose-language.title') }}</text>
    </view>

    <!-- 语言选择列表 -->
    <view class="language-list">
      <view
          v-for="option in languageOptions"
          :key="option.systemValue"
          class="language-item"
          @click="selectLanguage(option.systemValue)"
      >
        <view class="language-card">
          <view v-show="option.selected" class="i-carbon:checkmark-filled text-primary"></view>
          <view v-show="!option.selected" class="i-carbon:circle-outline text-#CCCCCC"></view>
          <text :class="{ 'selected': option.selected }" class="language-name">{{ option.name }}</text>
        </view>
      </view>
    </view>

    <!-- 提示文字 -->
    <view class="tip-section">
      <text class="tip-text">{{ t('pages-login.choose-language.tip') }}</text>
    </view>

    <!-- 确认按钮 -->
    <view class="confirm-section">
      <view class="confirm-button" @click="handleConfirm">
        <text class="confirm-text">{{ t('pages-login.choose-language.confirm') }}</text>
      </view>
    </view>
  </view>
</template>

<style>
page {
  background-color: white;
}
</style>
<style lang="scss" scoped>
.welcome-section {
  padding: 286rpx 32rpx 0;

  .welcome-text {
    font-size: 52rpx;
    font-weight: 500;
    color: #333333;
    line-height: 60rpx;
  }
}

.language-list {
  padding: 104rpx 32rpx 0;

  .language-item {
    margin-bottom: 28rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .language-card {
      width: 686rpx;
      height: 90rpx;
      background-color: #FFFFFF;
      border: 2rpx solid #E8E8E8;
      border-radius: 46rpx;
      padding: 0 32rpx;
      display: flex;
      align-items: center;
      gap: 24rpx;

      .radio-button {
        .radio-outer {
          width: 32rpx;
          height: 32rpx;
          border: 2rpx solid #666666;
          border-radius: 50%;
          background-color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;

          &.selected {
            border-color: #000;
          }

          .radio-inner {
            width: 20rpx;
            height: 20rpx;
            background-color: #000;
            border-radius: 50%;
          }
        }
      }

      .language-name {
        font-size: 26rpx;
        color: #666666;
        line-height: 36rpx;

        &.selected {
          color: #000;
          font-weight: 500;
        }
      }
    }
  }
}

.tip-section {
  padding: 324rpx 76rpx 0;

  .tip-text {
    font-size: 26rpx;
    color: #666666;
    line-height: 36rpx;
    text-align: center;
    display: block;
  }
}

.confirm-section {
  padding: 54rpx 32rpx 0;

  .confirm-button {
    width: 686rpx;
    height: 92rpx;
    background-color: #000;
    border-radius: 46rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.3);

    .confirm-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 44rpx;
    }
  }
}
</style>
