<script setup>
import { Spin } from "@king-design/vue";
import { computed } from "vue";

const props = defineProps({
  type: {
    type: String, // 'success' | 'error' | 'warning' | 'info'
    default: ''
  },
  text: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: ''
  },
  spinSize: {
    type: String,
    default: 'mini',
    validator(value) {
      return ['large', 'default', 'small', 'mini'].includes(value)
    }
  },
  spinStyle: {
    type: Object,
    default: () => ({
      width: '14px',
    })
  }
})

const colorMap = {
  success: '#36B42A',
  error: '#FF4433',
  warning: '#FFA940',
  info: '#1890FF'
}
const statusColor =computed(() => {
  return colorMap[props.type] || props.color
})

const isLoading = computed(() => {
  return props.type === 'loading'
})

const renderText = computed(() => {
  return props.text || props.label
})

</script>

<template>
  <div v-if="isLoading" class="flex-center-align loading-wrap">
    <Spin :size="spinSize"/>
    <span class="loading-text">{{ renderText }}</span>
  </div>
  <div v-else class="status-wrap flex-center-align">
    <span class="circle" :class="[type]"></span>
    <span class="text">{{ renderText }}</span>
  </div>
</template>

<style scoped lang="less">
.flex-center-align {
  display: flex;
  align-items: center;

}
.loading-wrap {
  .loading-text {
    margin-left: 8px;
  }
  :deep(.k-spin-canvas) {
    width: v-bind('spinStyle.width');
    height: v-bind('spinStyle.width');
  }
}
.status-wrap {
  .circle {
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: v-bind(statusColor);
  }
}
</style>
