/*
 * Author: 黎永顺
 * name: 个税在线申报-银行端缴款凭证打印查看页面
 * Description:
 * Date: 2023/8/24
 */
import React, { Component } from "react";
import { Button, message, Spin } from "antd";
import { WeaLocaleProvider } from "ecCom";
import { printDom } from "../../util";
import { getQueryString } from "../../util/url";
import { taxPaymentVoucherPrintFeedback } from "../../apis/declare";
import "./index.less";

const { getLabel } = WeaLocaleProvider;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      bankVoucherDetail: {}
    };
  }

  componentDidMount() {
    this.taxPaymentVoucherPrintFeedback();
  }

  taxPaymentVoucherPrintFeedback = () => {
    const payload = {
      taxDeclareRecordId: getQueryString("taxDeclareRecordId"),
      taxAgentId: getQueryString("taxAgentId"),
      taxYearMonth: getQueryString("taxYearMonth"),
      checkFeedback: 0
    };
    this.setState({ loading: true });
    taxPaymentVoucherPrintFeedback(payload).then(({ status, data, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        this.setState({ bankVoucherDetail: data });
      } else {
        message.error(errormsg || "");
      }
    }).catch(() => this.setState({ loading: false }));
  };
  print = () => {
    printDom({
      hideDomId: "header_print_btn"
    });
  };

  render() {
    const { loading, bankVoucherDetail } = this.state;
    if (loading) {
      return <div className="loading-layout">
        <Spin spinning={loading}/>
      </div>;
    }
    return (
      <div className="printBankLayout">
        <div className="print-bank-voucher-container">
          <div id="header_print_btn">
            <Button type="primary" onClick={this.print}>{getLabel(111, "打印")}</Button>
          </div>
          <div className="content">
            <div id="bank_voucher_detail_area" style={{
              display: "flex",
              flexDirection: "column",
              width: "1000px"
            }}>
              <div style={{
                "height": " calc(36 * 1px)",
                "fontSize": "calc(20 * 1px)",
                "textAlign": "center",
                "lineHeight": " calc(32 * 1px)",
                "fontWeight": "900"
              }}>{getLabel(111, "银行端查询缴税凭证")}</div>
              <div style={{
                height: "calc(28 * 1px)",
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between"
              }}>
                <div style={{ display: "flex" }}>
                  <div className="label">{getLabel(111, "银行端查询缴税凭证号：")}</div>
                  <div className="value">{bankVoucherDetail.voucherNo || ""}</div>
                </div>
                <div className="time">{bankVoucherDetail.firstPrintDate}</div>
              </div>

              <div style={{
                borderLeft: "calc(2 * 1px) solid #999",
                borderRight: "calc(2 * 1px) solid #999"
              }}>
                <div style={{
                  width: "100%",
                  minHeight: "calc(50 * 1px)",
                  display: "flex",
                  alignItems: "center",
                  flexGrow: "0",
                  flexShrink: "0",
                  borderTop: "calc(2 * 1px) solid #999"
                }}>
                  <div style={{
                    width: "50%",
                    alignSelf: "stretch",
                    display: "flex",
                    alignItems: "center"
                  }}>
                    <div className="label" style={{
                      height: "100%",
                      padding: "calc(16 * 1px)",
                      flexBasis: "40%",
                      display: "flex",
                      alignItems: "center",
                      borderRight: "calc(2 * 1px) solid #999",
                      flexShrink: "0",
                      flexGrow: "0"
                    }}>{getLabel(111, "纳税人识别码")}</div>
                    <div className="value" style={{
                      flexBasis: "60%",
                      flexShrink: "0",
                      flexGrow: "0",
                      padding: "calc(16 * 1px)"
                    }}>{bankVoucherDetail.taxCode || ""}</div>
                  </div>
                  <div style={{
                    width: "50%",
                    alignSelf: "stretch",
                    display: "flex",
                    alignItems: "center"
                  }}>
                    <div className="label" style={{
                      height: "100%",
                      padding: "calc(16 * 1px)",
                      borderLeft: "calc(2 * 1px) solid  #999",
                      flexBasis: "40%",
                      display: "flex",
                      alignItems: "center",
                      borderRight: "calc(2 * 1px) solid #999",
                      flexShrink: "0",
                      flexGrow: "0"
                    }}>{getLabel(111, "税务机关代码")}</div>
                    <div className="value" style={{
                      width: "50%",
                      alignSelf: "stretch",
                      display: "flex",
                      alignItems: "center",
                      padding: "calc(16 * 1px)"
                    }}>{bankVoucherDetail.taxAuthoritiesNo || ""}</div>
                  </div>
                </div>

                <div style={{
                  width: "100%",
                  minHeight: "calc(50 * 1px)",
                  display: "flex",
                  alignItems: "center",
                  flexGrow: "0",
                  flexShrink: "0",
                  borderTop: "calc(2 * 1px) solid #999"
                }}>
                  <div style={{
                    width: "50%",
                    alignSelf: "stretch",
                    display: "flex",
                    alignItems: "center"
                  }}>
                    <div className="label" style={{
                      height: "100%",
                      padding: "calc(16 * 1px)",
                      flexBasis: "40%",
                      display: "flex",
                      alignItems: "center",
                      borderRight: "calc(2 * 1px) solid #999",
                      flexShrink: "0",
                      flexGrow: "0"
                    }}>{getLabel(111, "纳税人名称")}</div>
                    <div className="value" style={{
                      flexBasis: "60%",
                      flexShrink: "0",
                      flexGrow: "0",
                      padding: "calc(16 * 1px)"
                    }}>{bankVoucherDetail.taxAgentName || ""}</div>
                  </div>
                  <div style={{
                    width: "50%",
                    alignSelf: "stretch",
                    display: "flex",
                    alignItems: "center"
                  }}>
                    <div className="label" style={{
                      height: "100%",
                      padding: "calc(16 * 1px)",
                      borderLeft: "calc(2 * 1px) solid  #999",
                      flexBasis: "40%",
                      display: "flex",
                      alignItems: "center",
                      borderRight: "calc(2 * 1px) solid #999",
                      flexShrink: "0",
                      flexGrow: "0"
                    }}>{getLabel(111, "税务机关名称")}</div>
                    <div className="value" style={{
                      width: "50%",
                      alignSelf: "stretch",
                      display: "flex",
                      alignItems: "center",
                      padding: "calc(16 * 1px)"
                    }}>{bankVoucherDetail.taxAuthoritiesName}</div>
                  </div>
                </div>

                <div style={{
                  width: "100%",
                  minHeight: "calc(50 * 1px)",
                  display: "flex",
                  alignItems: "center",
                  flexGrow: "0",
                  flexShrink: "0",
                  borderTop: "calc(2 * 1px) solid #999"
                }}>
                  <div style={{
                    width: "50%",
                    alignSelf: "stretch",
                    display: "flex",
                    alignItems: "center"
                  }}>
                    <div className="label" style={{
                      height: "100%",
                      padding: "calc(16 * 1px)",
                      flexBasis: "40%",
                      display: "flex",
                      alignItems: "center",
                      borderRight: "calc(2 * 1px) solid #999",
                      flexShrink: "0",
                      flexGrow: "0"
                    }}>{getLabel(111, "付款人名称")}</div>
                    <div className="value" style={{
                      flexBasis: "60%",
                      flexShrink: "0",
                      flexGrow: "0",
                      padding: "calc(16 * 1px)"
                    }}>{}</div>
                  </div>
                  <div style={{
                    width: "50%",
                    alignSelf: "stretch",
                    display: "flex",
                    alignItems: "center"
                  }}>
                    <div className="label" style={{
                      height: "100%",
                      padding: "calc(16 * 1px)",
                      borderLeft: "calc(2 * 1px) solid  #999",
                      flexBasis: "40%",
                      display: "flex",
                      alignItems: "center",
                      borderRight: "calc(2 * 1px) solid #999",
                      flexShrink: "0",
                      flexGrow: "0"
                    }}>{getLabel(111, "开户银行名称")}</div>
                    <div className="value" style={{
                      width: "50%",
                      alignSelf: "stretch",
                      display: "flex",
                      alignItems: "center",
                      padding: "calc(16 * 1px)"
                    }}>{}</div>
                  </div>
                </div>

                <div style={{
                  width: "100%",
                  minHeight: "calc(50 * 1px)",
                  display: "flex",
                  alignItems: "center",
                  flexGrow: "0",
                  flexShrink: "0",
                  borderTop: "calc(2 * 1px) solid #999"
                }}>
                  <div style={{
                    width: "50%",
                    alignSelf: "stretch",
                    display: "flex",
                    alignItems: "center"
                  }}>
                    <div className="label" style={{
                      height: "100%",
                      padding: "calc(16 * 1px)",
                      flexBasis: "40%",
                      display: "flex",
                      alignItems: "center",
                      borderRight: "calc(2 * 1px) solid #999",
                      flexShrink: "0",
                      flexGrow: "0"
                    }}>{getLabel(111, "付款人账号")}</div>
                    <div className="value" style={{
                      flexBasis: "60%",
                      flexShrink: "0",
                      flexGrow: "0",
                      padding: "calc(16 * 1px)"
                    }}>{}</div>
                  </div>
                  <div style={{
                    width: "50%",
                    alignSelf: "stretch",
                    display: "flex",
                    alignItems: "center"
                  }}>
                    <div className="label" style={{
                      height: "100%",
                      padding: "calc(16 * 1px)",
                      borderLeft: "calc(2 * 1px) solid  #999",
                      flexBasis: "40%",
                      display: "flex",
                      alignItems: "center",
                      borderRight: "calc(2 * 1px) solid #999",
                      flexShrink: "0",
                      flexGrow: "0"
                    }}>{getLabel(111, "税款限缴日期")}</div>
                    <div className="value" style={{
                      width: "50%",
                      alignSelf: "stretch",
                      display: "flex",
                      alignItems: "center",
                      padding: "calc(16 * 1px)"
                    }}>{bankVoucherDetail.deadline || ""}</div>
                  </div>
                </div>

                <div className="table" style={{
                  display: "flex",
                  flexDirection: "column",
                  borderBottom: "calc(2 * 1px) solid #999",
                  width: "100%"
                }}>
                  <div className="thead" style={{
                    borderTop: "calc(2 * 1px) solid #999",
                    display: "flex",
                    width: "100%",
                    justifyContent: "space-between"
                  }}>
                    <div style={{
                      width: "calc(100%/ 3)",
                      padding: "calc(16 * 1px)",
                      minHeight: "calc(50 * 1px)",
                      display: "flex",
                      alignItems: "center",
                      flexGrow: "0",
                      flexShrink: "0"
                    }}>{getLabel(111, "征收顶目名称")}</div>
                    <div style={{
                      width: "calc(100%/ 3)",
                      padding: "calc(16 * 1px)",
                      minHeight: "calc(50 * 1px)",
                      display: "flex",
                      alignItems: "center",
                      borderLeft: "calc(2 * 1px) solid  #999",
                      flexGrow: "0",
                      flexShrink: "0"
                    }}>{getLabel(111, "征收品目名称")}</div>
                    <div style={{
                      width: "calc(100%/ 3)",
                      padding: "calc(16 * 1px)",
                      minHeight: "calc(50 * 1px)",
                      display: "flex",
                      alignItems: "center",
                      borderLeft: "calc(2 * 1px) solid  #999",
                      flexGrow: "0",
                      flexShrink: "0"
                    }}>{getLabel(111, "应繳税额")}</div>
                  </div>
                  <div className="tbody" style={{
                    display: "flex",
                    flexDirection: "column",
                    width: "100%"
                  }}>
                    {
                      !_.isEmpty(bankVoucherDetail.details) ? bankVoucherDetail.details.map((row, index) => (
                        <div className="tr" key={index} style={{
                          display: "flex",
                          borderTop: " calc(2 * 1px) solid #999",
                          justifyContent: "space-between"
                        }}>
                          <div style={{
                            width: "calc(100%/ 3)",
                            padding: "calc(16 * 1px)",
                            minHeight: " calc(50 * 1px)",
                            display: "flex",
                            alignItems: "center",
                            flexGrow: "0",
                            flexShrink: "0"
                          }}>{row.paymentCode}</div>
                          <div style={{
                            width: "calc(100%/ 3)",
                            padding: "calc(16 * 1px)",
                            minHeight: " calc(50 * 1px)",
                            display: "flex",
                            alignItems: "center",
                            borderLeft: "calc(2 * 1px) solid #999",
                            flexGrow: "0",
                            flexShrink: "0"
                          }}>{row.paymentItem}</div>
                          <div style={{
                            width: "calc(100%/ 3)",
                            padding: "calc(16 * 1px)",
                            minHeight: " calc(50 * 1px)",
                            display: "flex",
                            alignItems: "center",
                            borderLeft: "calc(2 * 1px) solid #999",
                            flexGrow: "0",
                            flexShrink: "0"
                          }}>{row.payAmount}</div>
                        </div>
                      )) : null
                    }
                  </div>
                </div>
                <div style={{
                  minHeight: "calc(50 * 1px)",
                  display: "flex",
                  alignItems: "center",
                  padding: "calc(16 * 1px)",
                  borderBottom: "calc(2 * 1px) solid #999"
                }}>{getLabel(111, "金额合计（小写）：")} {bankVoucherDetail.lowerFormatAmount}</div>
                <div style={{
                  minHeight: "calc(50 * 1px)",
                  display: "flex",
                  alignItems: "center",
                  padding: "calc(16 * 1px)",
                  borderBottom: "calc(2 * 1px) solid #999"
                }}>{getLabel(111, "金额合计（大写）：")} {bankVoucherDetail.upperFormatAmount}</div>

                <div className="signet" style={{
                  minHeight: "calc(140 * 1px)",
                  width: "100%",
                  display: "flex",
                  alignItems: "center",
                  borderBottom: " calc(2 * 1px) solid #999",
                  justifyContent: "space-between"
                }}>
                  <div className="item one" style={{
                    alignSelf: "stretch",
                    width: "calc(100%/ 3)",
                    display: "flex",
                    alignItems: "flex-start",
                    justifyContent: "center",
                    flexDirection: "column",
                    padding: "calc(16 * 1px)"

                  }}>
                    <div className="drawee" style={{
                      marginBottom: "calc(16 * 1px)"
                    }}>{getLabel(111, "付款人 （签章）")}</div>
                    <div className="operator">{getLabel(111, "经办人 （签章）")}</div>
                  </div>
                  <div style={{
                    alignSelf: "stretch",
                    borderLeft: "calc(2 * 1px) solid #999",
                    width: "calc(100%/ 3)",
                    display: "flex",
                    alignItems: "flex-start",
                    justifyContent: "center",
                    flexDirection: "column",
                    padding: "calc(16 * 1px)"
                  }}>
                    <div>{getLabel(111, "银行记账员")}</div>
                    <div> {getLabel(111, "（签章）")}</div>
                  </div>
                  <div style={{
                    alignSelf: "stretch",
                    borderLeft: "calc(2 * 1px) solid #999",
                    width: "calc(100%/ 3)",
                    display: "flex",
                    alignItems: "flex-start",
                    justifyContent: "center",
                    flexDirection: "column",
                    padding: "calc(16 * 1px)"
                  }}>
                    <div>{getLabel(111, "备注：")}</div>
                    <div> {bankVoucherDetail.remark}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Index;
