<template>
    <el-tabs
      style="width:100%;height:100%"
      v-model="innerValue"
      @tab-click="handleClick"
      :before-leave='beforeLeave'
    >
      <el-tab-pane
        v-for="(item,index) in tabsList"
        :key="index"
        :label="item.label"
        :name="item.controlName||item.name"
      >
      {{item.content}}
      <slot name="contentPan" :item='item' :$index='index'></slot>
      </el-tab-pane>
    </el-tabs>
</template>
<script>

import commonMixins from '../ucClass/commonMixins'
export default {
  mixins: [commonMixins],
  name: 'tabs-component',
  computed: {
    configData: function() {
      const config = this.allSourceData.config || {}
      return config
    },
    innerValue: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },
    tabsList: function() {
      return this.allSourceData.config.tabsList || []
    }
  },
  methods: {
    handleClick(tab, event) {
      const item = this.tabsList.find(item => item.label === tab.label)
      this.$emit('handleClick', { tab, event, item })
    },
    beforeLeave() {
      this.$emit('beforeLeave')
    }
  }
}
</script>
