const { ccclass, property } = cc._decorator;
/** 状态类型 */
enum StateType {
    /** 出去 */
    out = 0,
    /** 移动中 */
    moving = 1,
    /** 回来 */
    back = 2,
};

/**
 * 点击弹出或返回
 * - 节点需要添加按钮组件
 * - 组件会记录移动前的位置，点击后移动配置好的距离，再次点击则返回。
 * - 移动中点击无效
 * @author 薛鸿潇
 */
@ccclass
export default class ClickMoveBy extends cc.Component {
    /** 移动的距离 */
    @property({ tooltip: '要移动的距离' })
    private vec_move: cc.Vec2 = cc.Vec2.ZERO;


    /** 当前状态 */
    private state: number = StateType.out;
    /** 是否要返回 */
    private is_back: boolean = false;
    onLoad() {
        this.node.on('click', this.StartMoveBy, this);
    }

    start() {
        if (!this.node.getComponent(cc.Button)) this.node.addComponent(cc.Button);
    }
    /**
     * 开始移动
     * - 移动指定距离 || 返回相反的距离
     * @returns 
     */
    StartMoveBy() {
        if (this.state === StateType.moving) return;
        let next_state = 0;
        let temp_vec_move = cc.Vec2.ZERO;
        if (this.state === StateType.out) {
            temp_vec_move = this.vec_move;
            next_state = StateType.back;
        } else if (this.state === StateType.back) {
            temp_vec_move.x = -this.vec_move.x;
            temp_vec_move.y = -this.vec_move.y;
            next_state = StateType.out;
        }
        this.state = StateType.moving;
        let move1 = cc.tween().by(0.5, { position: { value: temp_vec_move, easing: 'backOut' } })
        let call1 = cc.tween().call(() => {
            this.state = next_state;
        })
        cc.tween(this.node).then(move1).then(call1).start();
    }
    // update (dt) {}
}