Component({
    /**
     * 组件的属性列表
     */
    properties: {
        key: {
            type: Number,
            value: 0,
        },
        svg: {
            type: String,
            value: '',
        },
        color: {
            type: String,
            value: '',
        },
    },
    /**
     * 组件的初始数据
     */
    data: {
        svgDataUri: '',
    },
    /**
     * 组件生命周期
     */
    lifetimes: {
        attached() {
            this.generateSvgDataUri();
        },
    },
    /**
     * 监听属性变化
     */
    observers: {
        'svg, color': function () {
            this.generateSvgDataUri();
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        /**
         * 生成完整的 SVG Data URI
         */
        generateSvgDataUri() {
            const { svg, color } = this.data;
            if (!svg) return;

            // 创建完整的 SVG 字符串，替换填充颜色
            const coloredSvg = svg.replace(/fill="#ff0000"/g, `fill="${color || '#ff0000'}"`);
            const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${coloredSvg}</svg>`;

            // 转换为 Data URI
            const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;

            this.setData({
                svgDataUri: svgDataUri
            });
        },
        onDelete() {
            const { key } = this.data;
            this.triggerEvent('onDelete', { key });
        },
        onColorTap() {
            const { key, color } = this.data;
            this.triggerEvent('onColorTap', { key, color });
        },
    },
});