<template>
  <div class="page-head">
    <div>
      <el-image :src="require('../../../assets/login1/comLogo.svg')" style="width: 136px; height: 42px;" @click="toNet" />
      <div v-for="(item, index) in bannerList" :key="index" style="display: inline-block;" :class="activeIndex === index ? 'active-menu' : ''" @click="toPage(index)">
        <span v-if="index !== 1">{{ item }}</span>
        <el-dropdown v-else trigger="click" @command="toProduct">
          <span class="el-dropdown-link">
            产品服务<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">长银e融</el-dropdown-item>
            <el-dropdown-item command="2">长银e贸</el-dropdown-item>
            <el-dropdown-item command="3">长银钱包</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div>
      <el-button type="primary" @click="$emit('btnClick', 'login')">登 录</el-button>
      <el-button type="primary" @click="$emit('btnClick', 'register')">注册</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageHeader',
  data() {
    return {
      bannerList: ['首页', '产品服务', '外贸工具', '关于我们'],
      activeIndex: 0
    }
  },
  watch: {
    activeIndex: {
      handler: function(val) {
        this.$emit('changeMenu', val)
      },
      immediate: true
    }
  },
  methods: {
    toPage(info) {
      this.activeIndex = info
    },
    toProduct(info) {},
    toNet() {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.page-head {
  width: 100vw;
  height: 70px;
  position: fixed;
  left: 0;
  top: 0;
  border-bottom: 1px solid #E5E7EB;
  padding: 0 100px;
  background-color: #ffffff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-direction: row;
  line-height: 70px;
  .el-image {
    vertical-align: middle;
    cursor: pointer;
  }
  span {
    display: inline-block;
    margin-left: 70px;
    color: #131820;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
  }
  .active-menu span {
    color: #FE7D0B
  }
}
</style>
