/*
 * Author: 黎永顺
 * name: 新建自定义统计项目弹框
 * Description:
 * Date: 2023/4/10
 */
import React, { Component } from "react";
import { Button, message, Modal } from "antd";
import {
  WeaBrowser,
  WeaCheckbox,
  WeaDialog,
  WeaError,
  WeaFormItem,
  WeaHelpfulTip,
  WeaInput,
  WeaInputNumber,
  WeaLocaleProvider,
  WeaTable
} from "ecCom";
import { reportStatisticsItemSave, statisticsItemChangetab, statisticsItemGetform } from "../../../apis/statistics";
import "../index.less";

const { getLabel } = WeaLocaleProvider;

class CustomStatisticsItemsModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      columns: [],
      dataSource: [],
      formData: {
        itemValue: "", itemValueSpan: "",
        itemName: ""
      }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      this.statisticsItemGetform({ id: nextProps.statisticsItemId });
    } else {
      this.setState({
        columns: [],
        dataSource: [],
        formData: {
          itemValue: "", itemValueSpan: "",
          itemName: ""
        }
      });
    }
  }

  handleSaveStatisticalItems = () => {
    const { dataSource, formData } = this.state;
    const { id: statReportId, statisticsItemId } = this.props;
    const { itemValue, itemName } = formData;
    const isNoRules = _.some(dataSource, it => !!it.m2mValue || !!it.ratioValue || !!it.totalValue || !!it.y2yValue);
    const isChainRequired = _.some(dataSource, it => !!it.m2mValue && (!it.m2mLowerLimit || !it.m2mUpperLimit));
    const isChainValRight = _.some(dataSource, it => !!it.m2mValue && it.m2mLowerLimit !== 0 && it.m2mUpperLimit !== 0 && (Number(it.m2mLowerLimit) > Number(it.m2mUpperLimit)));
    const isYoyRequired = _.some(dataSource, it => !!it.y2yValue && (!it.y2yLowerLimit || !it.y2yUpperLimit));
    const isYoyValRight = _.some(dataSource, it => !!it.y2yValue && it.y2yLowerLimit !== 0 && it.y2yUpperLimit !== 0 && (Number(it.y2yLowerLimit) > Number(it.y2yUpperLimit)));
    if (!itemValue && !itemName) {
      this.refs.proError.showError();
      this.refs.nameError.showError();
      return;
    }
    if (!itemValue) {
      this.refs.proError.showError();
      return;
    }
    if (!itemName) {
      this.refs.nameError.showError();
      return;
    }
    if (!isNoRules) {
      message.warning(getLabel(111, "请至少设置一个统计规则"));
      return;
    }
    if (isChainRequired) {
      message.warning(getLabel(111, "请完善环比增幅正常区间设置上下限"));
      return;
    }
    if (isChainValRight) {
      message.warning(getLabel(111, "环比增幅上下限设置错误"));
      return;
    }
    if (isYoyRequired) {
      message.warning(getLabel(111, "请完善同比增幅正常区间设置上下限"));
      return;
    }
    if (isYoyValRight) {
      message.warning(getLabel(111, "同比增幅上下限设置错误"));
      return;
    }
    let payload = { statReportId, itemValue: itemValue.split(","), itemName };
    payload = {
      id: statisticsItemId,
      ...payload,
      ..._.reduce(dataSource, (pre, cur) => {
        if (!!cur.m2mValue || !!cur.ratioValue || !!cur.totalValue || !!cur.y2yValue) {
          const { y2yLowerLimit, y2yUpperLimit, m2mLowerLimit, m2mUpperLimit } = cur;
          if (!!cur.m2mValue) {
            return {
              ...pre,
              [`${cur["id"]}Rule`]: {
                m2mValue: cur.m2mValue.toString(),
                ratioValue: cur.ratioValue.toString(),
                totalValue: cur.totalValue.toString(),
                y2yValue: cur.y2yValue.toString(),
                m2mLowerLimit: m2mLowerLimit.toString(),
                m2mUpperLimit: m2mUpperLimit.toString()
              }
            };
          }
          if (!!cur.m2mValue) {
            return {
              ...pre,
              [`${cur["id"]}Rule`]: {
                m2mValue: cur.m2mValue.toString(),
                ratioValue: cur.ratioValue.toString(),
                totalValue: cur.totalValue.toString(),
                y2yValue: cur.y2yValue.toString(),
                y2yLowerLimit: y2yLowerLimit.toString(),
                y2yUpperLimit: y2yUpperLimit.toString()
              }
            };
          }
          if (!!cur.y2yValue && !!cur.y2yValue) {
            return {
              ...pre,
              [`${cur["id"]}Rule`]: {
                m2mValue: cur.m2mValue.toString(),
                ratioValue: cur.ratioValue.toString(),
                totalValue: cur.totalValue.toString(),
                y2yValue: cur.y2yValue.toString(),
                m2mLowerLimit: m2mLowerLimit.toString(),
                m2mUpperLimit: m2mUpperLimit.toString(),
                y2yLowerLimit: y2yLowerLimit.toString(),
                y2yUpperLimit: y2yUpperLimit.toString()
              }
            };
          }
          if (_.isNil(cur.m2mValue) && _.isNil(cur.ratioValue) && _.isNil(cur.y2yValue)) {
            return {
              ...pre,
              [`${cur["id"]}Rule`]: {
                totalValue: cur.totalValue.toString()
              }
            };
          } else {
            return {
              ...pre,
              [`${cur["id"]}Rule`]: {
                m2mValue: cur.m2mValue.toString(),
                ratioValue: cur.ratioValue.toString(),
                totalValue: cur.totalValue.toString(),
                y2yValue: cur.y2yValue.toString()
              }
            };
          }
        }
        return { ...pre };
      }, {})
    };
    if (statisticsItemId) {
      Modal.confirm({
        title: getLabel(111, "信息确认"),
        content: getLabel(111, `确定要编辑统计项吗？编辑后，可能需要重新设置分析图设置。`),
        onOk: () => this.reportStatisticsItemSave(payload)
      });
    } else {
      this.reportStatisticsItemSave(payload);
    }
  };
  reportStatisticsItemSave = (payload) => {
    this.setState({ loading: true });
    reportStatisticsItemSave(payload).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        this.setState({
          formData: {
            itemValue: "", itemName: ""
          }
        }, () => this.props.onCancel(true));
      } else {
        message.error(errormsg);
      }
    }).catch(() => this.setState({ loading: false }));
  };


  statisticsItemGetform = (payload) => {
    statisticsItemGetform(payload).then(({ status, data }) => {
      if (status) {
        const { formData } = this.state;
        const { ruleData, baseForm } = data;
        const { data: dataDetail } = baseForm;
        const { columns, data: dataSource } = ruleData;
        this.setState({
          columns, dataSource,
          formData: {
            ...formData,
            itemName: dataDetail ? dataDetail.itemName : "",
            itemValue: dataDetail ? dataDetail.itemValue.id : "",
            itemValueSpan: dataDetail ? dataDetail.itemValue.name : ""
          }
        });
      }
    });
  };
  handleChangeColumnCheckBox = (key, value, id) => {
    const { dataSource } = this.state;
    this.setState({
      dataSource: _.map(dataSource, it => {
        if (it.id === id) {
          if (key !== "totalValue" && !!value && value !== "0") {
            return {
              ...it,
              totalValue: Number(value),
              [key]: Number(value)
            };
          }
          return {
            ...it,
            [key]: Number(value)
          };
        }
        return { ...it };
      })
    });
  };
  handleChangeColumnAllChecked = (key, val) => {
    const { dataSource } = this.state;
    this.setState({
      dataSource: _.map(dataSource, it => {
        if (key !== "totalValue" && !!val && val !== "0") {
          return {
            ...it,
            totalValue: Number(val),
            [key]: Number(val)
          };
        }
        return {
          ...it,
          [key]: Number(val)
        };
      })
    });
  };
  handleChangeColumnM2MValue = (key, value, id) => {
    const { dataSource } = this.state;
    this.setState({
      dataSource: _.map(dataSource, it => {
        if (it.id === id) {
          return {
            ...it,
            [key]: value
          };
        }
        return { ...it };
      })
    });
  };
  handleChangeStatisticalItems = (itemValue, _names, datas) => {
    const { formData } = this.state;
    this.setState({
      formData: {
        ...formData,
        itemValue,
        itemValueSpan: _.map(datas, it => it.name).join(","),
        itemName: datas.length === 1 ? _.map(datas, it => it.names).join(",") : ""
      }
    }, () => {
      statisticsItemChangetab({ itemId: itemValue }).then(({ status, data }) => {
        if (status) {
          const { ruleData } = data;
          const { columns, data: dataSource } = ruleData;
          this.setState({
            columns, dataSource
          });
        }
      });
    });
  };

  render() {
    const { loading, columns, dataSource, formData } = this.state;
    const { itemName, itemValue, itemValueSpan } = formData;
    const { statisticsItemId, isShare } = this.props;
    const cols = _.map(columns, it => {
      const { text, column } = it;
      if (column === "ruleName" || column === "ratio" || column === "m2m" || column === "y2y") {
        const key = column === "ruleName" ? "total" : column;
        return {
          ...it,
          title: <span>
                  <WeaCheckbox
                    disabled={isShare}
                    value={_.every(dataSource, child => !!child[`${key}Value`])}
                    onChange={val => this.handleChangeColumnAllChecked(`${key}Value`, val)}
                  />
                  <span style={{ marginLeft: 8 }}>{text}</span>
                </span>,
          render: (txt, record) => {
            return <span>
                    <WeaCheckbox
                      disabled={isShare}
                      value={record[`${key}Value`].toString()}
                      onChange={val => this.handleChangeColumnCheckBox(`${key}Value`, val, record.id)}
                    />
                    <span style={{ marginLeft: 8 }}>
                      {column === "ruleName" ? record["ruleName"] : text}
                    </span>
                  </span>;
          }
        };
      } else if (column === "m2mLimit") {
        return {
          ...it,
          title: <span>
                  <span style={{ marginRight: 8 }}>{text}</span>
                  <WeaHelpfulTip title={getLabel(111, "如：增幅>10%,差值和增幅标记为红色，增幅<-10%标记为绿色")}
                                 placement="top" width={200}/>
                </span>,
          render: (txt, record) => {
            return !!record["m2mValue"] && <IntervalSettingsComp
              isShare={isShare}
              LowerLimit={record[`${column.replace("Limit", "")}LowerLimit`]}
              UpperLimit={record[`${column.replace("Limit", "")}UpperLimit`]}
              onChange={(type, val) => this.handleChangeColumnM2MValue(`${column.replace("Limit", "")}${type === "min" ? "LowerLimit" : "UpperLimit"}`, val, record.id)}
            />;
          }
        };
      } else if (column === "y2yLimit") {
        return {
          ...it,
          title: <span>
                  <span style={{ marginRight: 8 }}>{text}</span>
                  <WeaHelpfulTip title={getLabel(111, "如：增幅>10%,差值和增幅标记为红色，增幅<-10%标记为绿色")}
                                 placement="top" width={200}/>
                </span>,
          render: (txt, record) => {
            return !!record["y2yValue"] && <IntervalSettingsComp
              isShare={isShare}
              LowerLimit={record[`${column.replace("Limit", "")}LowerLimit`]}
              UpperLimit={record[`${column.replace("Limit", "")}UpperLimit`]}
              onChange={(type, val) => this.handleChangeColumnM2MValue(`${column.replace("Limit", "")}${type === "min" ? "LowerLimit" : "UpperLimit"}`, val, record.id)}
            />;
          }
        };
      }
    });
    return (
      <WeaDialog
        {...this.props} hasScroll buttons={[]} initLoadCss
        title={
          <div className="itemsTitle">
            <span>{statisticsItemId ? getLabel(111, "编辑自定义统计项目") : getLabel(111, "新建自定义统计项目")}</span>
            {
              !isShare && <Button type="primary" loading={loading}
                                  onClick={this.handleSaveStatisticalItems}>{getLabel(111, "保存")}</Button>
            }
          </div>
        }
        style={{ width: 900, height: 450 }}
        className="statisticItemsWrapper"
      >
        <div className="statisticItemsBox">
          <WeaFormItem label={getLabel(111, "统计项目")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <WeaError tipPosition="bottom" ref="proError" error={getLabel(111, "此项必填")}>
              <WeaBrowser
                title={getLabel(111, "统计项目")} type={162} viewAttr={!isShare ? 3 : 1} isSingle
                value={itemValue}
                replaceDatas={itemValue ? _.map(itemValue.split(","), (it, idx) => ({
                  id: it,
                  name: itemValueSpan.split(",")[idx]
                })) : []}
                completeParams={{
                  type: 162,
                  fielddbtype: "browser.salaryItemBrowser",
                  f_weaver_belongto_usertype: "0"
                }}
                conditionDataParams={{
                  type: "browser.salaryItemBrowser",
                  fielddbtype: "browser.salaryItemBrowser",
                  f_weaver_belongto_usertype: "0"
                }}
                dataParams={{
                  type: "browser.salaryItemBrowser",
                  f_weaver_belongto_usertype: "0"
                }}
                destDataParams={{
                  type: "browser.salaryItemBrowser",
                  f_weaver_belongto_usertype: "0"
                }}
                // isMultCheckbox
                inputStyle={{ width: "100%" }}
                onChange={this.handleChangeStatisticalItems}
              />
            </WeaError>
          </WeaFormItem>
          <WeaFormItem label={getLabel(111, "统计项名称")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <WeaError tipPosition="bottom" ref="nameError" error={getLabel(111, "此项必填")}>
              <WeaInput value={itemName} viewAttr={!isShare ? 3 : 1}
                        onChange={itemName => this.setState({ formData: { ...formData, itemName } })}/>
            </WeaError>
          </WeaFormItem>
          <div className="customRuleTableWrapper">
            <WeaTable
              dataSource={dataSource}
              columns={cols}
              pagination={false}
            />
          </div>
        </div>
      </WeaDialog>
    );
  }
}

export default CustomStatisticsItemsModal;
/*
 * Author: 黎永顺
 * Description: 区间设置
 * Params:
 * Date: 2023/4/23
 */
const IntervalSettingsComp = (props) => {
  const { LowerLimit, UpperLimit, onChange, isShare } = props;
  return <div className="intervalSettingsCompWrapper">
    <WeaInputNumber value={LowerLimit} precision={2} onChange={val => onChange("min", val)} disabled={isShare}/>
    <span className="increaseTitle">{`% <${getLabel(111, "增幅")}<`}</span>
    <WeaInputNumber value={UpperLimit} precision={2} onChange={val => onChange("max", val)} disabled={isShare}/>
    <span className="pecentTitle">%</span>
  </div>;
};