<template>
  <div id="top">
    <el-row>
      <el-col :span="24">
        <el-col :span="12">
          <el-col :span="4" class="logo">
            <img style="width:75px;height:75px;" :src="topinfo.logo" />
          </el-col>
          <el-col :span="20" class="title">
            {{ topinfo.name }}
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="1" class="shu"></el-col>
          <el-col :span="22" class="menulist">
            <el-col :span="5" class="text">
              <el-link :underline="false" @click="$router.push({ path: '/' })">首页</el-link>
            </el-col>
            <el-col :span="5" class="text" v-for="(item, index) in menulist" :key="index">
              <el-link :underline="false" @click="$router.push({ path: getRouter(item) })" v-if="item.type === 'column'">{{ item.title }}</el-link>
              <el-link :underline="false" @click="$router.push({ path: item.path })" v-if="item.type === 'content'">{{ item.title }}</el-link>
              <el-link :underline="false" :href="item.url" v-if="item.type === 'url'">{{ item.title }}</el-link>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'top',
  props: {
    topinfo: null,
    menulist: null,
  },
  components: {},
  data: () => ({
    activeIndex: '1',
  }),
  created() {},
  computed: {},
  methods: {
    handleSelect(key, keyPath) {
      // eslint-disable-next-line no-console
      console.log(key, keyPath);
    },
    getRouter(item) {
      let path = _.get(item, `children[0].path`);
      return path;
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.logo {
  padding: 30px 0;
}
.title {
  height: 140px;
  line-height: 140px;
  font-size: 32px;
  font-family: 宋体;
  color: #545e69;
}
.shu {
  width: 9px;
  height: 40px;
  background: #415285;
  margin: 51px 10px;
}
.menulist {
  height: 140px;
  line-height: 140px;
}
.menulist .text {
  text-align: center;
}
.menulist .text .el-link {
  font-size: 24px;
  color: #415285;
}
.search {
  text-align: center;
}
</style>
