import React, { useState, useCallback } from "react";
import { Card, Row, Col, Radio, Spin, Layout } from "@ttk/component";
import { useActions, useData, useCommit } from "@ttk/app-loader";
import Pagination from "./components/Pagination";
import PageHeader from "./components/PageHeader";
import TableArea from "./components/TableArea";
export default function TabsPage(props) {
  const commit = useCommit();
  const actions = useActions(props);
  const { allocated } = useData([props, "showModal"]).toJS();
  const { entity } = useData([props, "roleSearchParam"]).toJS();
  const handleChange = useCallback(async (e) => {
    commit([props, "showModal"], { type: "allocated", data: e.target.value });
    //isNeedExists='Y已分配表格，'N'未分配表格
    e.target.value === true
      ? (entity.isNeedExists = "Y")
      : (entity.isNeedExists = "N");
    actions.roleSearch({ isNeedExists: entity.isNeedExists });
    //切换已分配,未分配表格
    commit([props, "showState"], true);
    actions.roleData();
    commit([props, "showState"], false);
  }, []);
  return (
    <Card className="ttk-card-form" bordered={false}>
      <Spin spinning={false} delay={50}>
        <Layout className="content">
          <Card bordered={true} style={{marginBottom:10}}>
            <Row
              style={{
                padding: "10px 10px 0",
              }}
            >
              <Col span={6}>
                <Radio.Group
                  onChange={(e) => handleChange(e)}
                  value={allocated}
                >
                  <Radio.Button value={true}>已分配</Radio.Button>
                  <Radio.Button value={false}>未分配</Radio.Button>
                </Radio.Group>
              </Col>
            </Row>
            <Row style={{ margin: "10px 0", padding: "0 10px" }}>
              <PageHeader {...props} />
            </Row>
            <Row style={{ minHeight: 250 }}>
              <TableArea {...props} />
            </Row>
          </Card>
          <Row>
            <Pagination {...props} />
          </Row>
        </Layout>
      </Spin>
    </Card>
  );
}
