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 roleTypeOption = ["菜单角色"];
  const entitleInsLevelOption = [
    "总公司",
    "省公司",
    "市公司",
    "分公司",
    "门店",
    "一般部门",
    "战区",
  ];
  // 更新
  function update() {
    Modal.confirm({
      title: "确认",
      content: "是否确认更新表单",
      onOk: () => {
        const result = actions.updateTableItem(formData);
        if (result.errorCode === "0") message.success("修改成功");
      },
    });
  }
  //新增
  function add() {
    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);
  }, []);
  function selectLevel(e) {
    var param;
    e.entitleInsLevel.length === 0
      ? (param = "")
      : (param = e.entitleInsLevel.join(";"));
    const Data = Object.assign(formData, {
      entitleInsLevel: param,
    });
    actions.updateFormObj(Data);
    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">
            <Form.Item
              label="角色名称"
              className="label120"
              required={true}
              validateStatus={validateState.roleName.state}
              help={validateState.roleName.message}
            >
              <Input
                value={formData.roleName}
                onChange={(e) => updateForm({ roleName: e.target.value })}
              />
            </Form.Item>
            <Form.Item
              label="角色类型"
              className="label120"
              required={true}
              validateStatus={validateState.roleType.state}
              help={validateState.roleType.message}
            >
              <Select
                filterOption={null}
                allowClear={true}
                value={formData.roleType}
                onChange={(e) => updateForm({ roleType: e })}
              >
                {roleTypeOption.map((item, index) => (
                  <Select.Option key={`${index}${item}`} value={String(index)}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              label="有权部门层级"
              className="label120"
              required={true}
              validateStatus={validateState.entitleInsLevel.state}
              help={validateState.entitleInsLevel.message}
            >
              <Select
                filterOption={null}
                mode="multiple"
                value={
                  formData.entitleInsLevel === null ||
                  formData.entitleInsLevel === ""
                    ? []
                    : formData.entitleInsLevel.split(";")
                }
                onChange={(e) => selectLevel({ entitleInsLevel: e })}
              >
                {entitleInsLevelOption.map((item, index) => (
                  <Select.Option key={`${index}${item}`} value={item}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item label="备注信息" className="label120">
              <TextArea
                value={formData.remark}
                onChange={(e) => updateForm({ remark: e.target.value })}
                type="textarea"
              />
            </Form.Item>
            <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>
  );
}
