<template>
  <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
    <template v-for="item in tabsPaneList" :key="item.name">
      <el-tab-pane :label="item.label" :name="item.name">
        <LowTable
          :ref="(el) => (tableRef[item.name] = el)"
          :tableId="item.formId"
          :calcHeight="item.calcHeight || undefined"
          :enhanceData="item.enhanceData"
          :fixed-search="item.fixedSearch || {}"
        ></LowTable>
      </el-tab-pane>
    </template>
  </el-tabs>
</template>

<script setup lang="ts">
// 引入依赖低代码的table代码，这样就可以动态引入表格
import {LowTable} from "@/components/LowDesign";

// 定义该组件的选项
defineOptions({name: 'TabsCardDocument'})

const activeName = ref('institution')
const tableRef = ref({})

const tabsPaneList = ref([
  {
    label: '制度',
    name: 'institution',
    formId: '1966386366515343361',
    calcHeight: 200,
    enhanceData: {hideHeader: 'disabled'},
    fixedSearch: {file_main_type: 0}
  },
  {
    label: '预案',
    name: 'plan',
    formId: '1966386366515343361',
    calcHeight: 200,
    fixedSearch: {file_main_type: 1}
  },
  {
    label: '标准',
    name: 'standard',
    formId: '1966386366515343361',
    calcHeight: 200,
    fixedSearch: {file_main_type: 2}
  },
  {
    label: '规程',
    name: 'regulations',
    formId: '1966386366515343361',
    calcHeight: 200,
    fixedSearch: {file_main_type: 3}
  },
  {
    label: '目标责任',
    name: 'responsibility',
    formId: '1966386366515343361',
    calcHeight: 200,
    fixedSearch: {file_main_type: 4}
  },
  {
    label: '工作档案',
    name: 'workArchive',
    formId: '1966386366515343361',
    calcHeight: 200,
    fixedSearch: {file_main_type: 5}
  },
])

// 定义点击tab的事件动作
const handleClick = (tab) => {
  const key = tab.props.name
  tableRef.value[key].initTableLayout()
}

</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}

.demo-tabs {
  ::v-deep(.el-tabs__nav-wrap) {
    .el-tabs__item {
      height: 50px;
      font-size: 16px;
    }
  }
}
</style>
