<template>
  <div class="app-container financials">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <el-tab-pane label="Monthly Payment" name="MonthlyPayment">
        <monthly-payment v-if="activeTab=='MonthlyPayment'" />
      </el-tab-pane>
      <el-tab-pane label="Payment History" name="PaymentHistory">
        <payment-history v-if="activeTab=='PaymentHistory'" />
      </el-tab-pane>
      <el-tab-pane label="Revenues" name="Revenues">
        <Revenues v-if="activeTab=='Revenues'" />
      </el-tab-pane>
      <el-tab-pane label="Analysis" name="Analysis">
        <keep-alive>
          <Analysis v-if="activeTab=='Analysis'" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import MonthlyPayment from './monthlyPayment/index'
import PaymentHistory from './paymentHistory/index'
import Revenues from './revenues/index'
import Analysis from './analysis/index'
import { mapGetters } from 'vuex'
import store from '@/store'
export default {
  name: 'Financials',
  components: {
    MonthlyPayment,
    PaymentHistory,
    Revenues,
    Analysis
  },
  data() {
    return {
      activeTab: 'MonthlyPayment'
    }
  },
  computed: {
    ...mapGetters(['financialsActiveName'])
  },
  created() {
    this.activeTab = this.financialsActiveName
  },

  methods: {
    clickTab(tab, event) {
      this.activeTab = tab.name
      store.dispatch('financials/setActiveName', tab.name)
    }
  }
}
</script>
<style lang="scss">
.financials{
  .el-tabs{
      height: 100%;
      display: flex;
      flex-direction: column;
      .el-tabs__header {
        height: 40px;
      }
      .el-tabs__content{
        flex: 1;
        .el-tab-pane{
          height: 100%;
        }
      }
    }
}
</style>
