<template>

<div>
  <el-container>
    <el-tabs :tab-position="tabPosition" type="border-card" class="tabcolor">
      <el-tab-pane label='Card' @click.native="setActiveComponent('componentOne')" class="pcontainer">
        
      </el-tab-pane>
      <el-tab-pane label='Bank' @click.native="setActiveComponent('componentTwo')" class="pcontainer">
        
      </el-tab-pane>
      <el-tab-pane label="QR-code" class="pcontainer">
        <ComponentOne  /> <!-- v-if="activeComponent === 'componentOne'"-->
      </el-tab-pane>
      <el-tab-pane label="Task" class="pcontainer">
        <ComponentTwo /> <!-- v-if="activeComponent === 'componentTwo'" -->
      </el-tab-pane>
    </el-tabs>
    
  </el-container>
</div>

</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useActiveComponentStore } from './stores/activeComponentStore';
import ComponentOne from './components/ComponentOne.vue';
import ComponentTwo from './components/ComponentTwo.vue';

export default defineComponent({
  components: {
    ComponentOne,
    ComponentTwo,
  },
  setup() {
    const store = useActiveComponentStore();
    const tabPosition = ref('bottom')

    const handleTabClick = (tab: any) => {
      store.setActiveComponent(tab.props.name);
    };

    return {
      ...store,
      handleTabClick,
      tabPosition,
    };
  },
});
</script>

<style scoped>


@import 'bootstrap/dist/css/bootstrap.min.css';
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif
}


p {
    margin: 0
}

p {
    margin-top: 0;
    margin-bottom: 0.25rem !important;
}

.tabcolor {
  background-color: transparent !important;
  border-width: 0px;
}
.container {
    max-width: 380px;
    margin: 0px auto;
    background-color: #e8eaf6;
    padding: 15px;
}
.pcontainer {
    max-width: 320px;
    height: 320px;
    margin: 0px auto;
    background-color: #e8eaf6;
    /* padding: 10px; */
} 
.box-right {
    padding: 10px 15px;
    background-color: white;
    border-radius: 15px
}

.box-left {
    padding: 20px 20px;
    background-color: white;
    border-radius: 15px
}

.textmuted {
    color: #7a7a7a
}

.bg-green {
    background-color: #d4f8f2;
    color: #06e67a;
    padding: 3px 0;
    display: inline;
    border-radius: 25px;
    font-size: 11px
}

.p-blue {
    font-size: 14px;
    color: #1976d2
}

.fas.fa-circle {
    font-size: 12px
}

.p-org {
    font-size: 14px;
    color: #fbc02d
}

.h7 {
    font-size: 15px
}

.h8 {
    font-size: 12px
}

.h9 {
    font-size: 10px
}

.bg-blue {
    background-color: #dfe9fc9c;
    border-radius: 5px
}

.form-control {
    box-shadow: none !important
}

.card input::placeholder {
    font-size: 14px
}

::placeholder {
    font-size: 14px
}

input.card {
    position: relative
}

.far.fa-credit-card {
    position: absolute;
    top: 10px;
    padding: 0 15px
}

.fas,
.far {
    cursor: pointer
}

.cursor {
    cursor: pointer
}

.btn.btn-primary {
    box-shadow: none;
    height: 40px;
    padding: 11px;
    background-color: #1976d2;
}

.bg.btn.btn-primary {
    background-color: transparent;
    border: none;
    color: #1976d2
}

    .bg.btn.btn-primary:hover {
        /*color: #539ee9  */
        color: #5DADE2;
        background-color: #5DADE2;
    }

@media(max-width:380px) {
    /* .h8 {
        font-size: 11px
    }

    .h7 {
        font-size: 13px
    }

    ::placeholder {
        font-size: 10px
    } */
}

/* .myh1, myh1 {
    font-size: calc(0.375rem + 1.2vw);
} */

.myh6, myh6 {
    font-size: 0.75rem;
}

.div-align-right {
    text-align: right
}


@media (min-width: 576px) {

    .modal-dialog-fix {
        max-width: 380px !important;
        margin: 0.25rem auto !important;
    }
}

.modal-dialog-fix {
    position: relative;
    width: 380px !important;
    margin: auto;
    pointer-events: none;
}

.modal-body {

    padding: 0rem !important;
}

.small-logo{
    width: 55px;
}

.bg-orange {
    background-color: darkorange;
    color: white;
    padding: 3px 0;
    padding-right: 0px;
    padding-left: 0px;
    display: inline;
    border-radius: 25px;
    font-size: 11px;
}

.bg-x {
    background-color: transparent !important;
}

.active1 {
    background-color: ghostwhite !important;
}

.isvisible {
    display: none;
}
.div-align-center{
    text-align: center;
}

.list-group-item.active {
    color: #212529 !important;
}

#qr {
    margin-bottom: 15px;
    margin-top: 15px;
    width: unset;
}

.ccard {
    width: 380px;
}



</style>
