<template>
  <div class="header">
    <div class="layout-breadcrumb">
      <i-button type="text">
        <Icon
          type="ios-refresh"
          size="24"
        ></Icon>
      </i-button>
      <Breadcrumb>
        <Breadcrumb-item to="/">
          首页
        </Breadcrumb-item>
      </Breadcrumb>
    </div>

    <div class="avatar-box">
      <Tooltip
        content="集团总部"
        style="font-size:14px;"
      >
        集团总部
      </Tooltip>
      <Dropdown
        placement="bottom-start"
        @on-click="langeChange"
      >
        <div style="display: inline-block;font-size:14px;text-align: center;padding: 0 20px;">
          {{ curLange }}
        </div>
        <DropdownMenu slot="list">
          <DropdownItem name="zh">
            {{ $t("中文") }}
          </DropdownItem>
          <DropdownItem name="en">
            {{ $t("英文") }}
          </DropdownItem>
          <DropdownItem name="tw">
            {{ $t("繁体") }}
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Dropdown @on-click="loginOut">
        <a href="javascript:void(0)">
          <img
            src="../assets/images/avatar.jpg"
            alt
          />
          gogogo
        </a>
        <DropdownMenu slot="list">
          <DropdownItem
            divided
            name="loginout"
          >
            <Icon
              type="ios-exit-outline"
              size="16"
            />&nbsp;退出登录
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>
<script>
// import { loginout }from "@/api/login";
// import {mapState}from 'vuex';

export default {
  data() {
    const curLange = {
      zh: this.$t('中文'),
      en: this.$t('英文'),
      tw: this.$t('繁体')
    }[window.localStorage.getItem('lang')] || this.$t('中文');
    return {
      curLange,
      path: ''
    };
  },
  created() {

  },
  methods: {
    langeChange(name) {
      if (!name) {
        return;
      }
      this.$i18n.locale = name;
      this.curLange = {
        zh: this.$t('中文'),
        en: this.$t('英文'),
        tw: this.$t('繁体')
      }[name];
      window.localStorage.setItem('lang', name);
    },
    loginOut(name) {
    }
  }
};
</script>
<style scoped lang="less">
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 256px;
  z-index: 11;
  height: 64px;
  line-height: 64px;
  background: #fff;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  transition: all 0.2s ease-in-out;
  display: block;
  .ivu-breadcrumb {
    display: inline-block;
  }
  .avatar-box {
    position: absolute;
    right: 16px;
    padding: 0 10px;
    top: 0px;
    display: flex;
    .trigger-box{
      padding: 0 12px;
    }
    a {
      color: #808695;
    }
    img {
      display: inline-block;
      margin-right: 10px;

      width: 25px;
      height: 25px;
      border-radius: 50%;
      vertical-align: middle;
    }
    &>div:hover{
      cursor: pointer;
      background: #f8f8f9;
    }
  }
}
</style>
