const { ccclass, property } = cc._decorator;

@ccclass
export default class RippleShrink extends cc.Component {
    @property(cc.Sprite)
    targetSprite: cc.Sprite = null!;   // 拖自己的 Sprite

    private mat: cc.Material = null!;
    private running = false;
    private totalTime = 0;
    private timer = 0;
    private interval = 0.2; // 间隔时间0.2秒
    private shouldShow = false; // 标记是否应该显示和运行动画

    onLoad() {
        const shared = this.targetSprite.getMaterial(0);
        this.mat = shared;
        this.mat.setProperty('time', 0);

        // 设置中心点为纹理中心
        this.mat.setProperty('center', [0.5, 0.5]);

        // 初始化时隐藏节点
        this.node.active = false;
    }

    // 开始涟漪效果
    startRipple() {
        this.shouldShow = true;
        this.node.active = true;
    }

    // 停止涟漪效果
    stopRipple() {
        this.shouldShow = false;
    }

    // 触发波纹效果的方法
    triggerRipple() {
        // 使用纹理中心作为波纹起始点
        this.mat.setProperty('center', [0.5, 0.5]);
        this.totalTime = 0;
        this.running = true;
    }

    update(dt: number) {
        if (!this.shouldShow && !this.running) {
            // 如果不需要显示且当前没有运行中的动画，则隐藏节点
            if (this.node.active) {
                this.node.active = false;
            }
            return;
        }

        if (!this.running) {
            // 不在运行状态下，计算间隔时间
            this.timer += dt;
            if (this.timer >= this.interval) {
                if (this.shouldShow) {
                    this.triggerRipple();
                }
                this.timer = 0; // 重置计时器
            }
            return;
        }

        this.totalTime += dt;
        this.mat.setProperty('time', this.totalTime);

        // 当波纹效果完成时
        if (this.totalTime > 2.0) {
            this.running = false;
            // 重置计时器，准备下次执行
            this.timer = 0;

            // 如果已经要求停止，则隐藏节点
            if (!this.shouldShow) {
                this.node.active = false;
            }
        }
    }
}