<template>
  <div :class="`notice ${type}`" v-if="show_toast" data-weiling-mobile-ui-wl-notice>
    <div class="icon">
      <WlSvgIcon type="successFill" width="24" height="24" color="#45ce03" v-if="type === 'success'" />
      <WlSvgIcon type="warningFill" width="24" height="24" color="#f3a401" v-else-if="type === 'warning'" />
      <WlSvgIcon type="tipsFill" width="24" height="24" color="#1b9fff" v-else-if="type === 'alert'" />
      <WlSvgIcon type="closeFill" width="24" height="24" color="#ff2a2d" v-else-if="type === 'error'" />
    </div>
    <p class="text">{{ message }}</p>
  </div>
</template>

<script lang="ts">
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-09-27 11:56:22
 */
export default {
  name: "WlNotice",
}
</script>

<script setup lang="ts">
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";;

type Props = {
  show_toast: boolean;
  message: string;
  type?: "success" | "alert" | "warning" | "error";
  duration?: number;
}
withDefaults(defineProps<Props>(), {
  show_toast: true,
  message: "",
  type: "success",
  duration: 1500
});
</script>

<style lang="scss">
.notice[data-weiling-mobile-ui-wl-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);
  width: max-content;

  @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);
    }
  }

  .icon {
    flex-shrink: 0;
    @extend %flex-middle-center;
  }

  .text {
    flex: 1;
    margin-left: j(5);
  }

  &.success {
    border: j(1) solid #70cda1;
    background-color: #f1faf5;
  }

  &.alert {
    border: j(1) solid var(--wl-primary-color);
    background-color: #e8f6ff;
  }

  &.warning {
    border: j(1) solid var(--wl-warning-color);
    background-color: #fff5ed;
  }

  &.error {
    border: j(1) solid var(--wl-error-color);
    background-color: #ffeded;
  }
}
</style>
