<template>
  <el-tabs v-model="active" @tab-click="tabClick" class="lab-tab">
    <el-tab-pane v-for="(item,i) in element.elements" :key="item.key" :label="item.label" :name="item.mapper" :lazy="true" class="lab-tab-pane">
      <lab-form-item :element="item" :elements="element.elements" :index=i :model-data="modelData" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import LabBase from "../../mixins/LabBase";
import LabEvent from "../../mixins/LabEvent";

export default {
  name: "LabTab",
  mixins: [LabBase, LabEvent],
  data() {
    return {
      active: ''
    }
  },
  created() {
    this.$LabRender.autoFill(this.element, this)
    if (this.element.elements.length > 0) {
      this.active = this.element.elements[0].mapper
    }
  },
  methods: {
    tabClick() {
      if (this.labDesign.switch) {
        const tabIndex = this.element.elements.findIndex(item => item.mapper === this.active)
        const tabElement = this.element.elements[tabIndex]
        this.labDesign.activeChange(tabElement, this.element.elements,tabIndex)
      } else {
        this.dispatchEvent('tabClick', { active: this.active })
      }
    }
  }
}
</script>

<style scoped>

</style>