import React, { useEffect, useState, useCallback } from "react";
import { DataGrid, Menu, Checkbox } from "@ttk/component";
import { useData, useActions, useCommit } from "@ttk/app-loader";
export default function RoleTableArea(props) {
  const commit = useCommit();
  const actions = useActions(props);
  const { loading } = useData([props, "showState"]).toJS();
  const userData = useData([props, "userData"]).toJS();
  const [selectAll, setSelectAll] = useState(false);
  const [rowSelection, setRowSelection] = useState(false);
  const tableThead = [
    {
      dataIndex: "selected",
      title: "checkbox",
      width: 30,
    },
    {
      dataIndex: "name",
      title: "姓名",
      width: 120,
    },
    {
      dataIndex: "servicePhone",
      title: "服务号码",
      width: 150,
    },
    {
      dataIndex: "phone",
      title: "手机号码",
      width: 180,
    },
    {
      dataIndex: "email",
      title: "电子邮箱",
      width: 180,
    },
    {
      dataIndex: "dept",
      title: "所属部门",
      width: 180,
    },
  ];
  //选中某行
  const onRowSelection = useCallback(
    (id, value) => {
      userData[id].selected = value.selected;
      userData[id].rowIndex = id;
      commit([props, "userData"], { type: "update-item", data: userData[id] });
      var newArr = userData.filter(function (obj) {
        return obj.selected === true;
      });
      var count = newArr.length;
      if (count === userData.length) {
        setSelectAll(value.selected);
      } else {
        setSelectAll(false);
      }
    },
    [userData]
  );
  //全选
  const onSelectAll = useCallback(
    (value) => {
      //行的CheckBox，全选或全不选
      value === true ? setRowSelection(value) : setRowSelection(!value);
      setSelectAll(value);
      commit([props, "userData"], { type: "selectall", data: value });
    },
    [userData]
  );
  return (
    <React.Fragment>
      <DataGrid
        defaul={true}
        maxHeight={600}
        loading={loading}
        pagination={false}
        rowsCount={userData.length}
        rowHeight={45}
        headerHeight={50}
        readonly={false}
        columns={tableThead.map((item, index) => {
          return (
            <DataGrid.Column
              isResizable={true}
              width={item.width}
              flexGrow={index === 0 ? 1 : index === 1 ? 2 : 1}
              fixed={index > 1 ? false : true}
              columnKey={item.dataIndex}
              key={index}
              header={
                <DataGrid.Cell key={index}>
                  {item.title === "checkbox" ? (
                    <Checkbox
                      onChange={(e) => onSelectAll(e.target.checked)}
                      checked={selectAll}
                    ></Checkbox>
                  ) : (
                    item.title
                  )}
                </DataGrid.Cell>
              }
              cell={({ rowIndex, ...props }) => {
                switch (item.dataIndex) {
                  case "selected":
                    return (
                      <DataGrid.Cell
                        key={index + rowIndex}
                        style={{ textAlign: "center" }}
                      >
                        <Checkbox
                          onChange={(e) =>
                            onRowSelection(rowIndex, {
                              selected: e.target.checked,
                            })
                          }
                          checked={userData[rowIndex][item.dataIndex]}
                        />
                      </DataGrid.Cell>
                    );
                  default:
                    return (
                      <DataGrid.TextCell
                        height={40}
                        key={index + rowIndex}
                        value={userData[rowIndex][item.dataIndex]}
                      />
                    );
                }
              }}
            ></DataGrid.Column>
          );
        })}
      ></DataGrid>
    </React.Fragment>
  );
}
