<template>
  <div class="content-box">
    <div class="content">
      <div class="menu">
        <div v-for="(item, value) in list" :key="value">
          <router-link :to="item.url" @click.native="geturl()">
            <div class="li" :class="value === target ? 'active' : ''">{{ item.name }}</div>
          </router-link>
        </div>
      </div>
      <div class="fill">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['menu'],
  data: function () {
    return {
      list: this.menu,
      target: 0,
      tag: '',
    }
  },
  mounted() {
    let _tag = this.$route.query.tag
    this.activeButton(_tag)
  },
  watch: {
    $route(to) {
      this.activeButton(to.query.tag)
    },
  },
  methods: {
    geturl() {
      this.$emit('urlChange')
    },
    // 增加标签背景颜色
    activeButton(_tag) {
      const that = this
      if (_tag && that.tag !== _tag) {
        that.tag = _tag
        that.list.forEach(function (item, index) {
          if (item.name == _tag) {
            that.target = index
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../assets/css/ProjectContent';
</style>
<style lang="scss">
.fill {
  font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei' !important;
  font-size: 18px;
  h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 33px;
    padding-bottom: 20px;
  }
  p {
    margin-bottom: 15px;
    > a {
      color: #3a8fff;
      text-decoration: underline;
    }
  }
}
</style>
