<template>
  <div :style="{ '--colour': getterstheme, '--justify': justify }" class="tabs-conent">
    <ul>
      <li v-for="(item, index) in tabsarray" :key="index" :class="activecomputed(item)" @click.stop="activeitem(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MyTabs',
  props: {
    tabsarray: {
      type: Array,
      default: () => {
        return [
          { name: '草案上报', index: 0 },
          { name: '执行上报', index: 1 }
        ]
      }
    },
    justify: {
      type: String,
      default: 'center'
    }
  },
  data() {
    return {
      activeindex: 0
    }
  },
  computed: {
    ...mapGetters(['getterstheme']),
    activecomputed() {
      return function (item) {
        return item.index === this.activeindex ? 'active' : 'stopit'
      }
    }
  },
  methods: {
    // 初始化样式方法
    initialactive() {
      this.activeindex = 0
    },
    activeitem(item) {
      this.activeindex = item.index
      this.$emit('activeitem', item)
    }
  }
}
</script>
<style lang="scss" scoped>
.tabs-conent {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  border-bottom: solid 2px #e4e7ed;
  display: flex;
  justify-content: #{'var(--justify)'};
  align-items: flex-end;
}
ul {
  box-sizing: border-box;
  height: 50px;
  padding-left: 0px;
  margin: 0px;
  display: flex;
  position: relative;
  li {
    list-style: none;
    padding: 0px 20px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
  }
}
// 激活的当前选项
.active {
  border-bottom: solid 3px #30daff;
  color: #30daff !important;
}
// 没有激活的所有选项
.stopit {
  border-bottom: solid 2px #e4e7ed;
}
</style>
