<template>
  <div :class="`notice ${toast_type}`" v-if="show_toast">
    <div class="icon">
      <WlPic :src="toast_icon" alt="" />
    </div>
    <p class="text">{{ message }}</p>
  </div>
</template>

<script>
import {
  toast_success_icon,
  toast_alert_icon,
  toast_warning_icon,
  toast_error_icon,
} from "@packages/utils/cdn";
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
export default {
  name: "WlNotice",
  components: { WlPic },
  data() {
    return {
      show_toast: true,
      message: "出来toast了~",
      toast_type: "",
    };
  },
  computed: {
    toast_icon() {
      const dict = {
        success: toast_success_icon,
        alert: toast_alert_icon,
        warning: toast_warning_icon,
        error: toast_error_icon,
      };
      return dict[this.toast_type];
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(-50%, -100%, 0);
    transform: translate3d(-50%, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(-50%, 20px, 0);
    transform: translate3d(-50%, 20px, 0);
  }
}

.notice {
  box-sizing: border-box;
  padding: j(8) j(16);
  color: $default-black-color;
  animation: slideInDown 1s;
  display: inline-flex;
  align-items: center;
  border-radius: j(30);
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, 20px, 0);
  z-index: 9999;
  font-size: j(14);
  .icon {
    width: j(18);
    height: j(18);
    flex-shrink: 0;
  }
  .text {
    flex: 1;
    word-break: break-all;
    margin-left: j(5);
  }
  &.success {
    border: j(1) solid #70cda1;
    background-color: #f1faf5;
  }
  &.alert {
    border: j(1) solid #1c9fff;
    background-color: #e8f6ff;
  }
  &.warning {
    border: j(1) solid #ff9444;
    background-color: #fff5ed;
  }
  &.error {
    border: j(1) solid #ff4545;
    background-color: #ffeded;
  }
}
</style>
