import { _decorator, EventTouch, Label, Node, CCInteger } from "cc";
import { ecs } from "../../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { SingletonModuleComp } from "../../common/SingletonModuleComp";
import { SkinChangeComp } from "../bll/SkinChange";

const { ccclass, property } = _decorator;

/** 皮肤Item界面 */
@ccclass('CheckpointSkinItemViewComp')
@ecs.register('CheckpointSkinItemView', false)
export class CheckpointSkinItemViewComp extends CCComp {


    @property({ type: CCInteger, visible: true, tooltip: '当前关卡' })
    id: number = 1

    private btn_change_skin
    private label_lock
    private img_inuse
    private img_lock

    onAdded(args: any) {
        console.log(args);
    }

    onLoad() {
        this.btn_change_skin = this.node.getChildByPath("Replacement")
        this.label_lock = this.node.getChildByPath("label_lock")
        this.img_lock = this.node.getChildByPath("lock")
        this.img_inuse = this.node.getChildByPath("inuse")
        this.label_lock.getComponent(Label).string = `关卡${this.id}解锁`
        this.btn_change_skin.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
    }


    private onTouchEnd(event: EventTouch) {

        const comp = ecs.getSingleton(SingletonModuleComp).account.checkpoint.add(SkinChangeComp)
        comp.skinId = this.id
        event.propagationStopped = true;
    }

    protected lateUpdate(dt: number): void {
        const accountModel = ecs.getSingleton(SingletonModuleComp).account.AccountModel
        if (accountModel.lv >= this.id || (accountModel.reward && this.id === 3)) { // 抖音栏侧奖励皮肤
            this.img_lock.active = false
            this.label_lock.active = false
            if (accountModel.skin == this.id) {
                this.btn_change_skin.active = false
                this.img_inuse.active = true
            } else {
                this.btn_change_skin.active = true
                this.img_inuse.active = false
            }
        } else {
            this.img_lock.active = true
            this.btn_change_skin.active = false
            this.img_inuse.active = false
            this.label_lock.active = true
        }

    }



    reset() {
        this.node.destroy();
    }
}