import React, { useEffect, useState, useCallback } from "react";
import {
  DataGrid,
  Layout,
  Spin,
  Card,
  Row,
  Col,
  Form,
  Input,
  Button,
  Modal,
  AntdSelect as Select,
} from "@ttk/component";
import { message } from "antd";
import { useData, useActions, useCommit } from "@ttk/app-loader";

export default function ModalForm(props) {
  const commit = useCommit();
  const actions = useActions(props);
  const formData = useData([props, "FormData"]).toJS();
  const { isEdit } = useData([props, "showModal"]).toJS();
  const validateState = useData([props, "validateState"]).toJS();
  const typeIdOption = [
    "主营机构",
    "服务机构",
    "客户机构",
    "服务商机构",
    "城市运营商",
    "金财产业园区",
    "金财专家",
    "财税合伙人",
  ];
  const industryTypeOption = [
    "计算机软件",
    "计算机硬件",
    "互联网",
    "电子设备",
    "财务金融",
  ];

  // 更新
  function update() {
    Modal.confirm({
      title: "确认",
      content: "是否确认更新表单",
      onOk: () => {
        const result = actions.updateTableItem(formData);
        if (result.errorCode === "0") message.success("修改成功");
      },
    });
  }
  //新增
  const add = useCallback(() => {
    actions.addTableItem(formData);
  }, []);
  // 取消关闭弹框
  const cancel = useCallback(() => {
    commit([props, "showModal"], { type: "visible", data: false });
  }, []);
  // 更新表单方法
  const updateForm = useCallback((e) => {
    async function asyncFun(arges) {
      await actions.updateFormObj(e);
    }
    asyncFun(e);
  }, []);
  return (
    <Card className="ttk-card-form" bordered={false}>
      <Spin spinning={false} delay={50}>
        <Layout className="content">
          <Form className="mk-form">
            <Row>
              <Col span={12}>
                <Form.Item
                  label="机构编码"
                  className="label120"
                  required={true}
                  validateStatus={validateState.insId.state}
                  help={validateState.insId.message}
                >
                  <Input
                    value={formData.insId}
                    onChange={(e) => updateForm({ insId: e.target.value })}
                    disabled
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="机构类型"
                  className="label120"
                  required={true}
                  validateStatus={validateState.typeId.state}
                  help={validateState.typeId.message}
                >
                  <Select
                    filterOption={null}
                    allowClear={true}
                    value={formData.typeId}
                    onChange={(e) => updateForm({ typeId: e })}
                  >
                    {typeIdOption.map((item, index) => (
                      <Select.Option
                        key={`${index}${item}`}
                        value={String(index)}
                      >
                        {item}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="业务类型"
                  className="label120"
                  required={true}
                  validateStatus={validateState.busTypeId.state}
                  help={validateState.busTypeId.message}
                >
                  <Input
                    value={formData.busTypeId}
                    onChange={(e) => updateForm({ busTypeId: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="组织机构代码"
                  className="label120"
                  required={true}
                  validateStatus={validateState.organizationCode.state}
                  help={validateState.organizationCode.message}
                >
                  <Input
                    value={formData.organizationCode}
                    onChange={(e) =>
                      updateForm({ organizationCode: e.target.value })
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="机构名称"
                  className="label120"
                  required={true}
                  validateStatus={validateState.insName.state}
                  help={validateState.insName.message}
                >
                  <Input
                    value={formData.insName}
                    onChange={(e) => updateForm({ insName: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="行业分类"
                  className="label120"
                  required={true}
                  validateStatus={validateState.industryType.state}
                  help={validateState.industryType.message}
                >
                  <Select
                    filterOption={null}
                    allowClear={true}
                    value={formData.industryType}
                    onChange={(e) => updateForm({ industryType: e })}
                  >
                    {industryTypeOption.map((item, index) => (
                      <Select.Option
                        key={`${index}${item}`}
                        value={String(index)}
                      >
                        {item}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="企业法人"
                  className="label120"
                  required={true}
                  validateStatus={validateState.legal.state}
                  help={validateState.legal.message}
                >
                  <Input
                    value={formData.legal}
                    onChange={(e) => updateForm({ legal: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="企业联系人"
                  className="label120"
                  required={true}
                  validateStatus={validateState.contact.state}
                  help={validateState.contact.message}
                >
                  <Input
                    value={formData.contact}
                    onChange={(e) => updateForm({ contact: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="企业联系人电话"
                  className="label120"
                  required={true}
                  validateStatus={validateState.phone.state}
                  help={validateState.phone.message}
                >
                  <Input
                    value={formData.phone}
                    onChange={(e) => updateForm({ phone: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="机构管理员" className="label120">
                  <Input
                    value={formData.insManager}
                    onChange={(e) => updateForm({ insManager: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="管理员联系电话" className="label120">
                  <Input
                    value={formData.insManagerPhone}
                    onChange={(e) =>
                      updateForm({ insManagerPhone: e.target.value })
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="企业地址" className="label120">
                  <Input
                    value={formData.address}
                    onChange={(e) => updateForm({ address: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="企业网址" className="label120">
                  <Input
                    value={formData.addrWeb}
                    onChange={(e) => updateForm({ addrWeb: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="备注" className="label120">
                  <Input
                    value={formData.remark}
                    onChange={(e) => updateForm({ bz: e.target.value })}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col
                className="form-footer"
                span={24}
                style={{ textAlign: "center" }}
              >
                <Button onClick={cancel}>取消</Button>
                {isEdit ? (
                  <Button type="primary" _visible="true" onClick={update}>
                    确定
                  </Button>
                ) : (
                  <Button type="primary" _visible="true" onClick={add}>
                    确定
                  </Button>
                )}
              </Col>
            </Row>
          </Form>
        </Layout>
      </Spin>
    </Card>
  );
}
