<script lang="ts" setup name="Tabs">
import { computed, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import Form from "../Form/index.vue";

const props = defineProps({
  tabsInfo: {
    type: Object,
    default: {}
  }
})

const emits = defineEmits(['tabClick', 'tabChange']);

const tabsType = computed(() => {
  return props.tabsInfo.type ?? ''
})
const tabsClass = computed(() => {
  return props.tabsInfo.col ?? ''
})
const activeTabName = computed(() => {
  return props.tabsInfo.activeName;
})

const tabsList = computed(() => {
  return props.tabsInfo.tabs;
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
  emits("tabClick", tab, event)
}

const handleChange = (name) => {
  emits("tabChange", name)
}

</script>

<template>
  <el-tabs v-model="activeTabName" class="demo-tabs" :class="[tabsClass]" :type="tabsType" @tab-click="handleClick" @tab-change="handleChange">
    <el-tab-pane v-for="tab in tabsList" :label="tab.label" :name="tab.name">
      <template v-if="tab.pane && tab.pane.type == 'form'">
        <Form ref="formRef" :itemList="tab.pane.formInfo.items" :formId="tab.pane.formInfo.id"
          :rules="tab.pane.formInfo.rules" :col="tab.pane.formInfo.col" />
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>
.el-tabs {
  --el-tabs-header-height: 36px;

  :deep(.el-tabs__item) {
    padding: 0 16px;
  }
}

.el-tabs--card {
  &.border {
    :deep(> .el-tabs__header) {
      margin-bottom: 0;
      border-bottom: none;
      .el-tabs__item {

        &:hover {
          color: initial;
        }
        &.is-active {
          color: initial;
          border-bottom-color: #fff;
        }
      }
    }

    :deep(.el-tabs__content) {
      border: 1px solid var(--el-border-color-light);
      padding: 8px 12px 0;
    }
  }
}
</style>