/*
 * Author: 黎永顺
 * Description: 正常缴纳月份
 * Date: 2022-04-20 08:56:08
 * LastEditTime: 2022-04-22 19:06:46
 */
import React, { Component } from "react";
import { Icon, Tooltip, Button, message, Modal } from "antd";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaBrowser, WeaTable, WeaPopoverHrm, WeaDialog } from "ecCom";
import { getSearchs } from "../../../../util";
import _ from "lodash";
import "./index.less";

@inject("standingBookStore")
@observer
export default class NormalIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: "",
      current: 1,
      selectedRowKeys: [],
      addProps: {
        title: "",
        visible: false,
      },
      tableData: {
        list: [],
        columns: [],
        total: 0,
      },
    };
  }

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

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

  handleSave = () => {
    const { siaccountCommonSave, siaccountSupplementarySave, form } =
      this.props.standingBookStore;
    const { billMonth, selectedKey } = 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, current: this.state.current });
        this.setState({
          addProps: {
            ...this.state.addProps,
            title: "",
            visible: false,
          },
        });
      });
    } else {
      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(","),
          };
          siaccountSupplementarySave(payload).then(() => {
            message.success("添加成功");
            this.getSupplementaryList({
              billMonth,
              current: this.state.current,
            });
            this.setState({
              addProps: {
                ...this.state.addProps,
                title: "",
                visible: false,
              },
            });
          });
        } 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 (
                  <WeaPopoverHrm>
                    <a
                      href={`javaScript:openhrm(${employeeId});`}
                      onClick={(e) => window.pointerXY(e)}
                      title={userName}>
                      {userName}
                    </a>
                  </WeaPopoverHrm>
                );
              },
            };
          }
          return {
            ...it,
            title: <span dangerouslySetInnerHTML={{ __html: it.title }}></span>,
            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 (
                    <WeaPopoverHrm>
                      <a
                        href={`javaScript:openhrm(${employeeId});`}
                        onClick={(e) => window.pointerXY(e)}
                        title={userName}>
                        {userName}
                      </a>
                    </WeaPopoverHrm>
                  );
                },
              };
            }
            return {
              ...it,
              title: (
                <span dangerouslySetInnerHTML={{ __html: it.title }}></span>
              ),
              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 } = this.props;
    if (_.isEmpty(selectedRowKeys)) {
      message.warning("未勾选数据！");
    } else {
      const includes = _.map(
        _.filter(list, (it) => selectedRowKeys.includes(it.id)),
        (item) => item.employeeId
      );
      Modal.confirm({
        title: "确认信息",
        content: "确认删除勾选的数据吗？",
        onOk: () => {
          siaccountCommonDelete({ billMonth, includes }).then(() => {
            message.success("删除成功");
            this.setState({ selectedRowKeys: [] });
            selectedKey === "1"
              ? this.getNormalList({ billMonth, current: this.state.current })
              : this.getSupplementaryList({
                  billMonth,
                  current: this.state.current,
                });
          });
        },
        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,
      },
    });
  };
  render() {
    const { remarks, billMonth, selectedKey } = this.props;
    const { selectedRowKeys, addProps, date } = 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} 条`,
      onChange: (current) => {
        this.setState({ current });
        selectedKey === "1"
          ? this.getNormalList({ billMonth, current })
          : this.getSupplementaryList({
              billMonth,
              current,
            });
      },
    };
    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">
          <Tooltip title="批量删除">
            <i
              className="icon-coms-Batch-delete"
              onClick={this.handleBatchDelete}
            />
          </Tooltip>
          <Tooltip title="添加该月正常缴纳人员">
            <i className="icon-coms-Add-to" onClick={this.handleAdd} />
          </Tooltip>
          {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" && <Button type="primary">核算</Button>}
          <WeaBrowser
            type={17}
            textDecoration={true}
            inputStyle={{ width: 200 }}
            onChange={(ids, names, datas) =>
              console.log("多人力", ids, names, datas)
            }
            isSingle={false}
          />
        </div>
        {/* table */}
        <div style={{ padding: "0 16px" }}>
          <WeaTable
            rowKey="id"
            columns={columns}
            dataSource={list}
            loading={loading}
            pagination={pagination}
            rowSelection={rowSelection}
            scroll={{ x: 1200 }}
          />
        </div>
      </div>
    );
  }
}