<template>
  <div style="background-color: #fff;height: 100%;">
    <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%;">
      <el-tab-pane :label="$t('trials:emailManageCfg:tab:title:emailManageCfg')" name="emailManageCfg">
        <emailConfig v-if="activeName === 'emailManageCfg'" />
      </el-tab-pane>
      <el-tab-pane :label="$t('trials:emailManageCfg:tab:title:emailLog')" name="emailLog">
        <emailLog :isSystem="false" v-if="activeName === 'emailLog'" />
      </el-tab-pane>
      <el-tab-pane :label="$t('trials:emailManageCfg:tab:title:customEmail')" name="customEmail">
        <customEmail v-if="activeName === 'customEmail'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import emailConfig from './config.vue'
import emailLog from "@/views/system/email"
import customEmail from "./customEmail.vue"
export default {
  name: 'EmailManage',
  components: {
    emailConfig,
    emailLog,
    customEmail
  },
  data() {
    return {
      activeName: 'emailManageCfg', // emailLog emailManageCfg
    }
  },
  methods: {
    handleClick(a) {
      this.activeName = a.name
    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__content {
  height: calc(100% - 60px);

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