<template>
  <div v-if="show" class="toast toast-end">
		<div class="alert bg-rose-600">
			<div class="flex items-center">
				<img class="rounded me-2" :src="require(`@/assets/img/logo2.png`)" height="25" width="100" alt="logo">
			</div>
			<span class="text-md text-white text-center">{{ content }}</span>
		</div>
	</div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Toast",
  props: {
    delay: {
      type: Number,
      default: 5000,
    },
    content: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      show: false,
      timer: 2,
      interval: null,
    }
  },
  methods: {
    startShow: function () {
      this.show = true;
      let shows = this.show;
      let timers = this.timer;
      let vm = this;
      this.interval = setInterval(function() {
        if(shows) {
          timers--;
          if(timers < 1) {
            vm.stopShow();
          }
        }
      }, 1000)
    },
    stopShow: function () {
      clearInterval(this.interval);
      this.show = false;
    }
  },
  computed: {
    ...mapState(["isRTL"]),
  },
};
</script>
