/*
 * Author: 黎永顺
 * Description: 正常缴纳月份
 * Date: 2022-04-20 08:56:08
 * LastEditTime: 2022-06-29 09:53:36
 */
import React, { Component } from "react";
import { Button, Icon, message, Modal, Spin, Tooltip } from "antd";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaDialog, WeaInputSearch, WeaTable } from "ecCom";
import { calcPageNo, getSearchs } from "../../../../util";
import { getQueryString } from "../../../../util/url";
import ProgressModal from "../../../../components/progressModal";
import AcctResultImportModal from "../../../calculateDetail/acctResult/importModal/acctResultImportModal";
import AdjustmentSlide from "./adjustmentSlide";
import { getCalculateProgress } from "../../../../apis/calculate";
import _ from "lodash";
import "./index.less";
import RegEditDetial from "./regEditDetial";

@inject("standingBookStore")
@observer
export default class NormalIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: "",
      current: 1,
      pageSize: 10,
      selectedRowKeys: [],
      addProps: {
        title: "",
        visible: false
      },
      adjustSlide: {
        title: "调差",
        visible: false
      },
      tableData: {
        list: [],
        columns: [],
        total: 0
      },
      searchValue: "",
      progressVisible: false,
      progress: 0,
      fieldData: {}, //选中的表单头信息
      importParams: { //导入信息的弹框表示
        visible: false
      },
      returnEditPersonSlide: {
        title: "",
        editId: "",
        visible: false
      }
    };
    this.timer = null;
    this.timerDelete = null;
  }

  componentDidMount() {
    const { selectedKey, location } = this.props;
    const { current } = this.state;
    const billMonth = location.query.billMonth;
    const paymentOrganization = location.query.paymentOrganization;
    selectedKey === "1"
      ? this.getNormalList({ billMonth, current, paymentOrganization })
      : this.getSupplementaryList({ billMonth, current, paymentOrganization });
  }

  componentWillUnmount() {
    // 清除轮询
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.timerDelete) {
      clearInterval(this.timerDelete);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.selectedKey != this.props.selectedKey) {
      const { billMonth, paymentOrganization } = nextProps;
      this.setState({
        current: 1
      }, () => {
        const { current } = this.state;
        nextProps.selectedKey === "1"
          ? this.getNormalList({ billMonth, current, paymentOrganization })
          : this.getSupplementaryList({
            billMonth,
            current,
            paymentOrganization
          });
      });
    }
  }

  handleSearch(value) {
    const { billMonth, selectedKey, paymentOrganization } = this.props;
    const { current } = this.state;
    selectedKey === "1"
      ? this.getNormalList({
        billMonth,
        current: 1,
        paymentOrganization,
        userName: value
      })
      : this.getSupplementaryList({
        billMonth,
        current: 1,
        paymentOrganization,
        userName: value
      });
  }

  handleSave = () => {
    const {
      siaccountCommonSave,
      siaccountSupplementarySave,
      form
    } = this.props.standingBookStore;
    const { billMonth, selectedKey, paymentOrganization } = this.props;
    if (selectedKey === "1") {
      const { includes, excludes } = form.getFormParams();
      const payload = {
        billMonth,
        includes: includes.split(","),
        excludes: _.isEmpty(excludes) ? excludes.split(",") : []
      };
      siaccountCommonSave(payload).then(() => {
        message.success("添加成功");
        this.getNormalList({
          billMonth,
          paymentOrganization,
          current: this.state.current
        });
        this.setState({
          addProps: {
            ...this.state.addProps,
            title: "",
            visible: false
          }
        });
      });
    } else {
      const paymentOrganization = getQueryString("paymentOrganization");
      form.validateForm().then(f => {
        if (f.isValid) {
          const {
            includes,
            billMonth: billMonthList,
            excludes,
            projects
          } = form.getFormParams();
          const payload = {
            billMonth,
            billMonthList: billMonthList.split(","),
            includes: includes.split(","),
            // excludes: excludes.split(","),
            projects: projects.split(","),
            paymentOrganization
          };
          siaccountSupplementarySave(payload).then(() => {
            message.success("添加成功");
            this.getSupplementaryList({
              billMonth,
              current: this.state.current,
              paymentOrganization
            });
            this.setState(
              {
                addProps: {
                  ...this.state.addProps,
                  title: "",
                  visible: false
                }
              },
              () => {
                form.resetForm();
              }
            );
          });
        } else {
          f.showErrors();
          this.setState({ date: new Date() }); // 改变一个state的变量,强制页面刷新
        }
      });
    }
  };

  getNormalList = (payload = {}) => {
    const { getNormalList } = this.props.standingBookStore;
    getNormalList({ ...payload }).then(({ list, columns = [], total }) => {
      columns = _.map(_.filter(columns, it => it.dataIndex !== "id"), it => {
        if (it.dataIndex === "employeeId") {
          it = {
            ...it,
            width: 150,
            fixed: "left",
            render: (text, r) => {
              const { userName, employeeId } = r;
              return (
                <span>
                  {userName}
                </span>
              );
            }
          };
          it.title = "姓名";
        }
        return {
          ...it,
          title: <span dangerouslySetInnerHTML={{ __html: it.title }}/>,
          width: 150
        };
      });
      this.setState({
        tableData: {
          list,
          columns,
          total
        }
      });
    });
  };
  getSupplementaryList = (payload = {}) => {
    const { getSupplementaryList } = this.props.standingBookStore;
    getSupplementaryList({
      ...payload
    }).then(({ list, columns = [], total }) => {
      columns = _.map(_.filter(columns, it => it.dataIndex !== "id"), it => {
        if (it.dataIndex === "employeeId") {
          it = {
            ...it,
            width: 150,
            fixed: "left",
            render: (text, r) => {
              const { userName, employeeId } = r;
              return (
                <span>
                  {userName}
                </span>
              );
            }
          };
          it.title = "姓名";
        }
        return {
          ...it,
          title: <span dangerouslySetInnerHTML={{ __html: it.title }}/>,
          width: 150
        };
      });
      this.setState({
        tableData: {
          list,
          columns,
          total
        }
      });
    });
  };
  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };
  handleBatchDelete = () => {
    const { siaccountCommonDelete } = this.props.standingBookStore;
    const { list } = this.state.tableData;
    const { selectedRowKeys } = this.state;
    const { billMonth, selectedKey, paymentOrganization } = this.props;
    if (_.isEmpty(selectedRowKeys)) {
      message.warning("未勾选数据！");
    } else {
      const includes = _.map(
        _.filter(list, it => selectedRowKeys.includes(it.id)),
        item => item.employeeId
      );
      const ids = _.map(
        _.filter(list, it => selectedRowKeys.includes(it.id)),
        item => item.id
      );
      Modal.confirm({
        title: "确认信息",
        content: "确认删除勾选的数据吗？",
        onOk: () => {
          this.setState({
            progressVisible: true
          }, () => {
            this.timerDelete = setInterval(() => {
              if (this.state.progress !== 100) {
                this.setState({
                  progress: this.state.progress + 10
                });
              } else {
                clearInterval(this.timerDelete);
                this.setState({
                  progressVisible: false,
                  progress: 0
                }, () => {
                  message.success("删除成功");
                  selectedKey === "1"
                    ? this.getNormalList({
                      billMonth,
                      paymentOrganization,
                      current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length)
                    })
                    : this.getSupplementaryList({
                      billMonth,
                      current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length),
                      paymentOrganization
                    });
                });
              }
            }, 800);
          });

          siaccountCommonDelete({
            billMonth,
            includes,
            ids,
            paymentOrganization
          }).then(() => {
            clearInterval(this.timerDelete);
            message.success("删除成功");
            this.setState({ selectedRowKeys: [], progressVisible: false, progress: 0 });
            selectedKey === "1"
              ? this.getNormalList({
                billMonth,
                paymentOrganization,
                current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length)
              })
              : this.getSupplementaryList({
                billMonth,
                current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length),
                paymentOrganization
              });
          });

        },
        onCancel: () => {
        }
      });
    }
  };
  handleAdd = () => {
    const {
      siaccountCommonForm,
      querySupplementaryForm
    } = this.props.standingBookStore;
    const { billMonth, selectedKey } = this.props;
    if (selectedKey === "1") {
      siaccountCommonForm();
    } else {
      querySupplementaryForm();
    }
    this.setState({
      addProps: {
        ...this.state.addProps,
        title: "添加缴纳人员",
        visible: true
      }
    });
  };

  // 核算按钮点击
  handleCommonAccountClick() {
    const { billMonth, selectedKey, paymentOrganization } = this.props;
    const { commonAccount } = this.props.standingBookStore;
    commonAccount({ billMonth, paymentOrganization, includes: [] });
    this.setState({
      progressVisible: true
    }, () => {
      this.timer = setInterval(() => {
        getCalculateProgress(billMonth).then(({ status, data }) => {
          if (status) {
            if (this.state.progress !== 100) {
              this.setState({
                progress: (Number(data.progress).toFixed(2)) * 100
              });
            } else {
              clearInterval(this.timer);
              this.setState({
                progressVisible: false,
                progress: 0
              }, () => {
                message.success("核算成功");
                selectedKey === "1"
                  ? this.getNormalList({
                    billMonth,
                    paymentOrganization,
                    current: this.state.current
                  })
                  : this.getSupplementaryList({
                    billMonth,
                    paymentOrganization,
                    current: this.state.current
                  });
              });
            }
          } else {
            clearInterval(this.timer);
            this.setState({
              progressVisible: false,
              progress: 0
            });
          }
        }).catch(() => {
          clearInterval(this.timer);
          this.setState({
            progressVisible: false,
            progress: 0
          });
        });
      }, 600);
    });
  }

  handleExport = () => {
    const { billMonth, selectedKey, paymentOrganization } = this.props;
    const urlObj = {
      "1": "/api/bs/hrmsalary/welfare/common/export",
      "3": "/api/bs/hrmsalary/welfare/supplementary/export"
    };
    const url = `${window.location
      .origin}${urlObj[selectedKey]}?billMonth=${billMonth}&paymentOrganization=${paymentOrganization}`;
    window.open(url, "_self");
  };

  handleEditNormalStandingBook = (record) => {
    const { userName, id: editId } = record;
    const { returnEditPersonSlide } = this.state;
    this.setState({
      returnEditPersonSlide: { ...returnEditPersonSlide, visible: true, title: userName, editId }
    });
  };
  handleCloseNormalStandingBookModal = (refreshList = false) => {
    const { returnEditPersonSlide } = this.state;
    this.setState({
      returnEditPersonSlide: { ...returnEditPersonSlide, visible: false, title: "", editId: "" }
    }, () => {
      if (refreshList) {
        const { current } = this.state;
        const { billMonth, selectedKey, paymentOrganization } = this.props;
        selectedKey === "1"
          ? this.getNormalList({
            billMonth,
            paymentOrganization,
            current
          })
          : this.getSupplementaryList({
            billMonth,
            paymentOrganization,
            current
          });
      }
    });
  };

  render() {
    const { remarks, billMonth, selectedKey, paymentOrganization } = this.props;
    const { selectedRowKeys, addProps, adjustSlide, importParams, returnEditPersonSlide } = this.state;
    const { loading, form, condition, saveLoading } = this.props.standingBookStore;
    let { list, columns, total } = this.state.tableData;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const pagination = {
      total,
      current: this.state.current,
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({ current, pageSize });
        selectedKey === "1"
          ? this.getNormalList({ billMonth, current, pageSize, paymentOrganization })
          : this.getSupplementaryList({
            billMonth,
            current,
            pageSize,
            paymentOrganization
          });
      },
      onChange: current => {
        this.setState({ current });
        selectedKey === "1"
          ? this.getNormalList({
            billMonth, current,
            pageSize: this.state.pageSize, paymentOrganization
          })
          : this.getSupplementaryList({
            billMonth,
            current,
            pageSize: this.state.pageSize,
            paymentOrganization
          });
      }
    };
    columns = _.map(toJS(columns), item => {
      if (item.dataIndex === "employeeId") {
        return { ...item };
      } else if (item.dataIndex === "costCenter") {
        return {
          ...item,
          render: (text, record) => {
            const { costCenter } = record;
            return <a href={costCenter.url} className="tdEllipsis">{costCenter.name || ""}</a>;
          }
        };
      }
      return {
        ...item,
        render: (text) => {
          return <span className="tdEllipsis" title={text}>{text}</span>;
        }
      };
    });
    columns = [
      ...columns,
      {
        title: "操作",
        dataIndex: "operate",
        fixed: "right",
        width: "120px",
        render: (text, record) => {
          return (
            <div className="optWrapper">
              <a
                href="javascript:void(0);"
                className="mr10"
                onClick={() => this.handleEditNormalStandingBook(record)}
              >编辑</a>
            </div>
          );
        }
      }
    ];
    return (
      <div className="normalWapper">
        {
          selectedKey === "1" &&
          <div className="topContent">
            <div className="month">
              <span>
                账单月份
                <Tooltip placement="topLeft" title="提示：正常缴纳，账单月份即社保福利缴纳月份">
                  <Icon type="question-circle"/>
                </Tooltip>
              </span>
              <span>
                {billMonth}
              </span>
            </div>
            <div>
              <span>备注：</span>
              <span>
                {remarks}
              </span>
            </div>
          </div>
        }
        <div className="tabOption">
          {this.props.type !== "detail" && this.props.selectedKey == "3"
            ? <span style={{ display: "flex", alignItems: "center" }}>
                <Tooltip title="批量删除">
                  <i
                    style={{ color: "#2db7f5", fontSize: 18 }}
                    className="icon-coms-Batch-delete"
                    onClick={this.handleBatchDelete}
                  />
                </Tooltip>
                <Tooltip title="添加该月正常缴纳人员">
                  <i className="icon-coms-Add-to" onClick={this.handleAdd} style={{ color: "#2db7f5", fontSize: 18 }}/>
                </Tooltip>
              </span>
            : <span/>}

          {addProps.visible &&
            <WeaDialog
              {...addProps}
              onCancel={() =>
                this.setState({
                  addProps: {
                    ...addProps,
                    title: "",
                    visible: false
                  }
                })}
              buttons={[
                <Button
                  type="primary"
                  onClick={this.handleSave}
                  loading={saveLoading}>
                  保存
                </Button>,
                <Button onClick={() => form.resetForm()}>重置</Button>
              ]}>
              {getSearchs(form, toJS(condition), 1)}
            </WeaDialog>}
          {/* {selectedKey === "3" && (
            <Tooltip title="导入">
              <i className="icon-coms02-Import" />
            </Tooltip>
          )}
          <Tooltip title="导出全部">
            <i className="icon-coms02-coms2-export" />
          </Tooltip> */}
          {
            selectedKey === "1" && this.props.type !== "detail" &&
            <React.Fragment>
              <Button type="primary" onClick={() => {
                this.handleCommonAccountClick();
              }}>核算</Button>
              <Button type="ghost" onClick={() => {
                this.setState({
                  adjustSlide: {
                    ...adjustSlide,
                    visible: true
                  }
                });
              }}>调差</Button>
            </React.Fragment>
          }
          {
            selectedKey === "1" &&
            <React.Fragment>
              <Button type="primary" onClick={() => {
                window.open(`/spa/hrmSalary/static/index.html#/main/hrmSalary/socialSecurityBenefits/sbofflineComparison?billMonth=${billMonth}&paymentOrganization=${paymentOrganization}`);
              }}>线下对比</Button>
            </React.Fragment>
          }
          {/*核算进度条*/}
          <ProgressModal
            title={selectedKey === "3" ? "正在删除请稍后" : "正在核算请稍后"}
            visible={this.state.progressVisible}
            onCancel={() => {
              this.setState({ progressVisible: false, progress: 0 });
            }}
            progress={this.state.progress}
          />
          {
            this.props.type !== "detail" &&
            <Tooltip title="导入数据">
              <i
                className="icon-coms02-Import"
                style={{ color: "#2db7f5", fontSize: 18, marginRight: 10 }}
                onClick={() => this.setState({ importParams: { ...importParams, visible: true } })}
              />
            </Tooltip>
          }
          {/*导入弹框*/}
          {
            importParams.visible &&
            <AcctResultImportModal
              visiable={importParams.visible}
              fieldData={this.state.fieldData}
              onAdd={fieldData => {
                this.setState({
                  fieldData
                });
              }}
              onCancel={() => {
                this.setState({ importParams: { ...importParams, visible: false }, fieldData: {} }, () => {
                  const { billMonth, selectedKey, paymentOrganization } = this.props;
                  const { current } = this.state;
                  selectedKey === "1"
                    ? this.getNormalList({ billMonth, current, paymentOrganization })
                    : this.getSupplementaryList({ billMonth, current, paymentOrganization });
                });
              }}
              isStandingBook
              standingBookTabKey={selectedKey}
            />
          }

          <Tooltip title="导出全部">
            <i
              className="icon-coms02-coms2-export"
              style={{ color: "#2db7f5", fontSize: 18 }}
              onClick={this.handleExport}
            />
          </Tooltip>
          <WeaInputSearch
            value={this.state.searchValue}
            onChange={value => {
              this.setState({ searchValue: value });
            }}
            placeholder={"请输入姓名"}
            onSearch={value => {
              this.handleSearch(value);
            }}
          />
        </div>
        {/* table */}
        <div>
          <Spin spinning={loading}>
            <WeaTable
              rowKey="id"
              columns={columns}
              dataSource={list}
              loading={loading}
              pagination={pagination}
              rowSelection={rowSelection}
              scroll={{ x: 1200, y: "calc(100vh - 233px)" }}
            />
          </Spin>
          {/*编辑弹框*/}
          <RegEditDetial {...returnEditPersonSlide} onCancel={this.handleCloseNormalStandingBookModal}/>
          <AdjustmentSlide
            {...adjustSlide}
            onCancel={() => {
              this.setState({
                adjustSlide: {
                  ...adjustSlide,
                  visible: false
                }
              });
            }}
          />
        </div>
      </div>
    );
  }
}