<template>
    <div class="color-svg" v-if="svgContent">
        <div v-html="processedSvgContent" class="svg-container"></div>
    </div>
    <div class="color-svg-loading" v-else>
        <div class="loading-spinner"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';

// 组件属性
const props = defineProps({
    // SVG地址
    svgUrl: {
        type: String,
        required: true
    },
    // SVG颜色
    color: {
        type: String,
        default: null
    }
    ,
    size: {
        type: Number,
        default: null
    }
});

// 组件事件
const emit = defineEmits(['svg-loaded', 'svg-error']);

// 状态管理
const svgContent = ref<string>('');
const isLoading = ref<boolean>(false);
const error = ref<string>('');

// 处理后的SVG内容
const processedSvgContent = computed(() => {
    if (!svgContent.value) return '';

    // 替换SVG中的颜色
    let processed = svgContent.value;
    if (props.color) {

        // 替换fill属性
        processed = processed.replace(/fill="([^"]*)"/g, (match, p1) => {
            // 保留透明和none值
            if (p1 === 'none' || p1 === 'transparent') {
                return match;
            }
            return `fill="${props.color}"`;
        });

        // 替换stroke属性
        processed = processed.replace(/stroke="([^"]*)"/g, (match, p1) => {
            // 保留透明和none值
            if (p1 === 'none' || p1 === 'transparent') {
                return match;
            }
            return `stroke="${props.color}"`;
        });
    }

    if (props.size) {
        // 替换width属性
        processed = processed.replace(/width="([^"]*)"/g, (match, p1) => {
            if (props.size !== null) {
                return `width="${props.size}"`;
            }
            return match;
        });

        // 替换height属性
        processed = processed.replace(/height="([^"]*)"/g, (match, p1) => {
            if (props.size !== null) {
                return `height="${props.size}"`;
            }
            return match;
        });
    }

    // console.log(processed)
    return processed;
});

// 加载SVG内容
const loadSvgContent = async () => {
    if (!props.svgUrl) return;

    isLoading.value = true;
    error.value = '';

    try {
        const response = await fetch(props.svgUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const content = await response.text();
        svgContent.value = content;
        emit('svg-loaded', content);
    } catch (err) {
        error.value = err instanceof Error ? err.message : 'Failed to load SVG';
        emit('svg-error', error.value);
        console.error('Error loading SVG:', err);
    } finally {
        isLoading.value = false;
    }
};

// 监听属性变化
watch(
    () => props.svgUrl,
    () => {
        loadSvgContent();
    }
);

watch(
    () => props.color,
    () => {
        // 颜色变化时重新处理SVG，不需要重新加载
    }
);

// 组件挂载时加载SVG
onMounted(() => {
    loadSvgContent();
});
</script>

<style scoped>
.color-svg {
    display: inline-block;
    /* svg垂直居中 */
    vertical-align: middle;
}

.svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.color-svg-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>