<script lang="tsx">
import { defineComponent, computed, onMounted, watch, PropType, CSSProperties } from 'vue'

export default defineComponent({
    name: 'SkySpin',
    props: {
        size: { type: Number, default: 42 },
        strokeWidth: { type: Number, default: 4 }
    },
    setup(props, ctx) {
        const spinStyle = computed<CSSProperties>(() => ({
            '--sky-spin-height': props.size + 16 + 'px',
            '--sky-spin-size': props.size + 'px',
            '--sky-spin-stroke-width': props.strokeWidth
        }))
        return () => <div class="sky-spin" style={spinStyle.value} v-loading={true}></div>
    }
})
</script>

<style lang="scss" scoped>
.sky-spin {
    height: var(--sky-spin-height);
    :deep(.el-sky-loading-spinner) {
        top: 8px;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    :deep(.circular) {
        width: var(--sky-spin-size);
        height: var(--sky-spin-size);
        .path {
            stroke-width: var(--sky-spin-stroke-width);
        }
    }
}
</style>
