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

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 busTypeIdOption = [
    "金财互联",
    "金财管家中介客户",
    "汇算清缴",
    "个税增值",
    "金财助手",
    "平台服务商",
    "金财惠税",
    "云配置中心",
  ];
  // 更新
  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);
  }, []);
  //switch
  function change(e) {
    e.isValid === false ? (formData.isValid = "N") : (formData.isValid = "Y");
    const Data = Object.assign(formData, { isValid: formData.isValid });
    commit([props, "FormData"], { type: "update", data: Data }); //改变弹出框表单内容
  }
  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.postName.state}
                  help={validateState.postName.message}
                >
                  <Input
                    value={formData.postName}
                    onChange={(e) => updateForm({ postName: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="创建部门" className="label120">
                  <Input
                    value={formData.createDepName}
                    onChange={(e) =>
                      updateForm({ createDepName: e.target.value })
                    }
                    disabled
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="有权部门层级" className="label120">
                  <Input
                    value={formData.entitleInsLevelName}
                    onChange={(e) =>
                      updateForm({ entitleInsLevelName: e.target.value })
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="状态"
                  className="label120"
                  required={true}
                  validateStatus={validateState.isValid.state}
                  help={validateState.isValid.message}
                >
                  <Switch
                    size="small"
                    defaultChecked={formData.isValid === "Y" ? true : false}
                    checked={formData.isValid === "Y" ? true : false}
                    onChange={(e) => change({ isValid: e })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="岗位编码"
                  className="label120"
                  required={true}
                  validateStatus={validateState.postCode.state}
                  help={validateState.postCode.message}
                >
                  <Input
                    value={formData.postCode}
                    onChange={(e) => updateForm({ postCode: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="业务类型"
                  className="label120"
                  required={true}
                  validateStatus={validateState.busTypeId.state}
                  help={validateState.busTypeId.message}
                >
                  <Select
                    filterOption={null}
                    allowClear={true}
                    value={formData.busTypeId}
                    onChange={(e) => updateForm({ busTypeId: e })}
                  >
                    {busTypeIdOption.map((item, index) => (
                      <Select.Option
                        key={`${index}${item}`}
                        value={String(index)}
                      >
                        {item}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="备注" className="label120">
                  <TextArea
                    value={formData.remark}
                    onChange={(e) => updateForm({ remark: e.target.value })}
                    type="textarea"
                  />
                </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>
  );
}
