import React, { useEffect, useState, useCallback } from "react";
import { Modal, Table, Switch } from "antd";
import { DataGrid, Layout, Button, Icon, Input, Select } 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: "organizationCode",
      title: "组织机构代码",
      width: 120,
    },
    {
      dataIndex: "insName",
      title: "机构名称",
      width: 150,
      flexGrow: 1,
    },
    {
      dataIndex: "typeId",
      title: "机构类型",
      width: 80,
    },
    {
      dataIndex: "contact",
      title: "联系人",
      width: 120,
    },
    {
      dataIndex: "phone",
      title: "联系电话",
      width: 120,
    },
    {
      dataIndex: "insManager",
      title: "机构管理员",
      width: 120,
    },
    {
      dataIndex: "insManagerPhone",
      title: "管理员电话",
      width: 80,
    },
    {
      dataIndex: "operate",
      title: "操作",
      width: 80,
    },
  ];
  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(rowIndex) {
    tableData[rowIndex].rowIndex = rowIndex;
    tableData[rowIndex].checked = !tableData[rowIndex].checked;
    commit([props, "FormData"], { type: "show", data: 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"
                          defaultChecked={tableData[rowIndex].checked}
                          onChange={(e) => onChange(rowIndex)}
                        />
                        <a onClick={(e) => edit(rowIndex)}>
                          <Icon type="edit" style={{ margin: "0 10px" }} />
                        </a>
                        <Link
                          to={`${location.root}/layout/admin-organization-page-departmentManager`}
                        >
                          <Icon type="question-circle" />
                        </Link>
                      </DataGrid.Cell>
                    );
                  default:
                    return (
                      <DataGrid.TextCell
                        height={40}
                        key={index + rowIndex}
                        value={tableData[rowIndex][item.dataIndex]}
                      />
                    );
                }
              }}
            ></DataGrid.Column>
          );
        })}
      ></DataGrid>
    </React.Fragment>
  );
}
