<template>
  <div class="institution-wrapper">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <el-tab-pane label="Sites" name="Sites">
        <Sites v-if="activeTab === 'Sites'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Hospitals from './components/Hospitals'
import Sites from './components/Sites'
import CROs from './components/CROs'
import Sponsors from './components/Sponsors'
export default {
  name: 'Financials',
  components: {
    Hospitals,
    Sites,
    CROs,
    Sponsors
  },
  data() {
    return {
      activeTab: 'Sites'
    }
  },
  mounted() {
    if (this.$route.query.tabActive) {
      this.activeTab = this.$route.query.tabActive
    } else {
      this.activeTab = 'Sites'
    }
  },
  methods: {
    clickTab(tab, event) {
      this.$router.push({ path: `/dictionary/institutions?tabActive=${tab.name}` })
    }
  }
}
</script>
<style lang="scss">
.institution-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>

