<template>
  <transition
    name="fade"
    @after-leave="$emit('destroy')"
  >
    <div
      v-show="visible"
      class="message"
      :class="[handleStyle(type), !isPC && 'message-h5']"
    >
      <p v-if="isPC">
        {{ props.message }}
      </p>
      <span v-else>{{ props.message }}</span>
    </div>
  </transition>
</template>
<script lang="ts">
import vue from '../../../adapter-vue';
import TOAST_TYPE from './type';
import { isPC } from '../../../utils/env';
const { onMounted, ref } = vue;

export default {
  props: {
    message: {
      type: String,
      default: '',
    },
    duration: {
      type: Number,
      default: 1000,
    },
    type: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const visible = ref(false);
    let timer: any;
    const startTimer = () => {
      if (props.duration > 0) {
        timer = setTimeout(() => {
          if (visible.value) {
            close();
            timer && clearTimer();
          }
        }, props.duration);
      }
    };

    const clearTimer = () => {
      clearTimeout(timer);
    };

    const close = () => {
      visible.value = false;
    };

    onMounted(() => {
      startTimer();
      visible.value = true;
    });

    const handleStyle = (type?: string) => {
      if (
        type
          && (type === TOAST_TYPE.ERROR
          || type === TOAST_TYPE.SUCCESS
          || type === TOAST_TYPE.WARNING)
      )
        return type;
      return TOAST_TYPE.NORMAL;
    };
    return {
      props,
      visible,
      handleStyle,
      close,
      clearTimer,
      startTimer,
      isPC,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/styles/common";

.message {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 450px;
  width: fit-content;
  justify-content: center;
  align-items: center;

  p {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    padding: 10px 15px;
    width: fit-content;
    word-break: break-all;
  }
}

.message-h5 {
  position: absolute;
  top: 20px !important;
  margin: 0 auto;
  max-width: 80%;
  width: fit-content;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 10px 15px;

  span {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0;
    text-align: center;
    word-break: break-all;
  }
}

.success {
  border: 1px solid #e4f2da;
  background: #f2f9ec;
  color: #7ebf50;
}

.error {
  border: 1px solid #fde2e2;
  background: #fef0f0;
  color: #f46c6e;
}

.normal {
  border: 1px solid #e9e9eb;
  background: #f4f4f5;
  color: #909398;
}

.warning {
  border: 1px solid #faf0e2;
  background: #fdf8f1;
  color: #e4b877;
}
</style>
