<template>
  <div class="Container">
    <TopView></TopView>
    <div class="baseBackGroundColor titleContainer">{{ itemTitleStr }}</div>
    <div class="main-container">
      <!-- 左侧导航栏 -->
      <nav class="sidebar">
        <ul>
          <div class="itemStyle" @click="selectTab('about')">
            <li :class="{ active: selectedTab === 'about' }">{{ $t('关于我们') }}</li>
            <img
              style="width: 20px; height: 20px"
              :src="selectedTab === 'about' ? downArrow : rightArrow"
            />
          </div>
          <!--  ---------------------------   -->
          <div class="itemStyle" @click="selectTab('investment')">
            <li :class="{ active: selectedTab === 'investment' }">{{ $t('投资领域') }}</li>
            <img
              style="width: 20px; height: 20px"
              :src="selectedTab === 'investment' ? downArrow : rightArrow"
            />
          </div>
          <!--  ---------------------------   -->
          <div class="itemStyle" @click="selectTab('honor')">
            <li :class="{ active: selectedTab === 'honor' }">{{ $t('业界荣誉') }}</li>
            <img
              style="width: 20px; height: 20px"
              :src="selectedTab === 'honor' ? downArrow : rightArrow"
            />
          </div>
        </ul>
      </nav>

      <!-- 右侧内容区域 -->
      <div class="content">
        <component :is="currentComponent" />
      </div>
    </div>
    <BottomView></BottomView>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import InvestmentView from '../views/InvestmentAreas.vue'
import IndustryView from '../views/IndustryHonors.vue'
import AboutView from '../views/AboutView.vue'

import BottomView from '@/components/BottomView.vue'
import TopView from '@/components/TopView.vue'
import { useRoute } from 'vue-router'
import { makeRequiredProp } from 'vant/lib/utils'
import { useI18n } from 'vue-i18n'

import downArrow from '@/assets/images/downArrow.png'
import rightArrow from '@/assets/images/rightArrow.png'

const { locale } = useI18n()

const route = useRoute()

const selectedTab = ref(route.query.selectEn)
const itemTitle = ref(route.query.selectedItem)

const selectTab = (tab) => {
  selectedTab.value = tab
  // if (tab === 'about') {
  //   itemTitle.value = '关于我们'
  // } else if (tab === 'investment') {
  //   itemTitle.value = '投资领域'
  // } else {
  //   itemTitle.value = '业界荣誉'
  // }
}

const itemTitleStr = computed(() => {
  if (locale.value === 'en-US') {
    if (selectedTab.value === 'about') {
      itemTitle.value = 'About Us'
    } else if (selectedTab.value === 'investment') {
      itemTitle.value = 'Investment Areas'
    } else {
      itemTitle.value = 'Industry Honors'
    }
  } else if (locale.value === 'zh-CN') {
    if (selectedTab.value === 'about') {
      itemTitle.value = '关于我们'
    } else if (selectedTab.value === 'investment') {
      itemTitle.value = '投资领域'
    } else {
      itemTitle.value = '业界荣誉'
    }
  }
  return itemTitle.value
})

const currentComponent = computed(() => {
  const components = {
    about: AboutView,
    investment: InvestmentView,
    honor: IndustryView
  }
  return components[selectedTab.value]
})
</script>

<style scoped>
.Container {
  width: 100%;
  background-color: white;
}
.titleContainer {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00243c;
  font-size: 16px 微软雅黑;
  font-weight: bold;
}
.main-container {
  display: flex;
}

.sidebar {
  padding-top: 50px;
  justify-content: end;
  width: 300px;
  /* height: 100%; */
  border-right: 0.5px solid #ddd;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 15px 20px;
  cursor: pointer;
  color: #000;
  text-align: end;
  margin-right: 50px;
}

.sidebar li.active {
  font-weight: bold;
  color: #6fb600;
}

.content {
  flex: 1;
  padding: 20px;
}

.itemStyle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  padding-right: 40px;
  justify-content: end;
  text-align: end;
}
</style>
