import Panel from "../../Module/Panel";
import { _decorator, Button, Director, director, game, Label, Node, RenderTexture, Sprite } from "cc";
import { observer } from "../store/decorators";
import store from "../store/store";
import shareStore from "../store/shareStore";

const { ccclass, property } = _decorator;

@observer
@ccclass("GamePosterPanel")
export default class GamePosterPanel extends Panel {

    static bundle = "GamePosterPanel";
    static skin = "GamePosterPanel";

    @property(RenderTexture) rt: RenderTexture = null;
    @property(Label) lengthTxt: Label = null;
    @property(Label) killTxt: Label = null;
    @property(Sprite) qrcode: Sprite = null;

    async start() {
        this.lengthTxt.string = `${this.data.score}`;
        this.killTxt.string = `${this.data.finalKill}`;
        this.qrcode.spriteFrame = shareStore.inviteInfo.qrCode;
        // director.once(Director.EVENT_AFTER_DRAW, this.copyRenderTex);
        // director.once(Director.EVENT_END_FRAME, this.copyRenderTex);
        this.scheduleOnce(this.copyRenderTex, 0.5);
    }

    onClose = () => {
        this.hidePanel();
        this.dom && this.dom.remove();
        delete window["__tempClick"];
    };

    dom: HTMLDivElement = null;
    _tempCanvas: HTMLCanvasElement = null;
    _canvas: HTMLCanvasElement = null;

    copyRenderTex = () => {
        const width = this.rt.width;
        const height = this.rt.height;
        const buffer = this.rt.readPixels();

        if (!this._canvas) {
            this._canvas = document.createElement("canvas");
            this._canvas.width = width;
            this._canvas.height = height;
            this._tempCanvas = document.createElement("canvas");
            this._tempCanvas.width = width;
            this._tempCanvas.height = height;
        }

        const tempCtx = this._tempCanvas.getContext("2d");
        tempCtx.clearRect(0, 0, width, height);
        const imageData = tempCtx.createImageData(width, height);
        imageData.data.set(buffer);
        tempCtx.putImageData(imageData, 0, 0);

        const ctx = this._canvas.getContext("2d");
        ctx.scale(1, -1);
        ctx.drawImage(
            this._tempCanvas,
            0, 0, width, height,
            0, -height, width, height,
        );

        const posterImg = this._canvas.toDataURL();
        // console.log('this.posterBase64Data', this.posterBase64Data);

        // 本地预览海报结果时 可放开
        const wRem = width / 100;
        const hRem = height / 100;

        window["__tempClick"] = this.onClose;
        const domHtml = `
            <div
                onclick="window.__tempClick()"
                class="poster"
                style="
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                <img
                    src="${posterImg}" 
                    style="width: ${wRem}rem; height: ${hRem}rem; pointer-events: auto;"
                >
            </div>
        `

        this.dom = document.createElement("div");
        this.dom.innerHTML = domHtml;
        game.container.appendChild(this.dom);
    };

}
