Untitled

import React, { Component }  from 'react';
import { Document, PDFViewer } from '@react-pdf/renderer';
import { Body } from './react-pdf/styles/styles.js';
import { compose } from "redux";
import { connect } from "react-redux";

import Acusederecibo from './react-pdf/Acusederecibo'
import Header from './react-pdf/Header'
import Footer from './react-pdf/Footer'
import Table from './react-pdf/Table'
import Totales from './react-pdf/Totales'
import Referencias from './react-pdf/Referencias'
import image from './react-pdf/assets/logo2.jpg';
/* import Tablelicor from './react-pdf/Tablelicor' */

import { fetchDetails } from "../actions/showdocuments_actions";


class FacturaGeneral extends Component {

  _isMounted = false;

  state = {
    isLoading: true
  }

    componentDidMount() {
    this._isMounted = true;
    this.props.dispatch(fetchDetails())
    if (this._isMounted) {
      this.setState({isLoading: false})
    }
  }
  render() {
    const { previewPDF, typeDTE, details, ted } = this.props;
    console.log(details);
    const loading = this.state.isLoading;
    const companydata = {
      nombre: 'REPUESTOS ZENTENO Y COMPANIA LIMITADA',
      detalles: 'MANTENIMIENTO Y REPARACIÓN DE VEHÍCULOS AUTOMOTORES VENTA DE PARTES, PIEZAS Y ACCESORIOS DE VEHÍCULOS AUTOMOTORES VENTA AL POR MENOR DE OTROS PRODUCTOS EN PEQUENOS ALMACENES NO ESPECIALIZADO',
      direccion: 'CASA MATRIZ: AV.FREIRE 511 - Curico / E-MAIL: repzenteno@hotmail.com / TELÉFONO: 752314987'
    }
    const timbredata = {
      rut: '78.305.030-7',
      numfactura: '37535',
      facturadate: '26 de agosto de 2018',
      sii: 'CURICÓ'
    }
    const receptordata = {
      nombre: 'COMERCIAL Y AUTOMOTRIZ ABRICAS LIMITADA',
      rut: '76.758.902-6',
      giro: 'TALLER MECÁNICO',
      direccion: 'VIDAL 302',
      comuna: 'Curico',
      ciudad: 'Curico',
      contacto: 'CONTACTO',
      telefono: 'TELEFONO',
      formapago:'FORMA DE PAGO'
    }
    const referenciasdata = {
      tipodoc: 'tipodoc',
      folio: 'folio',
      fechaemision: 'fechaemision',
      motivo: 'motivo',
      otros: 'otros'
    }
    const productosdata = [{
      codigo: 'codigo',
      descripcion: 'descripcion',
      cantidad: 'cantidad',
      precio: 'precio',
      adicional: 'adicional',
      descuento: 'descuento',
      valor: 'valor',
      bruto: 'bruto',
    },
    {
      codigo: 'codigo2',
      descripcion: 'descripcion',
      cantidad: 'cantidad',
      precio: 'precio',
      adicional: 'adicional',
      descuento: 'descuento',
      valor: 'valor',
      bruto: 'bruto',
    }]
    const totalesdata = {
      neto: '6597',
      iva: '1655',
      total: '5484',
      adicionales: '6595',
      impuesto20: '6624',
      impuesto18:'656',
      impuesto31: '6565'
    }
    const codedata = {
      codigo: 'codigo'
    }
    return (
      <React.Fragment>
        {loading ? <div>Loading..</div>:
        <PDFViewer className="w-100" style={{height: '93%'}}>
        <Document>
          <Body wrap>
              <Header logo={image} companydata={companydata} timbredata={timbredata} receptordata={receptordata} />
              <Referencias referenciasdata={referenciasdata} />
              <Table productosdata={productosdata}/>
              <Totales totalesdata={totalesdata} codedata={codedata} />
              <Acusederecibo/>
              <Footer/>
          </Body>
        </Document>
        </PDFViewer>
        }
      </React.Fragment>
    );
  }
}
function mapStateToProps(state, ownProps) {
  return {
    previewPDF: state.fmManagerShowDocuments.previewPDF,
    xmlDownload: state.fmManagerReceipDocuments.xmlDownload,
    showDocuments: state.fmManagerShowDocuments.showDocuments,
    typeDTE: state.fmManagerShowDocuments.typeDTE,
    details: state.fmManagerShowDocuments.details,
    ted: state.fmManagerShowDocuments.ted
  };
}
export default compose(connect(mapStateToProps))(FacturaGeneral);