import React from "react";
import CustomTab from "../../components/customTab";
import { inject, observer } from "mobx-react";
import { getQueryString } from "../../util/url";
import * as API from "../../apis/declare";
import { Button } from "antd";
import UnifiedTable from "../../components/UnifiedTable";
import "./index.less";

@inject("taxAgentStore")
@observer
export default class GenerateDeclarationDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      columns: [],
      pageInfo: { current: 1, pageSize: 10, total: 0 },
      declareInfo: {}
    };
  }

  componentWillMount() {
    this.getDetailList();
    this.getDeclareInfo();
  }

  getDetailList = () => {
    const { pageInfo } = this.state;
    const payload = {
      ...pageInfo, taxDeclarationIdStr: getQueryString("id")
    };
    this.setState({ loading: true });
    API.getDetailList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
        this.setState({
          dataSource,
          pageInfo: {
            ...pageInfo,
            current, pageSize, total
          },
          columns: _.map(_.filter(columns, it => it.dataIndex !== "jobNum"), item => {
            if (item.dataIndex === "username") {
              return {
                ...item,
                render: (text, record) => {
                  return <a className="ellipsis"
                            href={`javaScript:openhrm(${record.employeeId});`}
                            onClick={e => window.pointerXY(e)}
                            title={text}
                  >
                    {text}
                  </a>;
                }
              };
            }
            return {
              ...item,
              render: (text) => {
                return <span className="ellipsis" title={text}>{text}</span>;
              }
            };
          })
        });
      }
    });
  };
  getDeclareInfo = () => {
    API.getDeclareInfo({ taxDeclarationId: getQueryString("id") }).then(({ status, data: declareInfo }) => {
      if (status) this.setState({ declareInfo });
    });
  };
  // 导出
  handleExport = () => {
    const url = `${window.location.origin}/api/bs/hrmsalary/taxdeclaration/export?taxDeclarationId=${getQueryString("id")}`;
    window.open(url, "_self");
  };

  render() {
    const { declareInfo, loading, pageInfo, columns, dataSource } = this.state;
    const { taxAgentStore: { showOperateBtn } } = this.props;

    const renderRightOperation = () => {
      return (
        <div style={{ display: "inline-block" }}>
          <Button type="primary" onClick={this.handleExport}>导出</Button>
        </div>
      );
    };
    const renderLeftOperation = () => {
      return (
        <div style={{ display: "inline-block", lineHeight: "47px" }}>
          <span>薪资所属月：{declareInfo.salaryMonth}</span>
          <span style={{ marginLeft: "10px" }}>个税扣缴义务人：{declareInfo.taxAgentName}</span>
        </div>
      );
    };
    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.getDetailList());
      },
      onChange: (current) => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.getDetailList());
      }
    };
    return (
      <div className="generateDeclarationDetail">
        <CustomTab
          searchOperationItem={showOperateBtn && renderRightOperation()}
          leftOperation={renderLeftOperation()}
        />
        <div className="tableWrapper">
          <UnifiedTable
            rowKey="id"
            columns={columns}
            dataSource={dataSource}
            pagination={pagination}
            loading={loading}
            xWidth={columns.length * 120}
          />
        </div>
      </div>
    );
  }
}