import React, { useState, useCallback, useEffect } from "react";
import { Form } from "antd";
import { Input, Button, AntdSelect as Select } 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 RolePostList = useData([props, "RolePostList"]).toJS();
  const depLevelIdOption = [
    "总公司",
    "省公司",
    "市公司",
    "分公司",
    "门店",
    "一般部门",
    "战区",
  ];
  // 更新查询表单方法
  const updateForm = useCallback((e) => {
    async function asyncFun(arges) {
      await actions.userSearch(e);
    }
    asyncFun(e);
  }, []);

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

  // 重置
  const onClear = useCallback((e) => {
    async function asyncFun() {
      commit([props, "showState"], true);
      commit([props, "userSearchParam"], {
        type: "reset_search",
        data: { name: "", depLevelId: "" },
      });
      actions.RolePostList();
      commit([props, "showState"], false);
    }
    asyncFun();
  }, []);
  //取消授权用户
  function cancel() {
    const checkedData = RolePostList.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>
          <Select
            filterOption={null}
            allowClear={true}
            value={entity.depLevelId}
            onChange={(e) => updateForm({ depLevelId: e })}
            placeholder="有权部门层级"
            style={{ width: 160 }}
          >
            {depLevelIdOption.map((item, index) => (
              <Select.Option key={`${index}${item}`} value={String(index)}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </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>
  );
};
