import React, { useEffect, useState, useCallback } from "react";
import { Switch, message } from "antd";
import { DataGrid, Button, Icon, Dropdown, Menu } from "@ttk/component";
import { useData, useActions, useCommit } from "@ttk/app-loader";
export default function TableArea(props) {
  const commit = useCommit();
  const actions = useActions(props);
  const { loading } = useData([props, "showState"]).toJS();
  const tableData = useData([props, "tableData"]).toJS();
  const tableThead = [
    {
      dataIndex: "roleName",
      title: "角色名称",
      width: 80,
    },
    {
      dataIndex: "entitleInsLevel",
      title: "有权部门层级",
      width: 80,
    },
    {
      dataIndex: "roleType",
      title: "角色类型",
      width: 80,
    },
    {
      dataIndex: "remark",
      title: "备注",
      width: 150,
    },
    {
      dataIndex: "operate",
      title: "操作",
      width: 80,
    },
  ];
  function handleMenuClick(e, rowIndex) {
    switch (e.key) {
      case "1":
        actions.userSearch({ roleId: tableData[rowIndex].roleId });
        actions.RolePostList();
        commit([props, "showModal"], { type: "showGwlb", data: true });
        break;
      case "2":
        actions.treeSearch({ roleId: tableData[rowIndex].roleId });
        actions.getTreeData();
        commit([props, "showModal"], { type: "showYyqx", data: true });
        break;
      case "3":
        actions.treeSearch({ roleId: tableData[rowIndex].roleId });
        actions.getCheckTree();
        commit([props, "showModal"], { type: "showFpqx", data: true });
        break;
      default:
        break;
    }
  }
  useEffect(() => {
    async function fetchData() {
      commit([props, "showState"], true);
      await actions.tableData();
      commit([props, "showState"], false);
    }
    fetchData();
  }, []);
  //点击编辑按钮,获取此行数据
  function edit(rowIndex) {
    commit([props, "showModal"], { type: "visible", data: true });
    commit([props, "showModal"], { type: "isEdit", data: true });
    tableData[rowIndex].rowIndex = rowIndex; //这一行数据
    commit([props, "FormData"], { type: "show", data: tableData[rowIndex] });
    actions.updateFormObj(tableData[rowIndex]);
  }
  //switch开关
  function onChange(e, rowIndex) {
    tableData[rowIndex].rowIndex = rowIndex;
    e === false
      ? (tableData[rowIndex].isValid = "N")
      : (tableData[rowIndex].isValid = "Y");
    commit([props, "FormData"], { type: "update", data: tableData[rowIndex] });
    actions.updateTableItem(tableData[rowIndex]);
    message["success"]({
      content: e === false ? "停用成功" : "启用成功",
    });
  }
  return (
    <React.Fragment>
      <DataGrid
        defaul={true}
        maxHeight={600}
        loading={loading}
        pagination={false}
        rowsCount={tableData.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 ? 1 : 1}
              fixed={index > 1 ? false : true}
              columnKey={item.dataIndex}
              key={index}
              header={<DataGrid.Cell key={index}>{item.title}</DataGrid.Cell>}
              cell={({ rowIndex, ...props }) => {
                switch (item.dataIndex) {
                  case "operate":
                    return (
                      <DataGrid.Cell
                        key={index + rowIndex}
                        style={{ textAlign: "center" }}
                      >
                        <Switch
                          size="small"
                          checked={
                            tableData[rowIndex].isValid === "Y" ? true : false
                          }
                          onChange={(e) => onChange(e, rowIndex)}
                        />
                        <a onClick={(e) => edit(rowIndex)}>
                          <Icon type="edit" style={{ margin: "0 10px" }} />
                        </a>
                        <Dropdown
                          overlay={
                            <Menu onClick={(e) => handleMenuClick(e, rowIndex)}>
                              <Menu.Item key="1">岗位列表</Menu.Item>
                              <Menu.Item key="2">已有权限</Menu.Item>
                              <Menu.Item key="3">分配权限</Menu.Item>
                            </Menu>
                          }
                        >
                          <Button>
                            更多 <Icon type="down" />
                          </Button>
                        </Dropdown>
                      </DataGrid.Cell>
                    );
                  default:
                    return (
                      <DataGrid.TextCell
                        height={40}
                        key={index + rowIndex}
                        value={tableData[rowIndex][item.dataIndex]}
                      />
                    );
                }
              }}
            ></DataGrid.Column>
          );
        })}
      ></DataGrid>
    </React.Fragment>
  );
}
