import React from "react";
import PageCss from "./page-my.css";
import {CGReactPage, CGReactUtils} from "cgreact-core";
/* 根据状态提升的哲学思想，你最好自定义自己的页面数据结构*/
type MyPageState = {
    name: string
}
export default class MyPage extends CGReactPage<MyPageState>
{
    private InputName = "世界";

    protected affectStyle(): JSS
    {
        /* 这叫CssInJS，这是在CGReact中添加的，React没有的特性哦*/
        return CGReactUtils.mergeObject({
            ".my": {
                border: "1px solid red"
            }
        }, PageCss);
    }

    protected async initState(): Promise<MyPageState>
    {
        return {
            name: "世界 "
        };
    }

    protected renderView():JSX
    {
        return <div>
            <h1 className="my page">输入了：{this.InputName}，你好啊！ {this.state.name}!</h1>
            <span>输入你的名字：</span>
            <input type="text" defaultValue={this.InputName} onChange={this.onInputValueChange.bind(this)}/>
            <button onClick={this.onButtonClick.bind(this)} style={{marginLeft: "20px"}}>点击一下子我</button>
        </div>;
    }

    private onInputValueChange(e): void
    {
        // InputName是自定义变量，不会触发页面的自动数据驱动更新，但你仍可以显示的调用refresh来更新
        this.InputName = e.target.value;
        // this.refresh();
    }

    private onButtonClick(): void
    {
        // 对state的修改会由CGReact框架自动数据驱动，这是通过ES7的代理机制Proxy来实现的哦
        this.state.name = this.InputName;
    }
}