import React, { useEffect, useState, useRef } from "react";
import PostSelect from "@/components/PostSelect";
import {
  Modal,
  Select,
  InputNumber,
  Spin,
  message,
  Form,
  Input,
  FormInstance,
} from "antd";
import { TriggerType, TriggerAll } from "../entity";
import _ from "lodash";
// ShopSelect;
import ShopSelect from "@/components/ShopSelect";

interface PostItem {
  type: number; //岗位大类编码
  typeName: string; //岗位大类名称
}
const { Option } = Select;
const FormItem = Form.Item;
interface Interval {
  min?: number;
  max?: number;
}

interface Props {
  loading: boolean;
  onOk: (data: any, cb: () => any) => any;
  onCancel: () => any;
  show: boolean;
  data: any[];
  allShopList: any[];
  allPost: CommonApi.RoleCodeVO[]; //角色列表
  postTypeList: PostItem[]; //岗位大类
  postList: any[];
  storageList: any[];
  form: FormInstance;
  eidt?: boolean;
  readOnly?: boolean;
  // preConditonList: any[];
  abilityList: PartStorageSpace.AbilityPageVO[]; // 能力提升列表;
  foundList: PartStorageSpace.FoundPageVO[]; //款项列表
  preCondition: any[];
  fittingsList: PartStorageSpace.PageVO[];
  accountList: SpecialAccount.AccountInfo[];
}

