import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { Button, Col, Dropdown, Menu, message, Modal, Popover, Row } from "antd";
import { WeaPopoverHrm, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTools, WeaTop } from "ecCom";
import InlineForm from "./components/inlineForm";
import { getSearchs, renderLoading } from "../../../util";
import * as API from "../../../apis/special";
import SlideModalTitle from "../../../components/slideModalTitle";
import AddItems from "../addItems";
import SpecialAddContent from "./components/specialAddContent";
import { condition, searchCondition } from "./components/condition";
import ImportModal from "../../../components/importModal";
import { specialModalColumns } from "../cumDeduct/columns";
import "./index.less";

@inject("specialAddStore", "taxAgentStore")
@observer
class SpecialAddDeduction extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: {
        query: false
      },
      advanceParams: { //高级搜索参数
        visible: false,
        condition: []
      },
      drawerParams: { //抽屜弹框参数
        visible: false, title: "新建",
        loading: false, isView: true,
        editId: {}
      },
      importParams: { //导入弹框参数
        visible: false, step: 0,
        importResult: [],
        payload: { taxAgentId: "" }
      },
      dataSource: [],
      columns: [],
      selectedRowKeys: [],
      pageInfo: {
        current: 1, pageSize: 10, total: 0
      }
    };
    this.inlineForm = null;
    this.addItemRef = null;
    this.specialContentRef = null;
  }

  componentDidMount() {
    const { taxAgentStore: { getTaxAgentSelectListAsAdmin }, specialAddStore: { addForm } } = this.props;
    addForm.initFormFields(condition);
    getTaxAgentSelectListAsAdmin();
    this.getSearchCondition();
    this.specialAddDeductionList();
  }

  getSearchCondition = () => {
    const { specialAddStore: { advanceForm } } = this.props;
    const { advanceParams } = this.state;
    API.getSearchCondition().then(({ status, data }) => {
      if (status) {
        const { condition } = data;
        this.setState({
          advanceParams: {
            ...advanceParams,
            condition: condition
          }
        }, () => advanceForm.initFormFields(this.state.advanceParams.condition));
      }
    });
  };
  specialAddDeductionList = (params = {}) => {
    const { loading, pageInfo } = this.state;
    const { specialAddStore: { advanceForm } } = this.props;
    const queryParams = advanceForm.getFormParams();
    const extraParams = this.inlineForm ? this.inlineForm.getFieldsValue() : {};
    const payload = {
      ...pageInfo,
      ...queryParams,
      ...extraParams,
      ...params
    };
    this.setState({ loading: { ...loading, query: true } });
    API.specialAddDeductionList(payload).then(({ status, data }) => {
      this.setState({ loading: { ...loading, query: false } });
      if (status) {
        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
        const { userid } = WeaTools.ls.getJSONObj("theme-account") || {};
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource,
          columns: _.map(columns, item => {
            const { dataIndex } = item;
            if (dataIndex === "username") {
              return {
                ...item,
                render: (text, record) => {
                  return <a
                    href={`javaScript:openhrm(${record.employeeId});`}
                    onClick={e => window.pointerXY(e)}
                    title={text}
                  >
                    {text}
                  </a>;
                }
              };
            } else if (dataIndex === "operate") {
              return {
                ...item,
                render: (text, record) => (
                  <div className="linkWapper">
                    <a href="javaScript:void(0);" onClick={() => {
                      this.setState({
                        drawerParams: {
                          ...this.state.drawerParams,
                          visible: true,
                          isView: true,
                          title: "专项附加扣除记录",
                          editId: record
                        }
                      });
                    }}>
                      查看明细
                    </a>
                    {
                      (!this.props.taxAgentStore.showOperateBtn && userid == record.employeeId) &&
                      <Popover
                        overlayClassName="moreIconWrapper"
                        placement="bottomRight"
                        content={<Menu onClick={(e) => this.handleOperate(e, record)}>
                          <Menu.Item key="edit">编辑</Menu.Item>
                        </Menu>} title="">
                        <i className="icon-coms-more"/>
                      </Popover>
                    }
                    {
                      this.props.taxAgentStore.showOperateBtn &&
                      <Popover
                        overlayClassName="moreIconWrapper"
                        placement="bottomRight"
                        content={<Menu onClick={(e) => this.handleOperate(e, record)}>
                          <Menu.Item key="edit">编辑</Menu.Item>
                          <Menu.Item key="delete">删除</Menu.Item>
                        </Menu>} title="">
                        <i className="icon-coms-more"/>
                      </Popover>
                    }
                  </div>
                )
              };
            } else {
              return { ...item };
            }
          })
        });
      }
    });
  };
  handleSaveSpecialList = (payload) => {
    const { drawerParams } = this.state;
    this.setState({ drawerParams: { ...drawerParams, loading: true } });
    if (!_.isEmpty(drawerParams.editId)) {
      API.specialAddDeductionEditData({ ...payload, id: drawerParams.editId.id }).then(({ status, errormsg }) => {
        this.setState({ drawerParams: { ...drawerParams, loading: false } });
        if (status) {
          message.success("编辑成功");
          this.setState({
            drawerParams: {
              ...drawerParams,
              visible: false,
              isView: true,
              editId: {}
            }
          }, () => {
            const { specialAddStore: { addForm } } = this.props;
            this.specialAddDeductionList();
            addForm.resetForm();
          });
        } else {
          message.error(errormsg || "编辑失败");
        }
      });
    } else {
      API.specialAddDeductionCreateData(payload).then(({ status, errormsg }) => {
        this.setState({ drawerParams: { ...drawerParams, loading: false } });
        if (status) {
          message.success("新增成功");
          this.setState({
            drawerParams: {
              ...drawerParams,
              visible: false,
              isView: true,
              editId: {}
            }
          }, () => {
            const { specialAddStore: { addForm } } = this.props;
            this.specialAddDeductionList();
            addForm.resetForm();
          });
        } else {
          message.error(errormsg || "新增失败");
        }
      });
    }
  };
  handleOperate = ({ key }, row) => {
    const { drawerParams } = this.state;
    if (key === "edit") {
      this.setState({
        drawerParams: {
          ...drawerParams,
          visible: true,
          isView: false,
          title: "编辑"
        }
      }, () => {
        const { drawerParams: params } = this.state;
        API.getSpecialAddDeduction({ id: row.id }).then(({ status, data }) => {
          if (status) {
            this.setState({
              drawerParams: {
                ...params,
                editId: data
              }
            });
          }
        });
      });
    } else if (key === "delete") {
      const payload = {
        ids: [row.id]
      };
      Modal.confirm({
        title: "信息确认",
        content: `确定删除${row.departmentName}${row.username}的专项附加扣除数据吗?若数据已参与核算，已参与核算的数据不会受影响，点击核算将会按当前列表最新数据重新核算。`,
        onOk: () => {
          API.specialAddDeductionDeleteSelectData(payload).then(({ status, errormsg }) => {
            if (status) {
              message.success("删除成功");
              this.specialAddDeductionList();
            } else {
              message.error(errormsg || "删除失败");
            }
          });
        }
      });
    }
  };
  deleteSelectAddUpDeduction = () => {
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length === 0) {
      message.warning("未选择条目");
      return;
    }
    const payload = {
      ids: selectedRowKeys
    };
    Modal.confirm({
      title: "信息确认",
      content: "确定删除所选数据吗?若数据已参与核算，已参与核算的数据不会受影响，点击核算将会按当前列表最新数据重新核算。",
      onOk: () => {
        API.specialAddDeductionDeleteSelectData(payload).then(({ status, errormsg }) => {
          if (status) {
            message.success("删除成功");
            this.specialAddDeductionList();
          } else {
            message.error(errormsg || "删除失败");
          }
        });
      },
      onCancel: () => {
      }
    });

  };
  specialAddDeductionDeleteAllData = () => {
    const extraParams = this.inlineForm ? this.inlineForm.getFieldsValue() : {};
    const payload = {
      ...extraParams
    };
    Modal.confirm({
      title: "信息确认",
      content: `确定清空所有专项附加扣除数据吗?若数据已参与核算，已参与核算的数据不会受影响，点击核算将会按当前列表最新数据重新核算。`,
      onOk: () => {
        API.specialAddDeductionDeleteAllData(payload).then(({ status, errormsg }) => {
          if (status) {
            message.success("删除成功");
            this.specialAddDeductionList();
          } else {
            message.error(errormsg || "删除失败");
          }
        });
      }
    });
  };
  specialAddDeductionPreview = (payload) => {
    const { importParams } = this.state;
    API.specialAddDeductionPreview(payload).then(({ status, data }) => {
      if (status) {
        const { preview: slideDataSource } = data;
        this.setState({
          importParams: {
            ...importParams,
            slideDataSource
          }
        });
      }
    });
  };
  specialAddDeductionImportData = (payload) => {
    const { importParams } = this.state;
    API.specialAddDeductionImportData(payload).then(({ status, data: importResult }) => {
      if (status) {
        this.setState({
          importParams: {
            ...importParams,
            step: 2,
            importResult
          }
        });
      }
    });
  };
  specialAddDeductionExport = () => {
    if (!this.handleChangeDebounce) {
      this.handleChangeDebounce = _.debounce(() => {
        const url = `${window.location.origin}/api/bs/hrmsalary/specialAddDeduction/export?ids=&taxAgentId=${this.inlineForm.getFieldsValue().taxAgentId}`;
        window.open(url, "_self");
      }, 500);
    }
    this.handleChangeDebounce();
  };

  specialAddDeductionExportSelect = () => {
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length === 0) {
      message.warning("未选择条目");
      return;
    }
    const url = `${window.location.origin}/api/bs/hrmsalary/specialAddDeduction/export?ids=${selectedRowKeys.join(",")}&taxAgentId=${this.inlineForm.getFieldsValue().taxAgentId}`;
    window.open(url, "_self");
  };
  handleExportSelectSpecialDetail = () => {
    const { state: { selectedRowKeys } } = this.specialContentRef;
    if (selectedRowKeys.length === 0) {
      message.warning("未选择条目");
      return;
    }
    const url = `${window.location.origin}/api/bs/hrmsalary/specialAddDeduction/export?ids=${selectedRowKeys.join(",")}`;
    window.open(url, "_self");
  };
  getSearchsAdQuick = (isAd) => {
    const { advanceParams } = this.state;
    // advanceParams.condition
    const { taxAgentStore: { taxAgentAdminOption }, specialAddStore: { advanceForm } } = this.props;
    return isAd ? getSearchs(advanceForm, searchCondition, 2)
      : <InlineForm
        ref={dom => this.inlineForm = dom}
        taxAgentOption={taxAgentAdminOption}
        onChange={(taxAgentId) => this.specialAddDeductionList({ taxAgentId })}
      />;
  };
  renderImportormComponent = () => {
    const { importParams } = this.state;
    const { taxAgentStore: { taxAgentAdminOption } } = this.props;
    return (
      <Row>
        <Col span={12}>
          <span
            className="formLabel"
            style={{ lineHeight: "30px", marginRight: "10px" }}>
            个税扣缴义务人
          </span>
          <WeaSelect
            showSearch // 设置select可搜索
            style={{ width: 200, display: "inline-block" }}
            options={taxAgentAdminOption}
            value={importParams.payload.taxAgentId}
            onChange={(v) => {
              this.setState({ importParams: { ...importParams, payload: { taxAgentId: v } } });
            }}
          />
        </Col>
      </Row>
    );
  };

  handleExportAllSpecialDetail = () => {
    if (!this.handleChangeDebounce) {
      this.handleChangeDebounce = _.debounce(this.handleChange, 500);
    }
    this.handleChangeDebounce();
  };

  handleChange = e => {
    const url = `${window.location.origin}/api/bs/hrmsalary/specialAddDeduction/export`;
    window.open(url, "_self");
  };

  render() {
    const {
      advanceParams,
      dataSource,
      columns,
      loading,
      selectedRowKeys,
      pageInfo,
      drawerParams,
      importParams
    } = this.state;
    const { userid } = WeaTools.ls.getJSONObj("theme-account") || {};
    const { taxAgentStore, specialAddStore: { advanceForm, addForm } } = this.props;
    const { showOperateBtn, taxAgentAdminOption } = taxAgentStore;
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
    };
    const customBtns = [
      <Dropdown.Button
        onClick={this.handleExportAllSpecialDetail}
        overlay={
          <Menu onClick={this.handleExportSelectSpecialDetail}>
            <Menu.Item key="select">导出选中</Menu.Item>
          </Menu>
        }
        type="primary"
      >
        导出全部
      </Dropdown.Button>
    ];
    const btns = [
      <Button type="primary" onClick={() => {
        this.setState({
          importParams: {
            ...importParams,
            step: 0, visible: true,
            slideDataSource: [], importResult: []
          }
        });
      }}>导入</Button>,
      <Dropdown.Button
        onClick={this.specialAddDeductionExport}
        overlay={
          <Menu onClick={this.specialAddDeductionExportSelect}>
            <Menu.Item key="select">导出选中</Menu.Item>
          </Menu>
        }
        type="ghost"
      >
        导出全部
      </Dropdown.Button>,
      <Button type="primary" onClick={() => this.setState({
        drawerParams: {
          ...drawerParams,
          visible: true,
          isView: false,
          editId: {}
        }
      })}>新建</Button>,
      <Dropdown.Button
        onClick={this.specialAddDeductionDeleteAllData}
        overlay={
          <Menu onClick={this.deleteSelectAddUpDeduction}>
            <Menu.Item key="select">删除所选</Menu.Item>
          </Menu>
        }
        type="ghost"
      >
        一键清空
      </Dropdown.Button>
    ];
    const pagination = {
      ...pageInfo,
      showTotal: (total) => `共 ${total} 条`,
      pageSizeOptions: ["10", "20", "50", "100"],
      showSizeChanger: true,
      showQuickJumper: true,
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => {
          this.specialAddDeductionList({
            current,
            pageSize
          });
        });
      },
      onChange: (current) => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => {
          this.specialAddDeductionList({
            current
          });
        });
      }
    };
    //加载数据
    if (_.isEmpty(columns)) {
      // 无权限处理
      return renderLoading();
    }
    return (
      <div className="specialAddWrapper">
        <WeaTop
          title="专项附加扣除"
          icon={<i className="icon-coms-fa"/>}
          iconBgcolor="#F14A2D"
          buttons={showOperateBtn ? btns : []}
        >
          <div className="specialAddContent">
            <WeaTab
              searchType={["base", "advanced"]}
              searchsBasePlaceHolder="请输入姓名"
              showSearchAd={advanceParams.visible}
              searchsBaseValue={advanceForm.getFormParams().username}
              onSearchChange={(v) => advanceForm.updateFields({ username: v })}
              onAdReset={() => advanceForm.reset()}
              onAdSearch={() => this.specialAddDeductionList({ current: 1 })}
              onSearch={() => this.specialAddDeductionList({ current: 1 })}
              searchsAdQuick={this.getSearchsAdQuick()}
              searchsAd={this.getSearchsAdQuick(true)}
              setShowSearchAd={bool => this.setState({ advanceParams: { ...advanceParams, visible: bool } })}
            />
            <WeaTable
              rowKey="id"
              rowSelection={rowSelection}
              columns={columns}
              dataSource={dataSource}
              pagination={pagination}
              loading={loading.query}
            />
            <WeaSlideModal
              className="specialAddSlideWrapper"
              {...drawerParams}
              top={0}
              width={60}
              height={100}
              direction="right"
              measure="%"
              title={
                <SlideModalTitle
                  subtitle={drawerParams.title}
                  loading={drawerParams.loading}
                  onSave={() => {
                    const { baseInfo } = this.addItemRef.state;
                    const bool = _.every(_.pick(baseInfo, ["taxAgentId", "employeeId"]), v => !_.isEmpty(v));
                    if (!bool && _.isEmpty(drawerParams.editId)) {
                      Modal.warning({
                        title: "信息确认",
                        content: "必要信息不完整，红色*为必填项！"
                      });
                      return;
                    }
                    const payload = {
                      ..._.pick(baseInfo, ["taxAgentId", "employeeId", "taxAgentName"]),
                      ...addForm.getFormParams()
                    };
                    this.handleSaveSpecialList(payload);
                  }}
                  editable={(showOperateBtn && !drawerParams.isView)}
                  showOperateBtn={showOperateBtn}
                  customOperate={(showOperateBtn && drawerParams.isView) ? customBtns : (!showOperateBtn && userid == drawerParams.editId.employeeId) ? [
                    <Button type="primary" className="saveBtn" onClick={() => {
                      const { baseInfo } = this.addItemRef.state;
                      const bool = _.every(_.pick(baseInfo, ["taxAgentId", "employeeId"]), v => !_.isEmpty(v));
                      if (!bool && _.isEmpty(drawerParams.editId)) {
                        Modal.warning({
                          title: "信息确认",
                          content: "必要信息不完整，红色*为必填项！"
                        });
                        return;
                      }
                      const payload = {
                        ..._.pick(baseInfo, ["taxAgentId", "employeeId", "taxAgentName"]),
                        ...addForm.getFormParams()
                      };
                      this.handleSaveSpecialList(payload);
                    }} loading={drawerParams.loading}>保存</Button>
                  ] : []}
                />
              }
              content={
                !drawerParams.isView ?
                  <AddItems
                    ref={(dom) => this.addItemRef = dom}
                    taxAgentOption={taxAgentAdminOption}
                    form={addForm}
                    isSpecial
                    editId={drawerParams.editId}
                    condition={condition}
                  /> :
                  <SpecialAddContent ref={dom => this.specialContentRef = dom} specialId={drawerParams.editId.id}/>
              }
              onClose={() => this.setState({
                drawerParams: {
                  ...drawerParams,
                  visible: false,
                  isView: true,
                  editId: {}
                }
              })}
              showMask={true}
              closeMaskOnClick={() => this.setState({
                drawerParams: {
                  ...drawerParams,
                  visible: false,
                  isView: true,
                  editId: {}
                }
              })}
            />
            {/*人员卡片*/}
            <WeaPopoverHrm/>
            {/* 导入模板*/}
            {
              importParams.visible &&
              <ImportModal
                needimportSelected //下载模板需要带上导入所选项
                params={importParams.payload}
                columns={specialModalColumns}
                step={importParams.step}
                setStep={(step) => this.setState({ importParams: { ...importParams, step } })}
                slideDataSource={importParams.slideDataSource}
                importResult={importParams.importResult}
                onFinish={() => {
                  this.setState({ importParams: { ...importParams, step: 0, visible: false } }, () => {
                    this.specialAddDeductionList();
                    localStorage.removeItem("fileList");
                  });
                }}
                previewImport={this.specialAddDeductionPreview}
                importFile={this.specialAddDeductionImportData}
                templateLink="/api/bs/hrmsalary/specialAddDeduction/downloadTemplate"
                renderFormComponent={this.renderImportormComponent}
                visiable={importParams.visible}
                onCancel={() => {
                  localStorage.removeItem("fileList");
                  this.setState({
                    importParams: {
                      ...importParams,
                      step: 0, visible: false,
                      slideDataSource: [], importResult: [],
                      payload: { taxAgentId: "" }
                    }
                  });
                }}
              />
            }
          </div>
        </WeaTop>
      </div>
    );
  }
}

export default SpecialAddDeduction;