<template>
  <div class="header">
    <div class="sys-title">
      付款平台系统
    </div>

    <div class="avatar-box">
      <Tooltip
        content="集团总部"
        style="margin-right:20px;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-CN">
            {{ $t("中文") }}
          </DropdownItem>
          <DropdownItem name="en-US">
            {{ $t("英文") }}
          </DropdownItem>
          <DropdownItem name="zh-TW">
            {{ $t("繁体") }}
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Dropdown @on-click="loginOut">
        <a href="javascript:void(0)">
          <img
            src="../../assets/images/avatar.jpg"
            alt
          />
          {{ username }}
        </a>
        <DropdownMenu
          v-if="username"
          slot="list"
        >
          <DropdownItem
            divided
            name="loginout"
          >
            <Icon
              type="ios-exit-outline"
              size="16"
            />&nbsp;退出登录
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>
<script>
import { switchLang } from '@paymentPlatformSrc/api/server.js';
export default {
  data() {
    const curLange = {
      'zh-CN': this.$t('中文'),
      'en-US': this.$t('英文'),
      'zh-tw': this.$t('繁体')
    }[window.localStorage.getItem('lang')] || this.$t('中文');
    return {
      curLange,
      path: ''
    };
  },
  computed: {
    username() {
      return this.$store.state.paymentWorktable.username;
    }
  },
  methods: {
    langeChange(name) {
      if (!name) {
        return;
      }
      switchLang({ language: name }).then(response => {
        if (response.statusCode == '0') {
          this.$i18n.locale = name;
          this.curLange = {
            'zh-CN': this.$t('中文'),
            'en-US': this.$t('英文'),
            'zh-tw': this.$t('繁体')
          }[name];
          window.localStorage.setItem('lang', name);
          // this.$Message.success(this.$t('切换语言成功'));
          location.reload();
        } else {
          this.$Message.error(this.$t('切换语言失败'));
        }
      });
    },
    loginOut(name) {
      this.$axios.post('/ems-base-application/mams/sys/logout').then(res => {
        if (res.data.statusCode === '0') {
          window.sessionStorage.clear();
          localStorage.clear();
          this.$router.push({ path: '/login' });
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 200px;
  z-index: 11;
  height: 48px;
  line-height: 48px;
  background: #fff;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  transition: all 0.2s ease-in-out;
  display: block;
  .sys-title {
    position: absolute;
    left: 16px;
    color: rgb(249, 156, 52);
    font-weight: bolder;
    font-size: 20px;
  }
  .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>
