<template>
  <div class="header_topBar">
    <router-link to="/homePage" style="cursor: pointer; display: flex">
      <img class="tabar_logo" src="../../public/logo.png" alt="土星云" />
      <span class="tabar_title">土星云</span>
    </router-link>
    <div class="navBar">
      <div class="navBarLine"></div>
      <div class="navBarLine"></div>
      <div class="navBarLine"></div>
      <van-dropdown-menu>
        <van-dropdown-item
          :value="active"
          :options="list"
          @change="toHandler"
        />
      </van-dropdown-menu>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        { text: '首页', to: '/' },
        { text: '私有云', to: '/' },
        { text: '公有云', to: '/publicScs' },
        { text: '生态合作', to: '/cooperate' },
        { text: '关于我们', to: '/aboutUs' },
        { text: '控制台', to: 'https://xxyy.co/#/dashboard', target: '_blank' },
      ],
    }
  },
  computed: {
    active() {
      return this.list.find((item) => item.to === this.$route.path)?.value || 0
    },
    list() {
      return this.options.map((item, value) => ({
        ...item,
        value,
      }))
    },
  },
  methods: {
    toHandler(ind) {
      const path = this.options[ind].to
      if (path.startsWith('http')) {
        window.open(path)
      } else {
        this.$router.push(path)
      }
    },
  },
}
</script>
