<template>
  <div>
    <div class="top-nav">
      <div class="min-height-img" :style="getImg(data.imgUrl)">
      </div>
      <div class="center97">
        <ul class="menu">
          <template v-for="(item, index) in data.menu">
            <li
              :key="index"
              :class="activeIndex == index ? 'active' : ''"
              @click="tab(index, item)"
            >{{item}}</li>
          </template>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  computed: {
    getImg() {
      return (url) => {
        return `background:url(${url});background-size: cover;`
      }
    }
  },
  methods: {
    tab(index, title) {
      // if(this.$route.path === '/presence' && title === '学生风采') {
      //   this.$router.push({ path: '/index' })
      // }
      this.activeIndex = index
      this.$emit('changeTab', this.activeIndex)
    }
  }
}
</script>
<style lang="scss" scoped>
.center97{
  width: 970px;
  margin: 0 auto;
}
.min-height-img{
  height: 190px;
  background-size: cover;
}
.top-nav{
  .center97{
    position: relative;
  }
  img{
    width: 100%;
    display: block;
  }
  .menu{
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    li{
      width: 128px;
      line-height: 36px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      margin-right: 2px;
      cursor: pointer;
      background: rgba(76, 129, 196, 1);
      &.active{
        background: #fff;
        color: rgba(76, 129, 196, 1);
      }
    }
  }
}
</style>
