<template>
  <transition
    name="fade"
    @before-leave="onClose"
    @after-leave="$emit('destroy')"
  >
    <div
      class="message"
      :class="[handleStyle(type), isH5 && 'message-h5']"
      :style="customStyle"
      v-show="visible"
    >
      <p v-if="!isH5">{{ message }}</p>
      <span v-if="isH5">{{ message }}</span>
    </div>
  </transition>
</template>
<script lang="ts">
import { useTimeoutFn } from '@vueuse/core';
import {
  computed,
  CSSProperties,
  defineComponent,
  onMounted,
  ref,
  watch
} from 'vue';
export default defineComponent({
  name: 'TUIMessage',
  props: {
    message: {
      type: String,
      default: ''
    },
    duration: {
      type: Number,
      default: 3000
    },
    repeatNum: {
      type: Number,
      default: 1
    },
    id: {
      type: String,
      default: ''
    },
    onClose: {
      type: Function,
      required: false
    },
    offset: {
      type: Number,
      default: 20
    },
    zIndex: {
      type: Number,
      default: 0
    },
    isH5: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const visible = ref(false);

    let stopTimer: (() => void) | undefined = undefined;

    function startTimer() {
      if (props.duration > 0) {
        ({ stop: stopTimer } = useTimeoutFn(() => {
          if (visible.value) close();
        }, props.duration));
      }
    }

    function clearTimer() {
      stopTimer?.();
    }

    function close() {
      visible.value = false;
    }

    watch(
      () => props.repeatNum,
      () => {
        clearTimer();
        startTimer();
      }
    );

    const customStyle = computed<CSSProperties>(() => ({
      top: `${props.offset}Px`,
      zIndex: props.zIndex
    }));

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

    const handleStyle = (type?: string) => {
      if (
        type &&
        (type === 'error' || type === 'success' || type === 'warning')
      )
        return type;
      return 'normal';
    };

    return {
      visible,
      customStyle,
      handleStyle
    };
  }
});
</script>
<style lang="scss" scoped>
@import url('../../styles/common.scss');
@import url('../../styles/icon.scss');
.message {
  position: fixed;
  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: 300Px !important;
  margin: 0 auto;
  width: fit-content;
  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>
