<template>
  <transition name="fdc-toast-pop">
    <div class="fdc-toast" v-show="visible" :class="customClass">
      <i class="fdc-toast-icon" :class="iconClass" v-if="iconClass !== ''"></i>
      <span class="fdc-toast-text" :class="iconClass && 'has-icon'">{{ message }}</span>
    </div>
  </transition>
</template>

<style lang="scss">
.fdc {
  &-toast {
    position: fixed;
    padding: 20px;
    max-width: 80%;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    box-sizing: border-box;
    text-align: center;
    z-index: 1000;
    transition: opacity .3s linear;
    &.has-icon {
      width: 367px;
      height: 200px;
      padding: 16px 0 20px 0;
    }

    &-icon {
      display: inline-block;
      background-size: contain;
      width: 100px;
      height: 100px;
      @each $name in success,
      fail,
      warn {
        &-#{$name} {
          background-image: url('~src/assets/svg/#{$name}.svg');
        }
      }
    }

    &-text {
      font-size: 28px;
      /*px*/
      display: block;
      text-align: center;
      &.has-icon {
        padding-top: 16px;
        font-size: 48px;
        line-height: 48px;
      }
    }

    &.is-placetop {
      top: 50px;
      left: 50%;
      transform: translate(-50%, 0);
    }

    &.is-placemiddle {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    &.is-placebottom {
      bottom: 50px;
      left: 50%;
      transform: translate(-50%, 0);
    }

    &-pop-enter,
    pop-leave-active {
      opacity: 0;
    }
  }
}
</style>

<script type="text/babel">
export default {
  props: {
    message: String,
    className: {
      type: String,
      default: ''
    },
    position: {
      type: String,
      default: 'middle'
    },
    iconClass: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      visible: false
    };
  },

  computed: {
    customClass() {
      var classes = [];
      switch (this.position) {
        case 'top':
          classes.push('is-placetop');
          break;
        case 'bottom':
          classes.push('is-placebottom');
          break;
        default:
          classes.push('is-placemiddle');
      }
      if (this.iconClass) {
        classes.push('has-icon');
      }
      classes.push(this.className);

      return classes.join(' ');
    }
  }
};
</script>