<template>
  <header class="header">
    <div class="header__logo" @click="$router.push(routeUrl)">
      <img :src="imgLogo"/>
      {{title}}
    </div>
    <ul class="header__nav">
      <li class="header__nav--item">
        <language :lang="lang" @on-change="changeLangFunc"></language>
      </li>
      <li class="header__nav--item" @click="handleClickMsg">
        <span class="icon icon-clock">
        </span>
        <sup class="msg">
          {{messages}}
        </sup>
      </li>
      <li class="header__nav--item" @click="handleChangeSkin">
        <span class="icon icon-skin">
        </span>
        <win-select :selectData="themeColor"
                    @on-change="handleSkinFunc"
                    :flagDrop.sync="flagDrop"></win-select>
      </li>
      <li class="header__nav--item" @click="handleChangeServe">
        <span :class="`avatar ${selectedTheme}`"></span>
        <span class="name">{{account}}</span>
      </li>
    </ul>
  </header>
</template>
<script>
import Language from '../language/language';
import imgLogo from '../../../static/images/img-logo.png';
import WinSelect from '../select/select';

export default {
  name: 'win-header',
  props: {
    title: {
      type: String,
      default: '工作台',
    },
    messages: {
      type: Number,
      default: 0,
    },
    account: {
      type: String,
      default: '用户名',
    },
    routeUrl: {
      type: String,
      default: '/',
    },
    lang: {
      type: String,
      default: 'zh-CN',
    },
  },
  data() {
    return {
      imgLogo,
      navData: [{
        name: '',
        route: '',
        index: '0',
        icon: 'icon-clock',
      }, {
        name: '',
        route: '',
        index: '1',
        icon: 'icon-skin',
      }],
      flagDrop: false,
      themeColor: {
        'theme-1': '主题一',
        'theme-2': '主题二',
        'theme-3': '主题三',
        'theme-4': '主题四',
        'theme-5': '主题五',
      },
      selectedTheme: '',
    };
  },
  components: {
    WinSelect,
    Language,
  },
  mounted() {
  },
  created() {
  },
  methods: {
    handleChangeSkin() {
      // 点击换肤回调事件
      this.flagDrop = !this.flagDrop;
    },
    handleClickMsg() {
      // 点击消息回调事件
      this.$emit('on-click');
    },
    handleChangeServe() {
      // 点击选择服务范围
      this.$emit('serve-change');
    },
    changeLangFunc(msg) {
      // 点击切换语言
      this.$emit('lang-change', msg);
    },
    handleSkinFunc(msg) {
      // 点击换肤
      this.selectedTheme = msg;
      this.$emit('skin-change', msg);
    },
  },
};
</script>
<style scoped>
  .header{
    position: absolute;
    top: 0;
    width: 100%;
    height: 60px;
    background: #1243BA;
    z-index: 100;
    box-shadow: 0 3px 4px 0 rgba(0,31,106,0.36);
  }
  .header__logo{
    margin-left: 20px;
    height: 100%;
    float: left;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 60px;
    cursor: pointer;
    text-align: left;
  }
  .header__logo img{
    height: 34px;
    margin-right: 15px;
    vertical-align: middle;
  }
  .header__nav{
    float: right;
    height: 100%;
    margin: 0;
    line-height: 60px;
  }
  .header__nav--item{
    float: left;
    list-style: none;
    position: relative;
    cursor: pointer;
  }
  .header__nav--item .icon{
    display: block;
    height: 60px;
    color: #ffffff;
  }
  .header__nav--item .icon.icon-clock{
    width: 22px;
    background: url("../../../static/images/icon-clock.png") no-repeat center;
  }
  .header__nav--item .icon.icon-skin{
    margin-left: 30px;
    width: 28px;
    background: url("../../../static/images/icon-skin.png") no-repeat center;
  }
  .header__nav--item .msg{
    position: absolute;
    right: -14px;
    top: 10px;
    background: #EC0000;
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
  }
  .header__nav--item .name{
    margin-right: 30px;
    font-size: 16px;
    color: #FFFFFF;
    text-align: left;
  }
  .header__nav--item .avatar{
    display: inline-block;
    width: 36px;
    height: 37px;
    background: url("../../../static/images/img-avatar.png") no-repeat;
    margin: 0 10px 0 36px;
    vertical-align: middle;
    background-position: 0 0;
  }
  .header__nav--item .avatar.theme-1{
    background-position: 0 -112px;
  }
  .header__nav--item .avatar.theme-5{
    background-position: 0 -55px;
  }
</style>
