<template>
  <div :class="['ps-tabs', isDefault]">
    <div class="ps-tabs--head">
      <li
        v-for="(item, index) in tabsHeadArr"
        :key="index"
        :class="isActive.name == item.name && 'on'"
        @click="operaGetTabs(item)"
      >
        {{ item.name }}{{ value }}
      </li>
    </div>
    <div class="ps-tabs--body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "PsTabs",
  props: {
    // tabsHeadArr: { type: Array, default: () => { return [] } }
    activeIndex: { type: Number, default: 0 },
    isDefault: { type: String, default: "cloumn" },
    value: { type: String, default: "" },
    isSquare: { 
      type: Boolean, 
      default () {
        return false;
      } 
    }
  },
  data() {
    return {
      isLoading: false,
      tabsHeadArr: [],
      isActive: {},
    };
  },
  created() {},
  mounted() {
    this.operaGetTabPane();
  },
  methods: {
    operaGetTabPane() {
      this.tabsHeadArr = this.$children;
      console.log(this.tabsHeadArr);
      this.isActive = this.tabsHeadArr[this.activeIndex];
    },
    operaGetTabs(item) {
      this.isActive = item;
      this.$emit("change", item);
    },
  },
};
</script>

<style>
</style>
