<script lang="tsx">
import { defineComponent } from 'vue'

/**
 * Индикатор загрузки
 */
export default defineComponent({
  props: {
    /**
     * Текст заглушки
     */
    text: {
      type: String,
      default: 'Загрузка данных...',
    },
  },

  setup(props) {
    return () => (
      <div class="ark-ui-data-loader-box">
        <div class="ark-ui-monitor-with-loader">
          <ul class="ark-ui-data-loader">
            <li class="ark-ui-data-loader-line"></li>
            <li class="ark-ui-data-loader-line"></li>
            <li class="ark-ui-data-loader-line"></li>
          </ul>
        </div>
        <p class="ark-ui-data-loader-text">{ props.text }</p>
      </div>
    )
  },
})
</script>

<style lang="scss" scoped>

@keyframes icon {
  0% {
    width: 30%;
  }
  50% {
    width: 80%;
  }
  100% {
    width: 30%;
  }
}

.ark-ui-data-loader-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 250px;
  background-color: #FFF;
  border: 1px solid #F0F1F7;
  border-radius: 8px;
  position: sticky;
  scroll-snap-type: x;
  left: 0;

  .ark-ui-monitor-with-loader {
    position: relative;
    background-image: url('./assets/monitor.svg');
    background-repeat: no-repeat;
    width: 132px;
    height: 92px;

    .ark-ui-data-loader {
      position: absolute;
      display: flex;
      flex-direction: column;
      gap: 4px;
      top:50%;
      left:50%;
      transform: rotate(-90deg) translate(calc(100% - 8px), -50%);
      list-style-type: none;
      margin: 0;
      padding-left: 0;

      .ark-ui-data-loader-line {
        position: relative;
        display: block;
        width: 47px;
        height: 14px;
        background: #F0F1F7;
        border-radius: 4px;

        &:after {
          position: relative;
          display: block;
          content: '';
          height: 12px;
          background: #FFF;
          border: 1px solid #585B69;
          border-radius: 4px;
          animation: icon 1.75s ease-in-out infinite;
        }
        &:nth-child(2):after {
          animation-delay: -0.8s;
        }
        &:nth-child(3):after {
          animation-delay: -0.4s;
          background: #C5EDF1;
        }
      }
    }
  }

  .ark-ui-data-loader-text {
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    color: #27282E;
    margin: 16px 0 0;
  }
}
</style>
