<template>
  <div class="material-container">
    <el-card class="!border-none h-full" body-class="p-0" shadow="never">
      <el-tabs v-model="activeTab">
        <el-tab-pane
          v-for="item in tabsList"
          :key="item.type"
          :label="item.name"
          :name="item.type"
          :index="item.type"
          lazy
        >
          <material :select-tab="item" :active="activeTab === item.type" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="Material">
const tabsList = reactive<Record<string, any>>([
  { type: '', name: '全部' },
  { type: 'image', name: '图片' },
  { type: 'video', name: '视频' },
  { type: 'file', name: '文件' }
])
const activeTab = ref('')
</script>

<style lang="scss" scoped>
.material-container {
  min-width: 880px;
  height: calc(100vh - 122px);

  :deep(.el-tabs) {
    display: flex;
    height: 100%;

    .el-tabs__header {
      margin-bottom: 0;
      padding: 0 16px;
    }

    .el-tabs__content,
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
