/*
 * Author: 黎永顺
 * name: 在线申报-个税开具证明查看页面
 * Description:
 * Date: 2023/8/23
 */
import React, { Component } from "react";
import { Icon, Menu, message, Spin } from "antd";
import { WeaLocaleProvider } from "ecCom";
import { getQueryString } from "../../util/url";
import { taxPaymentWithheldVoucherGet } from "../../apis/declare";
import "./index.less";

const { getLabel } = WeaLocaleProvider;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false, current: "",
      enterprisePayCertifiTipMsg: "",
      dataSource: []
    };
  }

  componentDidMount() {
    this.getEnterprisePayCertificate();
  }

  getEnterprisePayCertificate = () => {
    const payload = {
      taxDeclareRecordId: getQueryString("taxDeclareRecordId"),
      taxAgentId: getQueryString("taxAgentId"),
      taxYearMonth: getQueryString("taxYearMonth"),
      reportType: getQueryString("reportType")
    };
    this.setState({ loading: true });
    taxPaymentWithheldVoucherGet(payload).then(({ status, data, errormsg }) => {
      this.setState({ loading: false });
      if (status && !_.isEmpty(data.vouchers)) {
        this.setState({
          dataSource: data.vouchers,
          enterprisePayCertifiTipMsg: data.msg || "",
          current: _.head(data.vouchers).name
        });
      } else {
        message.error(errormsg || "");
      }
    }).catch(() => this.setState({ loading: false }));
  };

  render() {
    const { dataSource, loading, enterprisePayCertifiTipMsg, current } = this.state;
    if (loading) {
      return <div className="loading-layout">
        <Spin spinning={loading} tip={getLabel(111, "获取企业完税证明中...")}/>
      </div>;
    }
    if (_.isEmpty(dataSource)) {
      return <div className="pay-certification-detail empty">
        <p className="iconEmpty"><Icon type="inbox"/></p>
        <p className="empty-title">{getLabel(83553, "暂无数据")}</p>
        <p
          className="empty-subTitle">{enterprisePayCertifiTipMsg || getLabel(111, "暂无企业完税证明相关信息")}</p>
      </div>;
    }
    return (
      <div className="pay-certification-detail">
        <div className="left">
          <Menu selectedKeys={[current]} mode="inline" onClick={({ key: current }) => this.setState({ current })}>
            {
              _.map(dataSource, item => {
                return <Menu.Item key={item.name}>{item.name}</Menu.Item>;
              })
            }
          </Menu>
        </div>
        <div className="right">
          <iframe src={`data:application/pdf;base64,${_.find(dataSource, it => it.name === current).content}`}
                  style={{ border: 0, width: "100%", height: "100%" }}/>
        </div>
      </div>
    );
  }
}

export default Index;
