<template>
  <div
    class="trifle-alert"
    :class="[
      type ? `trifle-alert-${type}` : '',
      isClose ? 'trifle-alert-close' : ''
    ]"
  >
    <div class="trifle-alert-message">
      {{ message }}
    </div>
    <div class="trifle-alert-description">
      {{ description }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Alert',
  props: {
    message: {
      type: String,
      default: '',
      required: true,
    },
    description: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'info',
      required: true,
    },
    isClose: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../mixin/mixin.scss';
@import '../const/variable.scss';

.trifle-alert {
  border-radius: 4px;
  margin: 10px;
  padding: 15px 15px 10px 15px;

  .trifle-alert-description {
    font-size: 12px;
    margin-top: 5px;
  }
}

.trifle-alert-close {
  display: none;
}
.trifle-alert-close.visible {
  display: block;
  opacity: 1;
  animation-duration: 1s;
  animation-name: fade-in;
}

.trifle-alert-info {
  background: palette(blue, tooLight);
  border: 1px solid palette(blue, base);
}
.trifle-alert-error {
  background: palette(red, tooLight);
  border: 1px solid palette(red, base);
}
.trifle-alert-warning {
  background: palette(yellow, tooLight);
  border: 1px solid palette(yellow, base);
}
.trifle-alert-success {
  background: palette(green, tooLight);
  border: 1px solid palette(green, base);
}

@keyframes fade-in {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}
</style>

