<template>
  <div class="dof-toast-wrapper" v-if="isShow">
    <div class="dof-toast-inner">
      <image v-if="type" :src="icon" class="icon"></image>
      <text class="dof-toast dof-toast-content">{{ content }}</text>
    </div>  
  </div>
</template>

<script>
import imgs from './imgs.js'

export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''   // success fail
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  computed: {
    icon() {
      return imgs[this.type] || ''
    }
  },
  methods: {
    showToast() {
      if (this.isShow === false) {
        this.isShow = true
        setTimeout(() => {
          this.isShow = false
        }, 2000)
      }
    }
  }
}
</script>

<style scoped>
.dof-toast-wrapper {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.dof-toast-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(12,12,12,0.80);
  padding: 26px 64px;
  border-radius: 16px;
  max-width: 640px; 
}
.dof-toast {
  max-width: 640px;  
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.dof-toast-content {
  font-size: 32px;
  color: rgba(255,255,255,0.80);
  text-align: center;
}
.icon {
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
}
</style>
