/* eslint-disable vue/attributes-order */
<template>
  <div
    id="maincontent"
    class="tabs">
    <div
      :class="{ selected : selectedTab === 0 }"
      class="tab">
      <p class="welcome">{{ bank.description }}</p>
    </div>
    <div
      id="transactionTab"
      :class="{ selected : selectedTab === 1 }"
      class="tab"
      data-control="AjaxContainer{`autoLoad`:false,`loader`:`big`}">
      <inputTab ::bank="bank"/>
    </div>
    <div
      :class="{ selected : selectedTab === 2 }"
      class="tab"
      data-control="AjaxContainer{`autoLoad`:false,`loader`:`big`}">
      <accounting-tab :bank="bank"/>
    </div>
    <div
      :class="{ selected : selectedTab === 3 }"
      class="tab">
      <statementTab :bank="bank"/>
    </div>
  </div>
</template>

<script>
  import AccountingTab from "./BankAccounting.vue";
  import StatementTab from "./BankStatement.vue";
  import InputTab from "./BankInput.vue";

  export default {
     components : {
      AccountingTab : AccountingTab,
      statementTab : StatementTab,
      inputTab : InputTab
    },
    props : {
      selectedTab : {
        type : Number,
        default : 0
      },
    bank:Object
    },
  };
</script>