/*
 ** 报表的编辑、新增表单
 ** create by ChenLong on 2022/8/10
 ** 功能路径：src\pages\product\ReportsManage\ReportEditForm.js
 ** 菜单参数列表：*变量名*(变量说明，数据类型，是否必填，取值范围)
 **/
import React, { useEffect, useState, useContext } from 'react';
import {
  Form,
  Input,
  DatePicker,
  InputNumber,
  Row,
  Col,
  Button,
  message,
  Select,
  ConfigProvider,
} from 'antd';
import moment from 'moment';
import { submitReportData } from '../api/service/report';
import FileUpload from './Components/fileUpload/fileUpload';
import { reportService } from '../api';
import { isSelect, returnOptions, returnRows, returnCols } from './utils/utils';
import style from './ReportEditForm.less';

const { Option } = Select;
const { TextArea } = Input;
// 类型
const USER_ID = window?.globalConfig?.userInfo?.OID || 0;
const TEXT_ARRAY = ['文本', '标签'];
const TEXTAREA_ARRAY = ['多行文本'];
const DATE_PICKER_ARRAY = ['日期'];
const DATE_TIME_PICKER_ARRAY = ['日期时刻'];
const DATE_TYPE = ['日期', '日期时刻']; // 用来匹配是否需要转为日期对象；
const NUMBER_ARRAY = ['数值', '数值标签'];
const FILE_ARRAY = ['附件'];
// 形态对应组件

// 对应关系

/**
 * @description: 函数描述
 * @date: 2022/8/10
 * @author: ChenLong
 * @params: reportDetails 各个字段的配置列表
 *           data 与reportDetails对应的值
 */
const ReportEditForm = ({ reportDetails, reportData, onCancel, reportName, modalType }) => {
  // if (!reportData || Object.keys(reportData).length === 0) return <>未传递表单数据</>;
  const [fileAlias, setFileAlias] = useState([]); // 附件需要单独处理提交的数据
  const [form] = Form.useForm();
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls();
  /*  const formItemLayout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };*/
  // 数值类的后端会处理再返回，故无序处理精度问题
  const handleDate = (reportDetails, data) => {
    let _data = { ...data };
    reportDetails.forEach((item) => {
      if (DATE_TYPE.includes(item.type)) {
        _data[item.fieldAlias] = data[item.fieldAlias] ? moment(data[item.fieldAlias]) : null;
      }
    });
    return _data;
  };
  const componentMap = (config) => {
    if (DATE_TIME_PICKER_ARRAY.includes(config.type)) {
      return <DatePicker showTime readonly={config.isReadOnly} />;
    } else if (DATE_PICKER_ARRAY.includes(config.type)) {
      return <DatePicker disabled={config.isReadOnly} />;
    } else if (NUMBER_ARRAY.includes(config.type)) {
      return <InputNumber disabled={config.isReadOnly} />;
    } else if (FILE_ARRAY.includes(config.type)) {
      return <FileUpload schema={{ renderTo: 'File' }} disabled={config.isReadOnly} />;
    } else if (TEXTAREA_ARRAY.includes(config.type)) {
      let _rows = returnRows(config.configItems);
      return <TextArea rows={_rows} disabled={config.isReadOnly} />;
    } else {
      if (isSelect(config.configItems)) {
        let options = returnOptions(config.configItems);
        if (options) {
          return (
            <Select disabled={config.isReadOnly}>
              {options.map((item) => (
                <Option value={item}>{item}</Option>
              ))}
            </Select>
          );
        }
      }
      return <Input disabled={config.isReadOnly} />;
    }
  };
  const submitReportForm = () => {
    form.validateFields().then((values) => {
      let _data = values;
      let final = [];
      Object.keys(_data).forEach((key) => {
        let value = reportData[key];
        let _value = _data[key];
        if (moment.isMoment(_data[key])) {
          _value = moment(_data[key]).format('YYYY-MM-DD HH:mm:ss');
        }
        if (value !== _value) {
          if (fileAlias.includes(key)) {
            _value = _value
              ? JSON.parse(_value)
                  .reduce((final, curr) => {
                    final.push(curr.sourcePath);
                    return final;
                  }, [])
                  .join(',')
              : '';
          }
          let _finalData = {
            fieldAlias: key,
            fieldValue: _value === null ? _value : String(_value),
          };
          if (modalType === '编辑') {
            _finalData.key = reportData.key;
          }
          final.push(_finalData);
        }
      });
      if (modalType === '新增') {
        reportService
          .addReportData({
            reportName: reportName,
            userId: USER_ID,
            reportDatas: final,
          })
          .then((res) => {
            if (res.code === 0) {
              message.success('保存成功！');
              onCancel();
            } else if (res.code === -1) {
              message.error(res.msg);
            } else if (res.code === -2) {
              message.error('系统故障，请找管理员查看故障！');
            }
          });
      }
      if (modalType === '编辑') {
        submitReportData(
          {},
          {
            editDatas: final,
            reportName: reportName,
            userId: USER_ID,
          },
        ).then((res) => {
          if (res.code === 0) {
            message.success('保存成功！');
            onCancel();
          } else if (res.code === -1) {
            message.error(res.msg);
          } else if (res.code === -2) {
            message.error('系统故障，请找管理员查看故障！');
          }
        });
      }
    });
  };
  useEffect(() => {
    if (reportDetails && reportDetails.length) {
      let _fileAlias = [...fileAlias];
      reportDetails.forEach((item) => {
        if (item.type === '附件') _fileAlias.push(item.fieldAlias);
      });
      setFileAlias(_fileAlias);
    }
  }, [reportDetails]);
  useEffect(() => {
    if (reportData && Object.keys(reportData).length)
      form.setFieldsValue(handleDate(reportDetails, reportData));
  }, [reportData]);
  return (
    <div className={style.reportEditForm} style={{ position: 'relative' }}>
      <div>
        <Form form={form}>
          <Row style={{ overflowY: 'scroll', maxHeight: 'calc(100vh - 300px)' }}>
            {reportDetails &&
              reportDetails
                .filter((config) => {
                  if (modalType === '新增' && config.isReadOnly) return false;
                  return config;
                })
                .map((config) => {
                  // return <Col span={returnCols(config.configItems) * 8} key={config.fieldAlias}>
                  return (
                    <div
                      style={{ width: `${returnCols(config.configItems) * 33.3}%` }}
                      key={config.fieldAlias}
                    >
                      <Form.Item
                        label={config.fieldAlias}
                        name={config.fieldAlias}
                        rules={[
                          {
                            required: config.isRequired,
                            message: `${config.fieldAlias}必填`,
                          },
                        ]}
                      >
                        {componentMap(config)}
                      </Form.Item>
                    </div>
                  );
                })}
          </Row>
          <Row>
            <Col span={24} style={{ textAlign: 'right' }}>
              {/*<Form.Item style={{textAlign:'right'}}>*/}
              <Button
                style={{ position: 'sticky', bottom: 0 }}
                type={'primary'}
                onClick={submitReportForm}
              >
                提交
              </Button>
              {/*</Form.Item>*/}
            </Col>
          </Row>
        </Form>
      </div>
    </div>
  );
};
export default ReportEditForm;
