<script setup>
const route = useRoute();
const router = useRouter();
const store = useStore();
const inited = ref(false);
const nav = [
  { label: "Document", path: "http://lite.techui.net/docs" },
  { label: "Gtihub", path: "https://github.com/ayin86/techui-vue3-lite" },
  { label: "Premium", path: "http://techui.net/docs/" },
];

const langs = [
  { label: "简中", value: "cn" },
  { label: "繁中", value: "hk" },
  { label: "English", value: "en" },
];

const goToLink = (item) => {
  window.open(item.path);
};

const changLang = (item) => {
  store.state.lang = item.value;
  if (item.value == "cn") {
    router.push("/dashboardA-cn");
  } else if (item.value == "hk") {
    router.push("/dashboardA-hk");
  } else if (item.value == "en") {
    router.push("/dashboardA-en");
  }
};

onMounted(() => {
  inited.value = true;
});
</script>
<template>
  <div :class="`external-wrap ${inited && 'inited'}`">
    <div class="link-wrap">
      <div class="item" @click="goToLink(item)" v-for="item in nav">
        {{ item.label }}
      </div>
    </div>
    <div class="lang-switch">
      <div
        :class="`item ${store.state.lang == item.value ? 'active' : ''}`"
        @click="changLang(item)"
        v-for="(item, index) in langs"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<style lang="less">
.external-wrap {
  .poa;
  left: 40px;
  top: 0;
  display: flex;
  z-index: 20;
  .link-wrap {
    display: flex;
    .item {
      padding: 10px;
      .fc(@bld6);
      .por;
      cursor: pointer;
      .ani;
      &:hover {
        .fc(@cbl5);
      }
    }
  }
  .lang-switch {
    display: flex;
    .por;
    margin: 0 0 0 10px;
    padding: 0 0 0 10px;
    &:before {
      content: "";
      .bdl(@bld6);
      .poa;
      left: 0;
      top: 10px;
      bottom: 10px;
    }
    .item {
      padding: 10px;
      .fc(@bld6);
      .por;
      cursor: pointer;
      .ani;
      &:before {
        .poa;
        top: 0;
        left: 50%;
        .bdr(0 0 10px 10px);
        .fixc("x");
        width: 0%;
        opacity: 0;
        .ani;
        content: " ";
        height: 5px;
        .bgc(@cbl6);
      }
      &:hover {
        .fc(@cbl5);
      }
      &.active {
        .fc(@cbl3);
        &:before {
          opacity: 1;
        }
      }
    }
  }
  &.inited {
    .active {
      &:before {
        width: 90%;
      }
    }
  }
}
</style>