<template>
  <div
    v-if="mode === 'overlay'"
    class="vm-loading vm-loading--overlay"
    :class="{ 'is-fixed': fixed }"
    :style="overlayStyle"
    aria-busy="true"
    aria-live="polite"
  >
    <i
      class="ri-loader-4-line vm-loading__spinner"
      :style="spinnerStyle"
      aria-hidden="true"
    />
  </div>
  <div
    v-else
    class="vm-loading vm-loading--footer"
    :style="footerStyle"
    role="status"
  >
    {{ status === 'end' ? (endText ?? crudLabel('noMore')) : (loadingText ?? crudLabel('loading')) }}
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { crudLabel } from '../crud/style'

defineOptions({ name: 'vm-loading' })

const props = withDefaults(
  defineProps<{
    /** overlay：蒙层转圈；footer：列表底部文案 */
    mode?: 'overlay' | 'footer'
    /** footer：loading = 加载中…；end = 没有更多了 */
    status?: 'loading' | 'end'
    /** overlay 蒙层色，默认主题半透明 card */
    overlayColor?: string
    /** overlay 转圈色，默认 --brand */
    spinnerColor?: string
    /** footer 文案色，默认 --muted-foreground */
    textColor?: string
    /** overlay 是否 fixed 盖住视口；默认 absolute 盖住定位父级 */
    fixed?: boolean
    loadingText?: string
    endText?: string
  }>(),
  {
    mode: 'overlay',
    status: 'loading',
    fixed: false,
    loadingText: undefined,
    endText: undefined,
  },
)

const overlayStyle = computed(() => ({
  background:
    props.overlayColor ||
    'color-mix(in srgb, var(--card) 70%, transparent)',
}))

const spinnerStyle = computed(() => ({
  color: props.spinnerColor || 'var(--brand)',
}))

const footerStyle = computed(() => ({
  color: props.textColor || 'var(--muted-foreground)',
}))
</script>

<style lang="scss" scoped>
.vm-loading--overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(1px);
  pointer-events: all;

  &.is-fixed {
    position: fixed;
  }
}

.vm-loading__spinner {
  font-size: 28px;
  line-height: 1;
  animation: vm-loading-spin 0.8s linear infinite;
}

.vm-loading--footer {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 0;
  background: transparent;
  font-size: 12px;
  text-align: center;
}

@keyframes vm-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
