<template>
  <div>
    <div class="site_nav_box">
      <div v-for="(child,index) in children" :key="child.index" @click="handClick(index)">
        <!-- <div class="site_nav" v-for="child in children" :key="child.index" :class="{'active': active === child.index}"> -->
          <!-- <router-link v-if="active !== child.index" class="site_nav_a" :to="child.router">{{child.label}}</router-link> -->
          <!-- <div>{{child.label}}</div> -->
          <div class="site_nav site_nav_a" :class="{'active': n_active === child.index}">{{child.label}}</div>
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SiteNav',
  props: {
    array: Array,
    default_active: String,
    active: String
  },
  data () {
    return {
      children: [],
      n_active: 0
      // children: [
      //   {
      //     label: '搬运站点',
      //     index: '1-1',
      //     router: '/home'
      //   },
      //   {
      //     label: '任务列表',
      //     index: '1-2',
      //     router: '/home'
      //   },
      //   {
      //     label: '任务管理',
      //     index: '1-3',
      //     router: '/home'
      //   }
      // ]
    }
  },
  methods: {
    handClick (i) {
      this.n_active = i
      this.$emit('change', i)
    }
  },
  mounted () {
    this.children = this.array
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.site_nav_box
  // _wh(100%,100%)
  padding .26rem 0 0 .4rem
.site_nav
  _wh(2rem,1rem)
  _bis('../images/aio/btn_dis.png',100%,100%)
  margin-bottom .2rem
.site_nav_a, .site_nav_d
  display block
  _font(.32rem,1rem,,,center)
  cursor pointer
.active
  _bis('../images/aio/btn_checked.png',100%,100%)
  color #ffffff
</style>
