import React, { useState, useCallback, useEffect } from "react";
import { Form } from "antd";
import { Input, Button } from "@ttk/component";
import { useActions, useData, useCommit } from "@ttk/app-loader";

export default React.memo(Header);
function Header(props) {
  return <Content {...props} />;
}

const Content = (props) => {
  const actions = useActions(props);
  const commit = useCommit();
  const { entity } = useData([props, "userSearchParam"]).toJS();
  const userData = useData([props, "userData"]).toJS();
  // 加载数据
  useEffect(() => {
    async function fetchData() {
      commit([props, "showState"], true);
      await actions.userData();
      commit([props, "showState"], false);
    }
    fetchData();
  }, []);

  // 更新查询表单方法
  const updateForm = useCallback((e) => {
    async function asyncFun(arges) {
      await actions.userSearch(e);
    }
    asyncFun(e);
  }, []);

  // 查询
  const onSearch = useCallback((e) => {
    commit([props, "showState"], true);
    actions.userData();
    commit([props, "showState"], false);
  }, []);

  // 重置
  const onClear = useCallback((e) => {
    async function asyncFun() {
      commit([props, "showState"], true);
      commit([props, "userSearchParam"], {
        type: "reset_search",
        data: { name: "" },
      });
      actions.userData();
      commit([props, "showState"], false);
    }
    asyncFun();
  }, []);
  //取消授权用户
  function cancel(){
    const checkedData=userData.filter(item=>{
      return item.selected
    })
    actions.cancelUser(checkedData)
  };
  return (
    <div>
      <Form layout="inline">
        <Form.Item>
          <Input
            value={entity.name}
            onChange={(e) => updateForm({ name: e.target.value })}
            placeholder="请输入姓名/手机号"
          />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            onClick={onSearch}
            style={{ marginRight: "10px" }}
          >
            查询
          </Button>
          <Button onClick={onClear}>重置</Button>
        </Form.Item>
        <Form.Item style={{ float: "right", marginRight: 0 }}>
            <Button type="primary"  onClick={cancel}>
              取消授权用户
            </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
