<template>
  <div class="topBox" ref="scrollDiv">
    <div class="logoBox" @click="go('/')">
      <img
        src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/logo.png"
        alt
        class="logo"
      />
      <div class="logoTitle">metavatar</div>
    </div>

    <div class="categoryBox">
      <div class="categoryitem">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{ characters == 1 ? "产品能力" : "Products" }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="MetaGene">
              {{ characters == 1 ? "邃芒慧生" : "MetaGene" }}
            </el-dropdown-item>
            <el-dropdown-item command="MetaStream">{{
              characters == 1 ? "邃芒慧播" : "MetaStreaming"
            }}</el-dropdown-item>
            <el-dropdown-item command="MetaManeuver">{{
              characters == 1 ? "邃芒慧影" : "MetaNeuver"
            }}</el-dropdown-item>
            <el-dropdown-item command="MetaTuring">{{
              characters == 1 ? "邃芒慧侃" : "MetaTuring"
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="categoryitem" @click="goView('Technology')">
        {{ characters == 1 ? "创新技术" : "Technology" }}
      </div>
      <div class="categoryitem" @click="goView('Solutions')">
        {{ characters == 1 ? "解决方案" : "Solutions" }}
      </div>
      <!-- <div class="categoryitem" @click="goView('Cases')">
        {{ characters == 1 ? "经典案例" : "Cases" }}
      </div> -->

      <div class="categoryitem" @click="goView('aboutUs')">
        {{ characters == 1 ? "关于我们" : "About us" }}
      </div>
    </div>
    <div class="cutBox">
      <!-- <img src="@/assets/img/earth.png" alt="" /> -->
      <div class="en">
        <el-select v-model="charactersMy" placeholder="请选择" @change="change">
          <el-option
            v-for="item in languageLsit"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
            <div class>
              <!-- <img :src="item.url" alt class="cutImg" /> -->
              <span>{{ item.name }}</span>
            </div>
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "top",
  data() {
    return {
      languageLsit: [
        {
          name: "中文(中国)",
          value: 1,
          url: require("../../assets/img/cn.jpeg"),
        },
        {
          name: "English(USA)",
          value: 2,
          url: require("../../assets/img/en.jpg"),
        },
      ],
      charactersMy: 1,
    };
  },
  watch: {
    // languageLsit(newVal) {
    //   this.setCharacters([
    //     {
    //       name: "Cn",
    //       value: 1
    //     },
    //     {
    //       name: "En",
    //       value: 2
    //     }
    //   ]);
    // }
  },
  computed: {
    ...mapState({
      characters: (state) => state.publicObj.characters,
    }),
  },
  methods: {
    ...mapActions(["setCharacters"]),
    change(value) {
      console.log(value);
      this.setCharacters(value);
    },
    handleCommand(path) {
      this.$router.push(`/${path}`);
    },
    goView(id) {
      if (id == "Technology" || id == "Solutions") {
        this.$router.push(`/`);
        setTimeout(() => {
          document.querySelector("#" + id).scrollIntoView({
            behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
            block: "start", //定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
            inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
          });
        }, 100);
      } else {
        document.querySelector("#" + id).scrollIntoView({
          behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
          block: "start", //定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
          inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
        });
      }
    },
    goPage(path) {
      this.$router.push(path);
      // this.goView(path);
    },
    go(url) {
      this.$router.push(url);
    },
    // 滚动到顶部
    handleScrollTop() {
      this.$nextTick(() => {
        let scrollElem = this.$refs.scrollDiv;
        scrollElem.scrollTo({ top: 0, behavior: "smooth" });
      });
    },
  },
  mounted() {
    console.log(this.languageLsit, "characters");
  },
  created() {
    this.handleScrollTop();
  },
};
</script>

<style lang="scss" scoped>
.topBox {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
}
.logoBox {
  margin-top: 20px;
  margin-left: 35px;
  margin-bottom: 20px;
  float: left;
  overflow: hidden;
  cursor: pointer;
}
.logo {
  float: left;
  width: 60px;
  height: 30px;
}
.logoTitle {
  float: left;
  line-height: 30px;
  margin-left: 10px;
  font-size: 22px;
}
.categoryBox {
  height: 30px;
  width: 30%;
  float: left;
  margin-top: 20px;
  margin-left: 6%;
  display: flex;
  justify-content: space-between;
}
.categoryitem {
  line-height: 30px;
  color: #7d7d7d;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
}
.categoryitem:hover {
  color: #16e9d6;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #16e9d6;
  color: #fff;
}
.cutBox {
  float: right;
  margin-top: 20px;
  margin-right: 100px;
  cursor: pointer;
  img {
    position: relative;
    bottom: 3px;
    float: left;
    width: 45px;
    height: 45px;
    margin-right: 5px;
  }
}
.cutImg {
  width: 30px;
  height: 20px;
  float: left;
  margin-top: 6px;
  margin-right: 10px;
}
.en {
  float: left;
  font-size: 15px;
}
.el-select {
  width: 150px;
}
.el-dropdown-link {
  transition: all 0.3s;
  &:hover {
    color: #16e9d6;
  }
}
</style>
