import { css, run } from "uebersicht"

export const command = "ls -a"

export const refreshFrequency = 100000 // ms

export const className = css`
  left: 40px;
  top: 50px;
`
const hello = css`
  font-size: 40px;
  color: #fff;
`

const liclass = css`
  color: #fff;
`

// 定义变量
export const initialState = { 
  count: 2,
  list: [
    { id: 1, title: '你好1' },
    { id: 2, title: '你好2' },
    { id: 3, title: '你好3' },
  ]
};

// 初始化函数
export const init = (dispatch) => {
  console.log("init run....")
}

// 更新数据状态，刷新页面
export const updateState = (event, previousState) => {
  console.log("event: ", event);
  console.log("previousState: ", previousState);
  return Object.assign(previousState,event);
}

export const render = ({ output, count, list }, dispatch) => (
  <div>
    <h1 className={hello}>测试：{count}</h1>
    <h1 className={hello}>你好世界{output}</h1>
    <ul>
      {
        list.map((e,i) => {
          return <li className={liclass} key={i}>{e.title}</li>
        })
      }
    </ul>
    <button onClick={() => {
      count+=1;
      dispatch({ count: count })
      console.log("点击事件");

    }}>button按钮 - 点我</button>
  </div>
)