<template>
  <div class="over-lay ">
      <a-drawer
    placement="top"
    height='100%'
    :closable='false'
    :drawerStyle='{
      backgroundColor:"#080F17",
       color:"#C6CBD9"    
    }'

    :visible="getOverlayData.show"
      @close="onClose"
    >
       <div class="header flex text-app-white border-b border-app-dark-3 pb-3 justify-between">
           <div>{{getOverlayData.data.title}}</div>
            <div @click='onClose'>close</div>
       </div>
       <div class='wallet'>

       </div>
       <div class='setting'>
           <div class="cell flex justify-between py-3 border-t border-b border-app-dark-3 px-2">
               <div class="left">hahah</div>
               <div class="right">valuevaule</div>
           </div>
           
       </div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Drawer } from 'ant-design-vue'
Vue.use(Drawer)
export default Vue.extend({
    methods:{
        onClose(){
            let show = this.$store.state.app.overlay.show
            if(show){
                this.$store.commit('app/TOGGLE_STATUS')
                this.$store.commit('app/SET_OVERLAY',{})
            }
        },
        
    },
    computed:{
        getOverlayData:function(){
            return this.$store.state.app.overlay
        }
    }

});
</script>

