<template>
  <div class="loader-wrapper" :class="{ loaded: !loading }">
    <div class="loader">
      <P class="tip">{{tip}}</P>
      <p class="percent">{{percent}}%</p>
      <p class="progress">
        <div :style="progressStyle"></div>
      </p>
    </div>
    <div class="loader-section section-top"></div>
    <div class="loader-section section-bottom"></div>    
  </div>
</template>

<script setup>
import { computed } from "vue"

const props = defineProps({
  tip: {
    type: String,
    default: 'loading...'
  },
  percent: {
    type: Number,
    default: 0
  },
  loading: Boolean
})

const progressStyle = computed(() => ({ width: `${props.percent}%` }))

</script>


<style lang="less" scoped>

@bg-color: #D7DDD3;
@tip-color: #933D33;
@text-color: #fff;

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;

  .loader {
    display: block;
    position: relative;
    z-index: 11;
    color: @tip-color;
    font-size: 2em;
    text-align: center;
    padding-top: 200px;

    .percent {
      color: @text-color;
    }

    .progress {
      box-sizing: border-box;
      padding: 0 2em;

      & > div {
        width: 0%;
        height: 2px;
        background: @tip-color;
        border-radius: 50%;
      }
    }
  }

  .loader-section {
    position: fixed;
    left: 0;
    width: 100%;
    height: 51%;
    background: @bg-color;
    z-index: 10;
  }
  .section-top {
    top: 0;
  }

  .section-bottom {
    bottom: 0;
  }

  &.loaded {
    visibility: hidden;
    transform: translateX(-100%);
    transition: all 0.3s 1s ease-out;

    .loader {
      opacity: 0;
      transition: all 0.3s ease-out;
    }

    .section-top {
      transform: translateY(-100%);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .section-bottom {
      transform: translateY(100%);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
  }
}

</style>
