<template>
  <div class="tabs" :style="options.style">
    <div class="tabs-bar flex justify-center mb-4" :style="barStyle">
      <div
        class="tabs-tab flex-auto flex justify-center items-center"
        :class="{ active: index === active }"
        v-for="(tab, index) in options.children"
        :key="index"
        @click="handleActive(index)"
        :style="tabStyle"
      >
        {{ tab.text }}
      </div>
    </div>
    <div>
      <v-view inner :key="active" :options="{nodes: [options.children[active]]}"></v-view>
    </div>
  </div>
</template>
<script>
import Base from './base';
import { mixinStyle } from './utils';

export default {
  name: 'v-tabs',
  extends: Base,
  data() {
    return {
      active: 0,
    }
  },
  computed: {
    barStyle() {
      const { background = '#b0272b', barStyle } = this.options;
      return mixinStyle({
        'border-color': background,
      }, barStyle)
    },
    tabStyle() {
      const { background = '#b0272b', color = '#fff', tabStyle } = this.options;
      return mixinStyle({
        'background-color': background,
        color,
      }, tabStyle);
    },
  },
  methods: {
    handleActive(index) {
      console.log('xxx', index);
      this.active = index;
    }
  }
}
</script>
<style lang="less">
.tabs {
  .tabs-bar {
    border: 0.1rem solid;
    border-radius: 0.5rem;
  }
  .tabs-tab {
    height: 2.2rem;
    background: #b0272b;
    &.active {
      background: transparent !important;
    }
  }
}
</style>
