<template>
  <div class="attachment-wrapper">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <el-tab-pane v-for="item in $d.Common_File_Type" :key="item.value" :label="item.label" :name="String(item.value)">
        <UploadTemplate v-if="activeTab === '1'" />
        <ExportTemplate v-if="activeTab === '2'" />
        <EmailTemplate v-if="activeTab === '3'" />
        <CommonTemplate v-if="activeTab === '4'" />
        <SignatureTemplate v-if="activeTab === '5'" />
        <ToolsTemplate v-if="activeTab === '0' && item.value == activeTab" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import UploadTemplate from './components/UploadTemplate'
import ExportTemplate from './components/ExportTemplate'
import EmailTemplate from './components/EmailTemplate'
import CommonTemplate from './components/CommonTemplate'
import SignatureTemplate from './components/SignatureTemplate'
import ToolsTemplate from './components/ToolsTemplate'
export default {
  name: 'Attachment',
  components: {
    UploadTemplate,
    ExportTemplate,
    EmailTemplate,
    CommonTemplate,
    SignatureTemplate,
    ToolsTemplate
  },
  data() {
    return {
      activeTab: null
    }
  },
  mounted() {
    if (this.$route.query.tabActive) {
      this.activeTab = this.$route.query.tabActive
    } else {
      this.activeTab = String(this.$d.Common_File_Type[0].value)
    }
  },
  methods: {
    clickTab(tab, event) {
      this.$router.push({ path: `/dictionary/attachment?tabActive=${tab.name}` })
    }
  }
}
</script>
<style lang="scss">
.attachment-wrapper {
  .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .el-tabs__header {
    height: 40px;
    margin-bottom: 5px;
  }

  .el-tabs__content {
    flex: 1;

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