<template>
  <el-tabs
    v-model="active"
    :before-leave="option.beforeLeave"
    :tab-position="option.position"
    :type="option.type"
  >
    <el-tab-pane
      :name="index + ''"
      :disabled="column.disabled"
      :label="column.label"
      v-for="(column, index) in columnOption"
      :key="index"
    ></el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'comTabs',
  props: {
    option: {
      type: Object,
      required: true,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      active: '0',
    };
  },
  watch: {
    active() {
      this.$emit('change', this.tabsObj);
    },
  },
  computed: {
    tabsObj() {
      return this.columnOption[this.active];
    },
    columnOption() {
      return this.option.column || [];
    },
  },
};
</script>
