import React, { useEffect, useState, useRef } from "react";
import PostSelect from "@/components/PostSelect";
import { Modal, Descriptions, Form } from "antd";
import { TriggerType, TriggerAll, TriggerSelect, TriggerMode } from "../entity";
import _, { identity } from "lodash";

interface Props {
  detailItem: { visible: boolean; ViewItem: FlowSetteing.ProcessListItems };
  setDetailItem: Function;
}
export default function DetailItem({ detailItem, setDetailItem }: Props) {
  const { visible, ViewItem } = detailItem;
  // console.log("ViewItem：", ViewItem);

  const hide = () => {
    setDetailItem({ visible: false, ViewItem: {} });
  };
  return (
    <Modal
      visible={visible}
      onCancel={hide}
      title="流程详情"
      maskClosable={false}
      footer={null}
    >
      <div>
        <p>流程名称：{ViewItem.name}</p>
        <p>触发条件：</p>
        <div style={{ paddingLeft: 20 }}>
          {ViewItem.processConditions?.map((item) => (
            <div key={item.approvalCondition?.id}>
              {/* 除金额和数量以外的类型 区间展示 */}
              <Form>
                {item.approvalCondition?.type !== 1 &&
                  item.approvalCondition?.type !== 2 && (
                    <Form.Item
                      label={`${item.approvalCondition?.name} (
                        ${TriggerAll[item.approvalCondition?.judgeRule]}):`}
                    >
                      <span style={{ width: 400 }}>
                        [
                        {JSON.parse(item.value)
                          .map((i) => i.name)
                          .join(",")}
                        ]
                      </span>
                    </Form.Item>
                  )}

                {/* 选择金额或数量,判断规则为区间 */}
                {(item.approvalCondition?.type === 1 ||
                  item.approvalCondition?.type === 2) &&
                  item.approvalCondition?.judgeRule === 1 && (
                    <Form.Item
                      label={`${item.approvalCondition?.name} (
                        ${TriggerAll[item.approvalCondition?.judgeRule]}):`}
                    >
                      [{JSON.parse(item.value).min},{JSON.parse(item.value).max}
                      ]{item.approvalCondition.unit}
                    </Form.Item>
                  )}
                {(item.approvalCondition?.type === 1 ||
                  item.approvalCondition?.type === 2) &&
                  item.approvalCondition?.judgeRule !== 1 && (
                    <Form.Item
                      label={`${item.approvalCondition?.name} (
                        ${TriggerAll[item.approvalCondition?.judgeRule]}):`}
                    >
                      <span>
                        {JSON.parse(item.value)}
                        {item.approvalCondition.unit}
                      </span>
                    </Form.Item>
                  )}
              </Form>

              {/* {(item.approvalCondition?.type === 1 ||
                item.approvalCondition?.type === 2) &&
                item.approvalCondition?.judgeRule === 1 && (
                  <div
                    style={{ display: "flex", justifyContent: "flex-start" }}
                  >
                    <div style={{ marginRight: 10 }}>
                      <span>
                        {item.approvalCondition?.name} (
                        {TriggerAll[item.approvalCondition?.judgeRule]}) :
                      </span>
                    </div>

                    <span>
                      [{JSON.parse(item.value).min},{JSON.parse(item.value).max}
                      ]{item.approvalCondition.unit}
                    </span>
                  </div>
                )} */}
              {/* 选择金额或数量,判断规则不是区间 */}

              {/* {(item.approvalCondition?.type === 1 ||
                item.approvalCondition?.type === 2) &&
                item.approvalCondition?.judgeRule !== 1 && (
                  <div
                    style={{ display: "flex", justifyContent: "flex-start" }}
                  >
                    <div style={{ marginRight: 10 }}>
                      <span>
                        {item.approvalCondition?.name} (
                        {TriggerAll[item.approvalCondition?.judgeRule]} ):
                      </span>
                    </div>

                    <span>
                      {JSON.parse(item.value)}
                      {item.approvalCondition.unit}
                    </span>
                  </div>
                )} */}
            </div>
          ))}
        </div>
      </div>
    </Modal>
  );
}