<template>
  <div class="sign-layout">
    <div class="sign-layout__wrapper">
      <el-dropdown class="language" trigger="click">
        <el-button link>
          <span>{{ languageLabel }}</span>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <template v-for="item in languages" :key="item.value">
              <el-dropdown-item @click="switchLanguage(item.value)">{{ item.label }}</el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div style="box-shadow: 0 10px 15px rgba(42, 65, 93, 0.1);">
        <div class="header">
          <div>{{ t('app.name') }}</div>
          <div class="header-version">v1.0.{{ version }}</div>
        </div>
        <div class="body">
          <div class="body-container">
            <h1 class="body-title">{{ title }}</h1>
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { getLanguageList, getLanguageLabelByValue, Language } from '@/constants/language'
import { i18n } from '@/stores'
import { localData } from '@/stores/storage'
import service from '@/services'

defineProps({
  title: {
    type: String,
    required: true,
  },
})

const t = i18n.global.t

const meta = document.getElementsByTagName('meta')
const version = meta.namedItem('revised')?.content ?? '0'

// 语言列表
const languages = computed(() => {
  const languageList = getLanguageList()
  const values = service.getConfig('locales')
  return values.length ? languageList.filter((e) => values.includes(e.value)) : languageList
})

// 当前语言
const languageLabel = computed(() => getLanguageLabelByValue(i18n.global.locale))

// 切换语言
const switchLanguage = (lange: Language) => {
  if (i18n.global.locale !== lange) {
    //i18n.global.locale = lange
    localData.setValue('appLanguage', lange)
    location.reload() // 强制刷新页面
  }
}
</script>

<style lang="less">
@import './index.less';
</style>