import {
  Row,
  Col,
  Input,
  InputNumber,
  Select,
  message,
  Button,
  Empty,
  Checkbox,
  Divider,
} from "antd";
import React, { useRef, useEffect, useState, useMemo } from "react";
import { bmNoRule } from "@/services/platform";
import { useRequest } from "umi";
import moment from "moment";
import Login from "@/pages/user/Login";

let Diyrule = (props) => {
  let { onChange, extraparams } = props;
  let other = useMemo(() => {
      return (
        props?.value?.other || {
          noRuleCode: "",
          sort: null,
          formatType: 3,
          increaseList: [],
        }
      );
    }, [props?.value?.other]),
    value = props?.value?.value ?? [];

  let { data, loading } = useRequest(
    () => {
      return bmNoRule(extraparams);
    },
    {
      formatResult: (res) => res?.data?.dataList,
      refreshDeps: [extraparams],
    }
  );

  useEffect(() => {
    let noRuleCode =
      data &&
      data
        .map((it) => ({ ...it, label: it.name }))
        .filter((it) => it.value == "increasing_order")[0]?.value;
    //获取默认值 顺序递增
    if (!other.noRuleCode) {
      onChange({
        value: value,
        other: {
          ...other,
          noRuleCode: noRuleCode,
        },
      });
    }
  }, [data]);

  function renderDom(row, type) {
    if (type == "middle") {
      let dom = <></>;
      switch (row.noRuleCode) {
        case "text_input":
          dom = (
            <>
              <p style={{ color: "#999", marginBottom: 24 }}>编号内容</p>
              <Input
                allowClear
                value={row.noContent}
                onChange={(e) => {
                  let val = e.target.value;
                  let newvalue = JSON.parse(JSON.stringify(value)) || [];
                  newvalue = newvalue.map((item) => {
                    if (item.id == row.id) {
                      item.noContent = val;
                    }
                    return item;
                  });
                  onChange({
                    value: newvalue,
                    other: other,
                  });
                }}
              />
            </>
          );
          break;
        case "year_code":
          dom = (
            <>
              <p style={{ color: "#999", marginBottom: 24 }}>年份代码</p>
              <Select
                value={row.formatType}
                options={[
                  {
                    label: "YYYY",
                    value: 1,
                  },
                  {
                    label: "YY",
                    value: 2,
                  },
                ]}
                onChange={(val) => {
                  let newvalue = JSON.parse(JSON.stringify(value)) || [];
                  newvalue = newvalue.map((item) => {
                    if (item.id == row.id) {
                      item.formatType = val;
                    }
                    return item;
                  });
                  onChange({
                    value: newvalue,
                    other: other,
                  });
                }}
              />
            </>
          );
          break;
        case "month_code":
          dom = (
            <>
              <p style={{ color: "#999", marginBottom: 24 }}>月份代码</p>
              <Select
                value={row.formatType}
                options={[
                  {
                    label: "MM",
                    value: 2,
                  },
                  {
                    label: "M",
                    value: 1,
                  },
                ]}
                onChange={(val) => {
                  let newvalue = JSON.parse(JSON.stringify(value)) || [];
                  newvalue = newvalue.map((item) => {
                    if (item.id == row.id) {
                      item.formatType = val;
                      if (val == 1) {
                        item.paramList = Object.keys(
                          Array.apply(null, { length: 12 })
                        ).map((it, i) => {
                          return {
                            key: (i + 1).toString(),
                            value: "",
                          };
                        });
                      } else {
                        delete item.paramList;
                      }
                    }
                    return item;
                  });
                  onChange({
                    value: newvalue,
                    other: other,
                  });
                }}
              />
            </>
          );
          break;
        case "day_code":
          dom = (
            <>
              <p style={{ color: "#999", marginBottom: 24 }}>日期类型</p>
              <Select
                value={row.formatType}
                options={[
                  {
                    label: "DD",
                    value: 2,
                  },
                  {
                    label: "D",
                    value: 1,
                  },
                ]}
                onChange={(val) => {
                  let newvalue = JSON.parse(JSON.stringify(value)) || [];
                  newvalue = newvalue.map((item) => {
                    if (item.id == row.id) {
                      item.formatType = val;
                      if (val == 1) {
                        item.paramList = Object.keys(
                          Array.apply(null, { length: 31 })
                        ).map((it, i) => {
                          return {
                            key: (i + 1).toString(),
                            value: "",
                          };
                        });
                      } else {
                        delete item.paramList;
                      }
                    }
                    return item;
                  });
                  onChange({
                    value: newvalue,
                    other: other,
                  });
                }}
              />
            </>
          );
          break;
      }
      return dom;
    } else if (type == "last") {
      let dom = <></>;
      switch (row.noRuleCode) {
        case "month_code":
          if (row.formatType == 1) {
            dom = (
              <>
                <Row style={{ marginTop: 24 }}>
                  {row.paramList &&
                    row.paramList.map((it) => {
                      return (
                        <Col
                          key={it.key}
                          span={4}
                          style={{
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                            border: "#f0f0f0 solid 1px",
                            flexDirection: "column",
                            backgroundColor: "#f0f0f0",
                          }}
                        >
                          <div style={{ height: 36 }} className="center">
                            {it.key}月
                          </div>
                          <div>
                            <Input
                              style={{ width: "100%", textAlign: "center" }}
                              value={it.value}
                              onChange={(e) => {
                                //修改list数据
                                let val = e.target.value;
                                let newparamList =
                                  JSON.parse(JSON.stringify(row.paramList)) ||
                                  [];
                                newparamList = newparamList.map((item) => {
                                  if (item.key == it.key) {
                                    item.value = val;
                                  }
                                  return item;
                                });
                                //修改整体数据
                                let newvalue =
                                  JSON.parse(JSON.stringify(value)) || [];
                                newvalue = newvalue.map((item) => {
                                  if (item.id == row.id) {
                                    item.paramList = newparamList;
                                  }
                                  return item;
                                });
                                onChange({
                                  value: newvalue,
                                  other: other,
                                });
                              }}
                            ></Input>
                          </div>
                        </Col>
                      );
                    })}
                </Row>
              </>
            );
          }
          break;
        case "day_code":
          if (row.formatType == 1) {
            dom = (
              <>
                <Row style={{ marginTop: 24 }}>
                  {row.paramList &&
                    row.paramList.map((it) => {
                      return (
                        <Col
                          span={3}
                          style={{
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                            border: "#f0f0f0 solid 1px",
                            flexDirection: "column",
                            backgroundColor: "#f0f0f0",
                          }}
                        >
                          <div style={{ height: 36 }} className="center">
                            {it.key}号
                          </div>
                          <div>
                            <Input
                              style={{ width: "100%", textAlign: "center" }}
                              value={it.value}
                              onChange={(e) => {
                                //修改list数据
                                let val = e.target.value;
                                let newparamList =
                                  JSON.parse(JSON.stringify(row.paramList)) ||
                                  [];
                                newparamList = newparamList.map((item) => {
                                  if (item.key == it.key) {
                                    item.value = val;
                                  }
                                  return item;
                                });
                                //修改整体数据
                                let newvalue =
                                  JSON.parse(JSON.stringify(value)) || [];
                                newvalue = newvalue.map((item) => {
                                  if (item.id == row.id) {
                                    item.paramList = newparamList;
                                  }
                                  return item;
                                });
                                onChange({
                                  value: newvalue,
                                  other: other,
                                });
                              }}
                            ></Input>
                          </div>
                        </Col>
                      );
                    })}
                </Row>
              </>
            );
          }
          break;
      }

      return dom;
    }
  }

  return (
    <div style={{ overflow: "hidden", lineHeight: 0, paddingTop: 12 }}>
      <div style={{ overflow: "hidden" }}>
        {value &&
          value.length > 0 &&
          value.map((it, i) => {
            return (
              <Row key={i} style={{ padding: "6px 0 12px 0" }} gutter={24}>
                <Col span={3}>
                  <p style={{ color: "#999", marginBottom: 24 }}>关联规则</p>
                  <Checkbox
                    checked={
                      other.increaseList &&
                      other.increaseList.indexOf(it.id) != -1
                    }
                    onChange={(e) => {
                      let checked = e.target.checked;
                      if (checked) {
                        let newlist = [...other.increaseList];
                        newlist.push(it.id);
                        onChange({
                          value: value,
                          other: {
                            ...other,
                            increaseList: newlist,
                          },
                        });
                      } else {
                        onChange({
                          value: value,
                          other: {
                            ...other,
                            increaseList: other.increaseList.filter((item) => {
                              return item != it.id;
                            }),
                          },
                        });
                      }
                    }}
                  >
                    选择
                  </Checkbox>
                </Col>

                <Col span={9}>
                  <p style={{ color: "#999", marginBottom: 24 }}>编号规则</p>
                  <Select
                    style={{ width: "100%" }}
                    options={
                      data &&
                      data
                        .filter((it) => it.value != "increasing_order")
                        .map((it) => ({ ...it, label: it.name }))
                    }
                    value={it.noRuleCode}
                    onChange={(val) => {
                      let newvalue = JSON.parse(JSON.stringify(value)) || [];
                      newvalue = newvalue.map((item) => {
                        if (item.id == it.id) {
                          return {
                            noRuleCode: val,
                            id: item.id,
                          };
                        } else {
                          return item;
                        }
                      });
                      onChange({
                        value: newvalue,
                        other: other,
                      });
                    }}
                  />
                </Col>
                <Col span={10}>{renderDom(it, "middle")}</Col>
                <Col span={2}>
                  <p style={{ color: "#999", marginBottom: 40 }}>操作</p>
                  <a
                    style={{ color: "red" }}
                    onClick={() => {
                      let newvalue = JSON.parse(JSON.stringify(value)) || [];
                      newvalue = newvalue.filter((item) => {
                        return it.id != item.id;
                      });
                      onChange({
                        value: newvalue,
                        other: {
                          ...other,
                          increaseList: other.increaseList.filter((item) => {
                            return item != it.id;
                          }),
                          sort: other.sort == i + 1 ? null : other.sort,
                        },
                      });
                    }}
                  >
                    删除
                  </a>
                </Col>
                <Col span={24}>{renderDom(it, "last")}</Col>
                <Divider></Divider>
              </Row>
            );
          })}

        <Row style={{ padding: "12px 0" }} gutter={24}>
          <Col span={3}>
            <p style={{ color: "#999", marginBottom: 24 }}>关联规则</p>
            <Checkbox
              checked={
                value &&
                other.increaseList &&
                value.length == other.increaseList.length
              }
              indeterminate={
                other.increaseList
                  ? other.increaseList.length == 0
                    ? false
                    : value && value.length != other.increaseList.length
                  : false
              }
              onChange={(e) => {
                let all = value.map((it, i) => it.id);
                if (e.target.checked) {
                  onChange({
                    value: value,
                    other: {
                      ...other,
                      increaseList: all,
                    },
                  });
                } else {
                  onChange({
                    value: value,
                    other: {
                      ...other,
                      increaseList: [],
                    },
                  });
                }
              }}
            >
              全选
            </Checkbox>
          </Col>
          <Col span={9}>
            <p style={{ color: "#999", marginBottom: 24 }}>编号规则</p>
            <Select
              style={{ width: "100%" }}
              options={data && data.map((it) => ({ ...it, label: it.name }))}
              value={other.noRuleCode}
              disabled={true}
            />
          </Col>
          <Col span={8}>
            <p style={{ color: "#999", marginBottom: 24 }}>
              递增位数 (
              {other?.formatType && other?.formatType > 0
                ? Object.keys(
                    Array.apply("0", { length: other?.formatType })
                  ).reduce((prev, current) => {
                    return prev + "0";
                  })
                : "-"}
              )
            </p>
            <InputNumber
              style={{ width: "100%" }}
              min={1}
              max={5}
              value={other?.formatType}
              onChange={(val) => {
                onChange({
                  value: value,
                  other: {
                    ...other,
                    formatType: val,
                  },
                });
              }}
            ></InputNumber>
          </Col>

          <Col span={4}>
            <p style={{ color: "#999", marginBottom: 24 }}>放置在第几个之后</p>
            <Select
              value={other?.sort}
              options={Object.keys(
                Array.apply(null, { length: value ? value.length : 0 })
              ).map((it, i) => ({
                label: `第${i + 1}个`,
                value: i + 1,
              }))}
              onChange={(val) => {
                onChange({
                  value: value,
                  other: {
                    ...other,
                    sort: val,
                  },
                });
              }}
            ></Select>
          </Col>
        </Row>
      </div>

      <Row style={{ padding: "12px 0" }} gutter={24}>
        <Col span={12}>
          <Button
            type="dashed"
            style={{ width: "100%" }}
            onClick={() => {
              let newvalue = JSON.parse(JSON.stringify(value)) || [];
              newvalue.unshift({
                noRuleCode: "",
                id: moment().valueOf(),
              });
              onChange({
                value: newvalue,
                other: other,
              });
            }}
          >
            添加到顶部
          </Button>
        </Col>
        <Col span={12}>
          <Button
            type="primary"
            ghost
            style={{ width: "100%" }}
            onClick={() => {
              let newvalue = JSON.parse(JSON.stringify(value)) || [];

              newvalue.push({
                noRuleCode: "",
                id: moment().valueOf(),
              });
              onChange({
                value: newvalue,
                other: other,
              });
            }}
          >
            添加到底部
          </Button>
        </Col>
      </Row>
    </div>
  );
};

export default Diyrule;