<template>
  <div class="head">
    <img @click="jumUrl('/')" alt class="logo-img" src="@/assets/logo.png" style="cursor: pointer" />
    <div class="li-box">
      <a-dropdown
        :disabled="item.children.length > 0 ? false : true"
        :key="a"
        class="list-down"
        v-for="(item, a) in list"
      >
        <a @click="jumUrl(item.url)" class="ant-dropdown-link">
          {{ item.name }}&nbsp;&nbsp;
          <a-icon type="down" v-show="item.children.length > 0" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item :key="b" style="text-align: center" v-for="(con, b) in item.children">
            <a @click="jumUrl(con.url)">{{ con.title }}</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <a-icon class="icon-head" style="right: 150px" type="search" />
    <a-tooltip placement="bottom">
      <template slot="title">
        <span>点击查看购物车！</span>
      </template>
      <a-icon
        @click="$router.push('/Cart')"
        class="icon-head baseColor"
        style="right: 100px"
        type="shopping-cart"
      />
    </a-tooltip>
    <router-link tag="span" to="/login">
      <a-icon class="icon-head" style="right: 50px" type="user" />
    </router-link>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      str: '这是头部导航',
      list: [
        {
          name: '关于我们',
          url: '/About/Introduce',
          children: [
            {
              title: '公司介绍',
              url: '/About/Introduce',
            },
            {
              title: '组织机构',
              url: '/About/Organ',
            },
            {
              title: '合作伙伴',
              url: '/About/Partner',
            },
            {
              title: '衍生企业',
              url: '/About/SpinOffs',
            },
          ],
        },
        {
          name: '创新政策',
          children: [],
          url: '/Policy',
        },
        {
          name: '创新平台',
          children: [
            {
              title: '协同创新中心',
              url: '/NewPlatform/NewCore',
            },
            {
              title: '创新资源平台',
              url: '/NewPlatform/News',
            },
            {
              title: '科技创新服务',
              url: '/NewPlatform/NewService',
            },
          ],
          url: '/NewPlatform/NewCore',
        },
        {
          name: '孵化平台',
          children: [
            {
              title: '众创空间',
              url: '',
            },
            {
              title: '公共实验室',
              url: '',
            },
            {
              title: '合作伙伴',
              url: '',
            },
            {
              title: '创业服务',
              url: '',
            },
            {
              title: '产品展示',
              url: '',
            },
          ],
        },
        {
          name: '产业平台',
          children: [
            {
              title: '产业创新联盟',
              url: '',
            },
            {
              title: '产业服务',
              url: '',
            },
            {
              title: '衍生企业',
              url: '',
            },
          ],
        },
        {
          name: '知识平台',
          children: [],
        },
        {
          name: '活动公告',
          children: [],
          url: '/Activity',
        },
        {
          name: '创新挑战',
          children: [
            {
              title: '需求征集',
              url: '',
            },
            {
              title: '项目发布',
              url: '',
            },
            {
              title: '结果公告',
              url: '',
            },
          ],
        },
        {
          name: '交流社区',
          children: [],
          url: '/Community',
        },
        {
          name: '联系我们',
          children: [],
          url: '/ContactUs',
        },
      ],
    };
  },
  methods: {
    jumUrl(url) {
      if (this.$route.path !== url) {
        this.$router.push(url);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.head {
  height: 80px;
  width: 100%;
  background: white;
  position: relative;
}

.icon-head {
  font-size: 24px;
  position: absolute;
  top: 28px;
  cursor: pointer;
}

.li-box {
  line-height: 80px;
  position: absolute;
  height: 80px;
  top: 0;
  left: 250px;
}

.list-down {
  margin-right: 20px;
  color: rgba(0, 0, 0, 0.65);
}

.logo-img {
  height: 50px;
  margin-top: 15px;
  margin-left: 48px;
}
</style>
