import { _decorator, Component, Node, tween, Sprite, UIOpacity } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('FillSpriteEffect')
export class FillSpriteEffect extends Component {

    @property
    public fillDuration: number = 2; // 控制填充速度，单位为秒

    @property
    public enableFillEffect: boolean = false; // 控制是否启用图片显示的开关

    start() {
        // 确保节点有 Sprite 组件
        const sprite = this.node.getComponent(Sprite);
        const opacity = this.node.getComponent(UIOpacity);
        if (sprite && opacity) {
            // 设置初始透明度为 0（完全透明）
            opacity.opacity = 0;

            // 设置填充类型为 HORIZONTAL，从左到右
            sprite.type = Sprite.Type.FILLED;
            sprite.fillType = Sprite.FillType.HORIZONTAL;
            sprite.fillStart = 0; // 填充起点设为 0
            sprite.fillRange = 0; // 初始状态 fillRange 为 0，表示完全不显示
        }

    }

    // 触发效果的方法，可以在外部调用这个方法
    public triggerFillEffect() {
        if (this.enableFillEffect) {
            // 确保节点有 Sprite 和 UIOpacity 组件
            const sprite = this.node.getComponent(Sprite);
            const opacity = this.node.getComponent(UIOpacity);
            if (sprite && opacity) {
                // 先将透明度从 0 变为 255（完全显示）
                tween(opacity)
                    .to(0.5, { opacity: 255 }) // 0.5秒内将透明度提升到 255
                    .start();

                // 然后填充图片，从 0% 到 100%
                tween(sprite)
                    .to(this.fillDuration, { fillRange: 1 }) // fillRange 从 0 变化到 1
                    .start();
            }
        }
    }
}