import React, { useState, useEffect } from "react";
import {
  Input,
  Select,
  Modal,
  Form,
  message,
  Tooltip,
  Tag,
  Button,
  Space,
} from "antd";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import {
  ApprovalType,
  Approval_Status,
  transformDTO,
  transformFormData,
} from "../entity";
import _ from "lodash";
import { systemListApi } from "@/pages/admin/Privilege/api";
import usePagination from "@/hooks/usePagination";
import { getAllRoleCodeApi } from "@/common/api";
import useInitial from "@/hooks/useInitail";
import { saveApproveConfig } from "../api";
import toChineseBig from "@/utils/toChinease";

const { Option } = Select;
const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
interface Props {
  item: { visible: boolean; currentItem?: ApprovalSetteing.ApprovalListItems };
  setItem: any;
  setParams: any;
}

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};
const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 20, offset: 4 },
  },
};
export default function CreateItem({ item, setItem, setParams }: Props) {
  const [form] = Form.useForm();
  const { list } = usePagination(systemListApi, { current: 1, pageSize: 500 });
  const { data, setData } = useInitial(getAllRoleCodeApi, [], {});
  const [loading, setLoading] = useState(false);
  const { visible, currentItem } = item;
  useEffect(() => {
    setData(data.filter((item) => item.useType === 3 || item.useType === 4));
    if (visible && currentItem) {
      const result = transformFormData(currentItem);
      form.setFieldsValue({ ...result });
    }
  }, [visible]);

  const onFinish = () => {
    form
      .validateFields()
      .then((fileds) => {
        const pa = {
          ...fileds,
          id: currentItem ? currentItem.id : undefined,
        };

        const result = transformDTO(pa);
        // return;
        setLoading(true);
        saveApproveConfig(result)
          .then((res) => {
            message.success("保存成功");
            setParams({ current: 1 }, true);
            setItem({ visible: false });
          })
          .catch((err) => message.error(err.message))
          .finally(() => {
            setLoading(false);
          });
      })
      .catch((err) => message.error(err.message));
  };

  return (
    <Modal
      // title="新增"
      title={`${currentItem ? "编辑" : "新增"}审批配置`}
      visible={visible}
      onCancel={() => setItem({ visible: false })}
      onOk={() => form.submit()}
      confirmLoading={loading}
      afterClose={() => form.resetFields()}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
    >
      <Form
        {...layout}
        form={form}
        name="control-hooks"
        onFinish={onFinish}
        initialValues={{ approvalRoles: [{}] }}
      >
        <Form.Item
          name="approvalName"
          label="审批名称"
          rules={[{ required: true }]}
        >
          <Input placeholder="请输入审批名称" maxLength={16} />
        </Form.Item>
        <Form.Item
          name="approvalType"
          label="审批类型"
          rules={[{ required: true }]}
        >
          <Select placeholder="请选择审批类型">
            {ApprovalType.map((item) => (
              <Option value={item.value} key={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) => prevValues.approvalType !== currentValues.approvalType}
        >
          {({ getFieldValue }) => (getFieldValue("approvalType") === 1 ? (
            <Form.List name="approvalRoles">
              {(fields, { add, remove }) => (
                <div style={{ paddingLeft: 47 }}>
                  {fields.map(({ key, name, ...restField }, index) => (
                    <Form.Item
                      label={index === 0 ? "审批角色" : ""}
                      key={key}
                      {...(index === 0
                          ? formItemLayout
                          : formItemLayoutWithOutLabel)}
                      style={{ height: 55 }}
                    >
                      <div>
                        <span style={{ fontSize: 14 }}>
                          {toChineseBig(index + 1)}级审批
                        </span>
                        {index !== 0 && (
                        <DeleteOutlined
                          style={{ marginLeft: 5, color: "red" }}
                          onClick={() => remove(name)}
                        />
                          )}
                        <Form.Item
                          key={key}
                          style={{ width: "100%" }}
                          {...restField}
                          name={[name, "roleObj"]}
                          rules={[
                              { required: true, message: "请选择审批角色" },
                            ]}
                        >
                          <Select
                            style={{ width: "100%" }}
                            placeholder="请选择审批角色"
                            labelInValue
                            showSearch
                            showArrow
                            allowClear
                            optionFilterProp="children"
                          >
                            {data.map((item) => (
                              <Option
                                  value={item.roleCode}
                                  key={item.roleCode}
                                >
                                  {item.roleName}
                                </Option>
                              ))}
                          </Select>
                        </Form.Item>
                      </div>
                    </Form.Item>
                    ))}
                  <Form.Item style={{ width: "100%" }}>
                    <Button
                      type="dashed"
                      onClick={() => add()}
                      block
                      style={{ marginLeft: 67, width: 358 }}
                      icon={<PlusOutlined />}
                    >
                      增加角色
                    </Button>
                  </Form.Item>
                </div>
                )}
            </Form.List>
            ) : null)}
        </Form.Item>

        <Form.Item
          name="path"
          label="业务详情路径"
          // rules={[{ required: true }]}
        >
          <Input placeholder="请输入业务详情路径" />
        </Form.Item>
        <Form.Item
          name="gateName"
          label="归属系统"
          rules={[{ required: true }]}
        >
          <Select
            placeholder="请选择归属系统"
            showSearch
            allowClear
            optionFilterProp="children"
          >
            {list.map((item) => (
              <Option value={item.sysPrefix} key={item.sysPrefix}>
                {/* <Option value={item.id} key={item.sysPrefix}> */}
                {item.sysName}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="status" label="状态" rules={[{ required: true }]}>
          <Select placeholder="请选择状态">
            {Approval_Status.map((item) => (
              <Option value={item.value} key={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
}