export default function setModal(props: Props) {
  const {
    loading,
    onCancel,
    onOk,
    show,
    allShopList,
    postTypeList,
    data,
    allPost,
    postList,
    storageList,
    form,
    eidt,
    readOnly,
    preCondition,
    accountList,
    fittingsList,
    abilityList,
    foundList,
  } = props;
  const [newData, setNewData] = useState<ApprovalProcess.InstanceInfo[]>([]);
  const [deepData, setDeepData] = useState<ApprovalProcess.InstanceInfo[]>([]);
  /** 选择条件配置 */
  const [selectData, setSelectData] = useState<
    { label: string; value: number }[]
  >([]);

  useEffect(() => {
    if (show) {
      if (eidt) {
        /** 编辑回显已经填写条件值 */
        setDeepData([...data]);
        if (preCondition && preCondition.length) {
          const _selectList = preCondition.map((item) => ({
            label: item.flowTriggerDto.name,
            value: item.triggerId,
          }));
          setSelectData(_selectList);
        }
        const conditionList = data.map((item) => item.triggerId);
        form.setFieldsValue({
          ...data[0],
          confList: conditionList,
        });
      } else {
        // 新增
        setNewData(data);
        const tmpSelectList = data.map((item) => ({
          label: item.flowTriggerDto.name,
          value: item.triggerId,
          extral: item,
        }));
        setSelectData(tmpSelectList);
      }
    }
  }, [data]);

  /** 保存 */
  function save() {
    if (loading) {
      return;
    }
    if (
      deepData.filter(
        (item) =>
          !item.value ||
          JSON.parse(item.value) == null ||
          JSON.parse(item.value).length == 0
      ).length
    ) {
      message.error("请填写全部条件");
      return;
    }

    const _data = deepData.length > 0 ? deepData : data;

    const params = _data.map((item: ApprovalProcess.InstanceInfo) => ({
      approvalConditionId: item.triggerId,
      value: item.value,
    }));
    onOk && onOk(params, hide);
    // setDeepData([]);
  }

  function hide() {
    onCancel && onCancel();
    form.resetFields();
    setDeepData([]);
    setNewData([]);
  }

  function onChange(
    item: ApprovalProcess.InstanceInfo,
    // value: any,
    Values: any,
    index: number
  ) {
    // idOrCode;
    const newValue = Array.isArray(Values)
      ? Values.map((i) => ({ idOrCode: i.value, name: i.label }))
      : Values;

    const { value, flowTriggerDto } = item;

    if ([2, 3, 4, 5, 6, 7, 8].includes(flowTriggerDto.judgeRule)) {
      const _item = { ...item, value: JSON.stringify(newValue) };
      deepData[index] = _item;

      setDeepData([...deepData]);
    } else {
      const _item = {
        ...item,
        value: JSON.stringify({
          ...JSON.parse(value || "{}"),
          ...newValue,
        }),
      };

      deepData[index] = _item;
      setDeepData([...deepData]);
    }
  }

  /** 选择需要配置的预设条件 */
  const _onChange = (value: any[], option) => {
    if (eidt) {
      let res1 = data.filter((item) => value.find((y) => y === item.triggerId)); //交集
      let res2 = value.filter((x) => !data.find((y) => y.triggerId === x)); //差集
      let res3 = preCondition.filter((x) => {
        return res2.find((y) => y === x.triggerId);
      });

      let res = res1.concat(res3);
      setDeepData([...res]);
    } else {
      const tempId = option.map((item) => item.extral.triggerId);

      const tempList = newData.filter((item) =>
        tempId.includes(item.triggerId)
      );

      setDeepData([...tempList]);
    }
  };

  return (
    <Modal
      visible={show}
      onCancel={hide}
      onOk={save}
      title={`${eidt ? "编辑" : "添加"}流程`}
      width={500}
      maskClosable={false}
      closable={readOnly}
      okButtonProps={{ disabled: readOnly }}
      cancelButtonProps={{ disabled: readOnly }}
    >
      <Spin tip="保存中" spinning={loading}>
        <Form layout="vertical" form={form} onFinish={save}>
          <Form.Item
            name="name"
            label="流程名称"
            rules={[{ required: true, message: "请输入流程名称" }]}
          >
            <Input placeholder="请输入" maxLength={64} disabled={readOnly} />
          </Form.Item>
          {/* 多选=》选择要配置的预设条件 */}
          <Form.Item
            label="触发条件"
            name="confList"
            rules={[{ required: true, message: "请选择需要配置的条件" }]}
          >
            <Select
              mode="multiple"
              allowClear
              style={{ width: "100%" }}
              placeholder="请选择"
              onChange={_onChange}
              disabled={readOnly}
            >
              {selectData.map((item, index) => (
                <Option
                  value={item.value}
                  key={item.value}
                  extral={item.extral}
                >
                  {item.label}
                </Option>
              ))}
            </Select>
          </Form.Item>

          {deepData.map((item: ApprovalProcess.InstanceInfo, index: number) => {
            const data = item;
            const { flowTriggerDto, value } = data;
            const originalData = JSON.parse(value || "{}");

            const {
              name,
              unit,
              judgeRule,
              type,
              // options,
            } = flowTriggerDto;

            const _maxRule =
              originalData && typeof originalData.max === "number"
                ? originalData.max
                : Infinity;
            const _minRule =
              originalData && typeof originalData.min === "number"
                ? originalData.min
                : -Infinity;

            return (
              <div
                style={{ marginBottom: judgeRule === 1 ? 75 : 20 }}
                key={`id_${index}`}
              >
                <React.Fragment key={`id_${index}`}>
                  <FormItem
                    label={`${index + 1}、${name || ""}(${
                      TriggerAll[judgeRule]
                    })`}
                    style={{ marginBottom: 20 }}
                  >
                    {judgeRule === 1 ? (
                      <div
                        style={{
                          height: 70,
                          width: "100%",
                        }}
                      >
                        <div>
                          <span>下限值(不包含,值为0则包含)：</span>
                          <InputNumber
                            disabled={readOnly}
                            style={{ width: "100%" }}
                            placeholder="请输入"
                            precision={type === TriggerType["数量"] ? 0 : 2}
                            max={_maxRule}
                            value={originalData.min}
                            onChange={(value) =>
                              onChange(
                                data,
                                { min: value > _maxRule ? _maxRule : value },
                                index
                              )
                            }
                          />
                        </div>
                        <div
                          style={{
                            width: "100%",
                            marginTop: 20,
                          }}
                        >
                          <span>上限值(包含)：</span>
                          <InputNumber
                            disabled={readOnly}
                            style={{ width: "100%" }}
                            placeholder="请输入"
                            precision={type === TriggerType["数量"] ? 0 : 2}
                            min={_minRule}
                            value={originalData.max}
                            onChange={(value) =>
                              onChange(
                                data,
                                { max: value < _minRule ? _maxRule : value },
                                index
                              )
                            }
                          />
                        </div>
                      </div>
                    ) : null}
                    {[2, 3, 4, 5, 6].includes(judgeRule) ? (
                      <div>
                        <InputNumber
                          disabled={readOnly}
                          style={{ width: "100%" }}
                          placeholder="请输入"
                          precision={type === TriggerType["数量"] ? 0 : 2}
                          min={_minRule}
                          value={
                            typeof originalData === "number"
                              ? originalData
                              : undefined
                          }
                          onChange={(value) => onChange(data, value, index)}
                        />
                      </div>
                    ) : null}
                    {type === TriggerType["门店"] && (
                      <div>
                        <ShopSelect
                          labelInValue
                          multiple
                          initType={1}
                          value={
                            originalData.length > 0
                              ? originalData.map((i: any) => ({
                                  value: i.idOrCode,
                                  label: i.name,
                                }))
                              : []
                          }
                          onChange={(value) => {
                            console.log("value：", value);
                            onChange(data, value, index);
                          }}
                        />
                        {/* <Select
                        disabled={readOnly}
                        optionFilterProp="children"
                        labelInValue
                        value={
                          originalData.length > 0
                            ? originalData.map((i: any) => ({
                                value: i.idOrCode,
                                label: i.name,
                              }))
                            : []
                        }
                        mode="multiple"
                        placeholder="请选择门店"
                        onChange={(value) => onChange(data, value, index)}
                      >
                        {allShopList.map((item) => (
                          <Option value={item.id} key={item.id}>
                            {item.name}
                          </Option>
                        ))}
                      </Select> */}
                      </div>
                    )}
                    {type === TriggerType["角色"] && (
                      <div>
                        <Select
                          disabled={readOnly}
                          optionFilterProp="children"
                          labelInValue
                          value={
                            originalData.length > 0
                              ? originalData.map((i: any) => ({
                                  // idOrCode
                                  value: i.idOrCode,
                                  label: i.name,
                                }))
                              : []
                          }
                          mode="multiple"
                          // style={{ width: '80%', marginTop: 10 }}
                          placeholder="请选择角色"
                          onChange={(value) => onChange(data, value, index)}
                          showSearch
                        >
                          {allPost.length &&
                            allPost.map((item) => (
                              <Option value={item.roleCode} key={item.roleCode}>
                                {item.roleName}
                              </Option>
                            ))}
                        </Select>
                      </div>
                    )}
                    {type === TriggerType["岗位"] && (
                      <div>
                        <Select
                          disabled={readOnly}
                          optionFilterProp="children"
                          value={
                            originalData.length > 0
                              ? originalData.map((i: any) => ({
                                  value: i.idOrCode,
                                  label: i.name,
                                }))
                              : []
                          }
                          labelInValue
                          mode="multiple"
                          placeholder="请选择岗位"
                          onChange={(value) => {
                            onChange(data, value, index);
                          }}
                        >
                          {postList.map((item) => (
                            <Option value={item.id} key={item.id}>
                              {item.postName}
                            </Option>
                          ))}
                        </Select>
                      </div>
                    )}
                    {/* 岗位大类 */}
                    {type === TriggerType["岗位大类"] && (
                      <div>
                        <Select
                          disabled={readOnly}
                          optionFilterProp="children"
                          value={
                            originalData.length > 0
                              ? originalData.map((i: any) => ({
                                  value: i.idOrCode,
                                  label: i.name,
                                }))
                              : []
                          }
                          labelInValue
                          mode="multiple"
                          placeholder="请选择岗位大类"
                          onChange={(value) => onChange(data, value, index)}
                        >
                          {postTypeList.map((item) => (
                            <Option value={item.type} key={item.type}>
                              {item.typeName}
                            </Option>
                          ))}
                        </Select>
                      </div>
                    )}
                    {type === TriggerType["车辆区域库"] && (
                      <div>
                        <Select
                          optionFilterProp="children"
                          disabled={readOnly}
                          labelInValue
                          value={
                            originalData.length > 0
                              ? originalData.map((i: any) => ({
                                  value: i.idOrCode,
                                  label: i.name,
                                }))
                              : []
                          }
                          mode="multiple"
                          placeholder="请选择车辆区域库"
                          onChange={(value) => onChange(data, value, index)}
                        >
                          {storageList.map((item) => (
                            <Option value={item.id} key={item.id}>
                              {item.name}
                            </Option>
                          ))}
                        </Select>
                      </div>
                    )}
                    {/* 配件库房 */}
                    {type === TriggerType["配件库房"] && (
                      <div>
                        <Select
                          optionFilterProp="children"
                          disabled={readOnly}
                          labelInValue
                          value={
                            originalData.length > 0
                              ? originalData.map((i: any) => ({
                                  value: i.idOrCode,
                                  label: i.name,
                                }))
                              : []
                          }
                          mode="multiple"
                          placeholder="请选择配件库房"
                          onChange={(value) => onChange(data, value, index)}
                        >
                          {fittingsList.map((item) => (
                            <Option
                              value={item.storageCode}
                              key={item.storageCode}
                            >
                              {item.storageName}
                            </Option>
                          ))}
                        </Select>
                      </div>
                    )}
                    {/* 资金账户 */}
                    {type === TriggerType["资金账户"] && (
                      <div>
                        <Select
                          optionFilterProp="children"
                          disabled={readOnly}
                          labelInValue
                          value={
                            originalData.length > 0
                              ? originalData.map((i: any) => ({
                                  value: i.idOrCode,
                                  label: i.name,
                                }))
                              : []
                          }
                          mode="multiple"
                          placeholder="请选择资金账户"
                          onChange={(value) => onChange(data, value, index)}
                        >
                          {accountList.map((item) => (
                            <Option value={item.id} key={item.id}>
                              {item.name}
                            </Option>
                          ))}
                        </Select>
                      </div>
                    )}
                    {/* 能力提升 */}
                    {type === TriggerType["能力提升业务类型"] && (
                      <div>
                        <Select
                          disabled={readOnly}
                          optionFilterProp="children"
                          value={
                            originalData.length > 0
                              ? originalData.map((i: any) => ({
                                  value: i.idOrCode,
                                  label: i.name,
                                }))
                              : []
                          }
                          labelInValue
                          mode="multiple"
                          placeholder="请选择能力提升业务类型"
                          onChange={(value) => {
                            onChange(data, value, index);
                          }}
                        >
                          {abilityList.map((item) => (
                            <Option value={item.id} key={item.id}>
                              {item.name}
                            </Option>
                          ))}
                        </Select>
                      </div>
                    )}
                    {/* 款项 */}

                    {type === TriggerType["款项"] && (
                      <div>
                        <Select
                          disabled={readOnly}
                          optionFilterProp="children"
                          value={
                            originalData.length > 0
                              ? originalData.map((i: any) => ({
                                  value: i.idOrCode,
                                  label: i.name,
                                }))
                              : []
                          }
                          labelInValue
                          mode="multiple"
                          placeholder="请选择款项类型"
                          onChange={(value) => {
                            onChange(data, value, index);
                          }}
                        >
                          {foundList.map((item) => (
                            <Option value={item.value} key={item.value}>
                              {item.name}
                            </Option>
                          ))}
                        </Select>
                      </div>
                    )}
                  </FormItem>
                </React.Fragment>
              </div>
            );
          })}
        </Form>
      </Spin>
    </Modal>
  );
}