import {
  Row,
  Col,
  Input,
  InputNumber,
  Select,
  message,
  Button,
  Empty,
  Checkbox,
  Divider,
} from 'antd';
import React, { useRef, useEffect, useState, useMemo } from 'react';
import { getFetch, formFetch, doFetch } from '@/utils/doFetch';
import { CloseCircleFilled } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import moment from 'moment';

let Diyrule = (props) => {
  let { onChange } = props;
  let defval = props?.value ?? {};
  console.log(defval);
  let value = defval?.value || [],
    other = useMemo(() => {
      return (
        defval?.other || {
          noRuleCode: '',
          sort: null,
          formatType: null,
          increaseList: [],
        }
      );
    }, [defval?.other]);

  useEffect(() => {
    onChange(defval);
  });
  let { data, loading } = useRequest(() => {
    return doFetch({ url: '/base/bmNoRule/querySelect', params: {} });
  });

  useEffect(() => {
    let noRuleCode =
      data &&
      data?.data?.dataList
        .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
                          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,
                                });
                              }}
                            />
                          </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,
                                });
                              }}
                            />
                          </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) => {
            console.log(it);
            return (
              <Row key={i} style={{ padding: '6px 0 12px 0' }} gutter={24}>
                <Col span={2}>
                  <p style={{ color: '#999', marginBottom: 24 }}>关联规则</p>
                  <Checkbox
                    checked={other.increaseList && other.increaseList.indexOf(it?.id) != -1}
                    // defaultChecked={
                    //   other.increaseList && other.increaseList.indexOf(it?.sort + 1) != -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={10}>
                  <p style={{ color: '#999', marginBottom: 24 }}>编号规则</p>
                  <Select
                    style={{ width: '100%' }}
                    options={
                      data &&
                      data?.data?.dataList
                        .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 />
              </Row>
            );
          })}

        <Row style={{ padding: '12px 0' }} gutter={24}>
          <Col span={2}>
            <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={10}>
            <p style={{ color: '#999', marginBottom: 24 }}>编号规则</p>
            <Select
              style={{ width: '100%' }}
              options={data && data?.data?.dataList.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,
                  },
                });
              }}
            />
          </Col>

          <Col span={4}>
            <p style={{ color: '#999', marginBottom: 24 }}>放置在第几个之后</p>
            <Select
              value={other?.sort}
              options={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,
                  },
                });
              }}
            />
          </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;
