import Panel from "../../Module/Panel";
import { _decorator, Button, RichText, UITransform, Node, Sprite, Texture2D, ImageAsset, SpriteFrame } from "cc";
import store from "../store/store";
import { observer, render } from "../store/decorators";

const {ccclass, property} = _decorator;

import HtmlToImage from 'html-to-image';
import { HTMLRichText } from "../../Component/HTMLRichText/HTMLRichText";

@observer
@ccclass('RulePanel')
export default class RulePanel extends Panel {

    static skin = "RulePanel";
    static group = "RulePanel";

    @property(Node) closeBtn: Node = null;
    @property(Node) spNode: Node = null;

    onLoad() {
        this.closeBtn.on(Button.EventType.CLICK, this.clickClose);
    }

    async start() {

        await store.updateRule();
        this.setRuleTxt(store.ruleInfo);

    }

    clickClose = () => {
        this.hidePanel();
    }

    // @render
    // render() {
    //     const {ruleInfo = ""} = store;
    //     this.setRuleTxt(ruleInfo);
    // }

    setRuleTxt(txt: string) {

        this.spNode.getComponent(HTMLRichText).html = txt;

        this.spNode.once(HTMLRichText.EventType.AFTER_RENDER, ()=>{

            const {width: pw, height: ph} = this.spNode.getComponent(UITransform);

            console.log(pw, ph);

            const width = this.spNode.parent.getComponent(UITransform).width;

            const height = ph * width / pw;

            console.log(width, height)

            this.spNode.getComponent(UITransform).setContentSize(width, height);

        });

    }

}
