<!--
  <vue-open-header></vue-open-header>
-->
<template>
  <div class="open-header border-box">
    <div class="open-header-wrap border-box flex ">
      <div class="open-header-left" @click="toHome"><img src="../assets/logo_01.png" alt="" /></div>
      <div class="open-header-right">
        <ul class="flex">
          <li v-for="(item, index) in openMenuData" :key="index + 'menu'" class="menu-li border-box" @click.stop.prevent="toRedirect(item)">
            <span>{{ item.menuName }}</span
            ><span v-if="item.children && item.children.length"><i class="font_family icon-arrow_right color-16214a font-12"></i></span>
            <div v-if="item.children && item.children.length" class="menu-child">
              <ul class="child-menu-ul">
                <li v-for="(childItem, child) in item.children" :key="child + 'child'" class="child-item-menu" @click.stop.prevent="toRedirect(childItem)">{{ childItem.menuName }}</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vue-open-header',
  data() {
    return {
      openMenuData: [
        {
          menuName: '开发者接入',
          menuUrl: '/document?currentTab=2'
        },
        {
          menuName: '解决方案',
          menuUrl: '/document?currentTab=1'
        },
        {
          menuName: '开发者中心',
          menuUrl: ''
        },
        {
          menuName: '服务市场',
          menuUrl: '',
          children: [
            {
              menuName: '好办服务市场',
              menuUrl: ''
            },
            {
              menuName: 'GIC服务市场',
              menuUrl: ''
            }
          ]
        },
        {
          menuName: '达摩官网',
          menuUrl: ''
        }
      ]
    };
  },

  methods: {
    toRedirect(item) {
      const that = this;
      that.$router.push(item.menuUrl);
    },
    toHome() {
      const that = this;
      that.$router.push('/home');
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        // console.log('获取当前路由:', val);
      },
      // 深度观察监听
      deep: true
    }
  },
  /* 接收数据 */
  mounted() {
    var that = this;
    that.pathName = that.$route.path;
  }
};
</script>

<style lang="less" scoped>
.open-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 58px;
  line-height: 58px;
  background: #fff;
  border-bottom: 1px solid #e1e6f0;
  z-index: 3;
  &-wrap {
    width: 1200px;
    margin: 0 auto;
    height: 58px;
    line-height: 58px;
    .open-header-left {
      cursor: pointer;
      img {
        display: inline-block;
        vertical-align: middle;
        padding-right: 36px;
      }
      span {
        font-size: 17px;
      }
    }
    .open-header-right {
      ul {
        .menu-li {
          position: relative;
          margin-right: 32px;
          height: 58px;
          line-height: 58px;
          font-size: 14px;
          color: #16214a;
          cursor: pointer;
          .icon-arrow_right {
            display: inline-block;
            padding: 0 4px;
            font-size: 12px;
            -webkit-transition: 0.3s all;
            -moz-transition: 0.3s all;
            -o-transition: 0.3s all;
            -ms-transition: 0.3s all;
            transition: 0.3s all;
          }
          &:hover {
            color: #4c70e8;
            border-bottom: 2px solid #4c70e8;
            .icon-arrow_right {
              color: #4c70e8;
              -webkit-transform: rotate(180deg);
              -moz-transform: rotate(180deg);
              -o-transform: rotate(180deg);
              -ms-transform: rotate(180deg);
              transform: rotate(180deg);
            }
            .menu-child {
              display: block;
            }
          }
          .menu-child {
            display: none;
            position: absolute;
            top: 58px;
            left: -30px;
            width: 140px;
            // border: 1px solid #ebeef5;
            border-radius: 0px;
            background: #ffffff;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
            z-index: 1;
            .child-menu-ul {
              padding: 20px 0 20px 32px;
            }
            .child-item-menu {
              line-height: 40px;
              margin: 0;
              cursor: pointer;
              outline: none;
              font-size: 14px;
              color: #16214a;
              &:hover {
                color: #4c70e8;
              }
            }
          }
        }
      }
    }
  }
}
</style>
