<template>
  <div class="topBox">
    <div class="logoBox" @click="go('/')">
      <img src="../../assets/img/logo.png" alt class="logo">
      <div class="logoTitle">metavatar</div>
    </div>
    <div class="categoryBox">
      <div class="categoryitem">{{characters==1?'产品能力':'Product'}}</div>
      <div class="categoryitem">{{characters==1?'创新技术':'Technology'}}</div>
      <div class="categoryitem">{{characters==1?'解决方案':'Solutions'}}</div>
      <!-- <div class="categoryitem">{{characters==1?'精选案例':'Cases'}}</div> -->
      <div class="categoryitem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div>
    </div>
    <div class="cutBox">
      <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: "Cn",
          value: 1,
          url: require("../../assets/img/cn.jpeg")
        },
        {
          name: "En",
          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);
    },
    go(url){
      this.$router.push(url)
    },
  },
  mounted() {
    console.log(this.languageLsit, "characters");
  }
};
</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;
}
.categoryitem:hover{
  background-color: #1358ba;
}
.cutBox {
  float: right;
  margin-top: 20px;
  margin-right: 50px;
  overflow: hidden;
  cursor: pointer;
}
.cutImg {
  width: 30px;
  height: 20px;
  float: left;
  margin-top: 6px;
  margin-right: 10px;
}
.en {
  float: left;
  font-size: 15px;
}
.el-select{
  width: 120px;
}
</style>


