import React from "react";
import { WeaHelpfulTip, WeaInputNumber, WeaSelect, WeaTab } from "ecCom";
import { Switch, Table } from "antd";
import { insertUpdateColumns } from "./columns";
import { inject, observer } from "mobx-react";
import PaymentPeriodModal from "./paymentPeriodModal";
import "./index.less";
import SchemeInfoForm from "./schemeInfoForm";

@inject("programmeStore", "salaryFileStore", "taxAgentStore")
@observer
export default class DefaultSlideForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "SCHEME_TOWN",
      selectedKey: "PERSONAL",
      dataSource: {},
      paymentPeriodModal: {
        visible: false,
        record: {},
        cycleSetting: "000000000000"
      }
    };
  }

  updateDataSource = (record, e, key) => {
    const {
      programmeStore: {
        defaultCompanyDataSource,
        defaultPersonDataSource,
        setDefaultPersonDataSource,
        setDefaultCompanyDataSource
      }
    } = this.props;
    let result = { ...record };
    if (key === "paymentCycle" && e === "1") {
      result["accountType"] = "1";
    } else if (key === "paymentCycle" && e === "0") {
      result["accountType"] = record.accountType;
    }
    result[key] = e;
    if (key === "upperLimit" || key === "lowerLimit") {
      let dataSource = [...defaultPersonDataSource],
        dataSource_company = [...defaultCompanyDataSource];
      dataSource = dataSource.map(item => {
        if (item.insuranceName === result.insuranceName) return { ...item, [key]: e };
        else return item;
      });
      dataSource_company = dataSource_company.map(item => {
        if (item.insuranceName === result.insuranceName) return { ...item, [key]: e };
        else return item;
      });
      setDefaultPersonDataSource(dataSource);
      setDefaultCompanyDataSource(dataSource_company);
    } else {
      if (this.state.selectedKey === "PERSONAL") {
        let dataSource = [...defaultPersonDataSource];
        dataSource = dataSource.map(item => {
          if (item.id == result.id) return result;
          else return item;
        });
        setDefaultPersonDataSource(dataSource);
      } else {
        let dataSource = [...defaultCompanyDataSource];
        dataSource = dataSource.map(item => {
          if (item.id == result.id) return result;
          else return item;
        });
        setDefaultCompanyDataSource(dataSource);
      }
    }
  };

  handleSetPaymentPeriod = (cycleSetting) => {
    let cycleObj = {
      1: "0",
      2: "0",
      3: "0",
      4: "0",
      5: "0",
      6: "0",
      7: "0",
      8: "0",
      9: "0",
      10: "0",
      11: "0",
      12: "0"
    };
    if (!_.isEmpty(cycleSetting)) {
      _.forEach(cycleSetting, item => {
        _.assign(cycleObj, { [item]: "1" });
      });
    } else {
      _.forEach(Object.keys(cycleObj), item => {
        _.assign(cycleObj, { [item]: "0" });
      });
    }
    const tmpVStr = _.reduce(Object.values(cycleObj), (pre, cur) => {
      return pre + cur;
    }, "");
    this.setState({
      paymentPeriodModal: {
        ...this.state.paymentPeriodModal,
        cycleSetting: tmpVStr
      }
    }, () => {
      this.updateDataSource(this.state.paymentPeriodModal.record, tmpVStr, "cycleSetting");
    });
  };

  render() {
    const { paymentPeriodModal } = this.state;
    const { programmeStore, requestParams, onChange } = this.props;
    const { defaultPersonDataSource, defaultCompanyDataSource } = programmeStore;
    insertUpdateColumns.map(item => {
      if (item.dataIndex == "insuranceName") {
        item.render = (text) => {
          return (
            <div style={{ maxWidth: 100 }} className="ellipsis" title={text}>{text}</div>
          );
        };
      } else if (item.dataIndex == "isPayment") {
        item.render = (text, record) => {
          return (
            <Switch
              checked={text}
              onChange={e => {
                this.updateDataSource(record, e, "isPayment");
              }}
            />
          );
        };
      } else if (item.dataIndex == "validNum") {
        let options = [
          {
            key: "0",
            selected: false,
            showname: "0"
          },
          {
            key: "1",
            selected: false,
            showname: "1"
          },
          {
            key: "2",
            selected: true,
            showname: "2"
          },
          {
            key: "3",
            selected: false,
            showname: "3"
          }
        ];
        item.render = (text, record) => {
          return (
            <WeaSelect
              options={options}
              value={String(text)}
              onChange={v => {
                this.updateDataSource(record, v, "validNum");
              }}
            />
          );
        };
      } else if (item.dataIndex == "rententionRule") {
        let options = [
          {
            key: "1",
            selected: false,
            showname: "原始数据"
          },
          {
            key: "2",
            selected: false,
            showname: "四舍五入"
          },
          {
            key: "3",
            selected: false,
            showname: "向上舍入"
          },
          {
            key: "4",
            selected: false,
            showname: "向下舍入"
          },
          {
            key: "5",
            selected: false,
            showname: "见分进角"
          },
          {
            key: "6",
            selected: false,
            showname: "向上取偶"
          }
        ];
        item.render = (text, record) => {
          return (
            <WeaSelect
              options={options}
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "rententionRule");
              }}
            />
          );
        };
      } else if (item.dataIndex == "paymentProportion") {
        item.render = (text, record) => {
          return (
            <WeaInputNumber
              min={0}
              precision={4}
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "paymentProportion");
              }}
            />
          );
        };
      } else if (item.dataIndex == "fixedCost") {
        item.render = (text, record) => {
          return (
            <WeaInputNumber
              min={0}
              precision={2}
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "fixedCost");
              }}
            />
          );
        };
      } else if (item.dataIndex == "upperLimit") {
        item.render = (text, record) => {
          return (
            <WeaInputNumber
              min={record.lowerLimit || 0}
              precision={2}
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "upperLimit");
              }}
            />
          );
        };
      } else if (item.dataIndex == "lowerLimit") {
        item.render = (text, record) => {
          return (
            <WeaInputNumber
              min={0}
              max={record.upperLimit || 99999999999}
              precision={2}
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "lowerLimit");
              }}
            />
          );
        };
      } else if (item.dataIndex === "paymentCycle") {
        item.title = <div>
          <span>缴纳周期</span>
          <WeaHelpfulTip
            style={{ paddingLeft: 8 }}
            width={480}
            title={
              <div>
                <div>例：养老保险缴纳周期选择3/6/9/12；</div>
                <br/>
                <div>
                  若：核算方式选择基数求和*比例；则数据核算逻辑为：
                  账单月1月2月时，养老保险不会被核算；
                  账单月3月时，养老保险核算金额为：养老保险月缴纳基数*3*缴纳比例+固定费用*3
                  （3代表1月2月3月 3个月，*3代表3个月基数相加和固定费用相加）
                </div>
                <br/>
                <div>
                  若：核算方式选择基数*比例再求和；则数据核算逻辑为：
                  账单月1月2月时，养老保险不会被核算；
                  账单月3月时，养老保险核算金额为：
                  将1~3月算出来的【养老保险月缴纳基数*缴纳比例+固定费用】求和
                </div>
                <br/>
                <div>
                  若：缴纳周期选择选择月缴，则核算方式默认为【基数*比例+固定费用】，不可修改
                </div>
              </div>
            }
            placement="topLeft"
          />
        </div>;
        item.render = (text, record) => {
          return (
            <div>
              <WeaSelect
                options={[
                  { key: "0", showname: "月缴" },
                  { key: "1", showname: "自定义" }
                ]}
                style={{ width: "80%" }}
                value={text}
                onChange={v => {
                  this.updateDataSource(record, v, "paymentCycle");
                }}
              />
              {
                record.paymentCycle === "1" &&
                <a href="javascript: void(0);" style={{ paddingLeft: 4, color: "#5d9cec" }}
                   onClick={() => this.setState({
                     paymentPeriodModal: {
                       visible: true,
                       record: record,
                       cycleSetting: record.cycleSetting || "000000000000"
                     }
                   })}>设置</a>
              }
            </div>
          );
        };
      } else if (item.dataIndex === "accountType") {
        item.render = (text, record) => {
          if (record.paymentCycle === "0") {
            return (
              <div style={{ maxWidth: 180 }} className="ellipsis">基数*比例+固定费用</div>
            );
          } else {
            return (
              <WeaSelect
                style={{ width: "100%" }}
                options={[
                  { key: "1", showname: "∑基数*比例+∑固定费用" },
                  { key: "2", showname: "∑(基数*比例+固定费用)" }
                ]}
                value={text}
                onChange={v => {
                  this.updateDataSource(record, v, "accountType");
                }}
              />
            );
          }
        };
      }
    });
    return (
      <div className="defaultSlideForm">
        <SchemeInfoForm {...this.props} onChangeFieldsItem={(val) => onChange({ ...requestParams, ...val })}/>

        <div className="tableBar">
          <WeaTab
            datas={[
              { title: "个人", viewcondition: "PERSONAL" },
              { title: "公司", viewcondition: "COMPANY" }
            ]}
            keyParam="viewcondition"
            selectedKey={this.state.selectedKey}
            onChange={selectedKey => this.setState({ selectedKey })}
          />

          <div className="tableWrapper">
            {this.state.selectedKey === "PERSONAL"
              ? <Table
                dataSource={defaultPersonDataSource}
                columns={insertUpdateColumns}
                pagination={false}
                scroll={{ x: 1000 }}
              />
              : <Table
                dataSource={defaultCompanyDataSource}
                columns={insertUpdateColumns}
                pagination={false}
                scroll={{ x: 1000 }}
              />}
          </div>
          <PaymentPeriodModal
            {...paymentPeriodModal}
            onCancel={() => this.setState({
              paymentPeriodModal: {
                visible: false,
                record: {},
                cycleSetting: "000000000000"
              }
            })}
            onSetPaymentPeriod={this.handleSetPaymentPeriod}
          />
        </div>
      </div>
    );
  }
}