import React, { useEffect, useState, useCallback } from "react";
import { Modal, Table, Switch } from "antd";
import {
  DataGrid,
  Layout,
  Button,
  Icon,
  Input,
  Dropdown,
  Menu,
} from "@ttk/component"; // '../datagrid'
import { useData, useActions, useCommit } from "@ttk/app-loader";
import { Link, Redirect } from "@ttk/router";
export default function TableArea(props) {
  const commit = useCommit();
  const actions = useActions(props);
  const location = props.location;
  const { loading } = useData([props, "showState"]).toJS();
  const tableData = useData([props, "tableData"]).toJS();
  const tableThead = [
    {
      dataIndex: "postName",
      title: "岗位名称",
      width: 120,
    },
    {
      dataIndex: "postCode",
      title: "岗位编码",
      width: 150,
    },
    {
      dataIndex: "entitleInsLevelName",
      title: "有权部门层级",
      width: 80,
    },
    {
      dataIndex: "busTypeId",
      title: "业务类型",
      width: 120,
    },
    {
      dataIndex: "remark",
      title: "备注",
      width: 120,
    },
    {
      dataIndex: "operate",
      title: "操作",
      width: 80,
    },
  ];
  function handleMenuClick(e, rowIndex) {
    if (e.key === "1") {
      //点击行中的角色分配，提交此行postId作为角色分配弹出框查询参数
      actions.roleSearch({ postId: tableData[rowIndex].postId });
      actions.roleData();
      commit([props, "showModal"], { type: "showRole", data: true });
    } else {
      actions.userSearch({ postId: tableData[rowIndex].postId });
      actions.userData();
      commit([props, "showModal"], { type: "showUser", data: true });
    }
  }
  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]);
  }
  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={100}
              flexGrow={index === 0 ? 3 : index === 1 ? 2 : 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>
                          }
                        >
                          <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>
  );
}
