<template>
  <section class="th-tabs" :class="{'th-tabs--custom': custom}">
    <el-tabs
      v-model="activeTab"
      :type="custom ? '' : type"
      v-bind="$attrs"
      @tab-click="handleClick"
      v-on="$listeners"
    >
      <template v-for="item in tabs.filter(d => !d.hidden)">
        <el-tab-pane
          :key="item.name"
          :label="item.label"
          :name="item.name"
          v-bind="item.paneProps"
        >
          <el-scrollbar :style="paneStyle">
            <component
              :is="item.component"
              :ref="item.name"
              v-bind="item"
              v-on="$listeners"
            />
          </el-scrollbar>
        </el-tab-pane>
      </template>
    </el-tabs>
  </section>
</template>
<script>
export default {
  name: 'ThTabs',
  props: {
    // 当前选项卡的值
    value: {
      type: String,
      default: ''
    },
    // 类型
    type: {
      type: String,
      default: 'card'
    },
    // 是否使用自定义样式
    custom: {
      type: Boolean,
      default: false
    },
    // 标签数据
    tabs: {
      type: Array,
      default: () => [
        // {
        //   label: '短信详情',
        //   name: 'smsDetail',
        //   component: SmsDetailTbl
        // }
      ]
    },
    // 面板样式
    paneStyle: {
      type: [String, Array, Object],
      default: ''
    }
  },
  computed: {
    activeTab: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        if (!val && this.tabs.length) {
          this.$emit('input', this.tabs[0].name)
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClick(tab, event) {
      this.$emit('click', tab.name)
    }
  }
}
</script>
