<template>
  <el-row id="user" justify="center">
    <div style="height: auto">
      <div class="section-common section-top">
        <div class="bar">
          <div>
            <img :src="logo" alt="" />
          </div>
          <div class="menu-logo chooseLang crm-cursor">
            <img
              v-show="langList[language] == 'ENGLISH'"
              style="width: 15px; height: 10px; margin: 0 4px"
              :src="icon_en"
              alt
            />
            <img
              v-show="langList[language] == '中文简体'"
              style="width: 15px; height: 10px; margin: 0 4px"
              :src="icon_cn"
              alt
            />
            <el-dropdown trigger="click" @command="chooseLang">
              <span class="menu">
                {{ langList[language] }}
                <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="en">English</el-dropdown-item>
                  <el-dropdown-item command="cn">中文简体</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      <el-col class="section-common section-bottom">
        <router-view v-slot="{ Component, route }">
          <component :is="Component" :key="route.path" />
        </router-view>
      </el-col>
    </div>
  </el-row>
</template>

<script lang="ts" setup>
  import { ref, onMounted, inject, getCurrentInstance } from 'vue'
  import { useStore } from 'vuex'
  import { useI18n } from 'vue-i18n'
  import axios from 'axios'
  import { ArrowDown } from '@element-plus/icons-vue'
  // import Service from '@/service/login'
  // 引入图片
  import logo from '@/assets/image/login/admin_LOGO12.png'
  import icon_cn from '@/assets/image/login/CN.jpg'
  import icon_en from '@/assets/image/login/EN.jpg'
  import { log } from 'echarts/types/src/util/log'

  // 注入 reload 方法
  const reload = inject('reload')
  const session = inject('session')
  const store = useStore()
  const { locale } = useI18n()

  // 响应式数据
  const langList = ref({
    en: 'ENGLISH',
    cn: '中文简体',
  })
  const language = ref('')

  // 方法
  const getClientIP = async () => {
    try {
      const res = await axios.get('https://ipinfo.io/json', {})
      if (res.data.ip) {
        sessionStorage.setItem('CLIENT', res.data.ip)
        if (sessionStorage.getItem('CLIENT')) {
          axios.defaults.headers.common['CLIENT'] = sessionStorage.getItem('CLIENT')
        }
      }
    } catch (err) {
      console.error('获取IP失败:', err)
    }
  }
  const initLanguage = () => {
    const savedLang = session.Get('lang')

    if (savedLang) {
      setLanguage(savedLang)
    } else {
      // 根据浏览器语言自动检测
      const browserLang = (navigator.language || navigator.browserLanguage).toLowerCase()
      console.log(browserLang, 'asd')
      const detectedLang = browserLang.indexOf('zh') >= 0 ? 'cn' : 'en'
      chooseLang(detectedLang)
    }
  }

  const setLanguage = (lang) => {
    locale.value = language.value = lang
    axios.defaults.headers.common['Language'] = lang
  }

  const chooseLang = async (key) => {
    setLanguage(key)
    session.Set('lang', key)

    // 调用后端语言切换
    // await switchLanguage(key)

    // 延迟重载页面
    setTimeout(() => {
      // reload()
    }, 500)
  }

  const switchLanguage = async (lang) => {
    try {
      // await Service.switchLanguage({ lang })
    } catch (error) {
      console.error('切换语言失败:', error)
    }
  }

  const toHome = () => {
    store.commit('isActiveTab', '99')
  }

  // 生命周期
  onMounted(async () => {
    console.log('asdasda')
    await getClientIP()
    initLanguage()
  })
</script>

<style lang="scss" scoped>
  #user {
    height: 100%;
    border-top: 1px solid #000000;
    box-sizing: border-box;
    overflow-y: auto;
    @include bg_gray_7();
    .section-common {
      height: auto;
      padding: 25px 0;
      margin: auto;
    }
    .section-top {
      width: 100%;
      display: flex;
      justify-content: center;
      .bar {
        width: 540px;
        padding: 0 40px;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        .chooseLang {
          display: flex;
          align-items: center;
          border: 1px solid transparent;
          @include bg_white();
          border-radius: 50px;
          padding: 5px 8px;
        }
        .el-dropdown {
          i {
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
    .section-right {
      height: auto;
      width: 640px;
      padding-top: 48px;
    }
  }
</style>
