import styled from 'styled-components';
const InvoiceTmpDiv = styled.div`
  font-size: 12px;
  width: 1120px;
  .title {
    font-size: 26px;
    color: #b16363;
    text-align: center;
    line-height: 56px;
    padding-top: 0;
  }
  .extra {
    color: #b15b16;
    .content {
      color: #181818;
    }
  }
  .height84 {
    height: 110px;
  }
  .row {
    border: 2px solid #b16363;
    border-bottom: none;
    color: #b15b16;
    .content {
      color: #181818;
    }
  }
  .last-row {
    .content {
      color: #181818;
    }
    color: #b15b16;
    border-top: 2px solid #b16363;
  }
  .label {
    width: 78px;
    display: inline-block;
    text-align-last: justify;
    text-align: justify;
  }
  .longLabel {
    width: 178px;
    display: inline-block;
    text-align-last: justify;
    text-align: justify;
  }
  .title-label {
    width: 52px;
  }
`;
const Row = styled.div`
  .col_1 {
    width: 2.65%;
    borderleft: none;
  }
  .col_4 {
    width: 3.75%;
  }
  .col_9 {
    width: 7.4%;
  }
  .col_2 {
    width: 8.33%;
  }
  .col_3 {
    width: 12.5%;
  }
  .col_5 {
    width: 20.83%;
  }
  .col_6 {
    width: 42.5%;
  }
  .col_7 {
    width: 29.16%;
  }
  .col_8 {
    width: 33.33%;
  }
  .col_14 {
    width: 58.33%;
  }
  .col_15 {
    width: 42.5%;
  }
  .col_17 {
    width: 70.83%;
  }
  .col_18 {
    width: 100%;
  }
  .col_24 {
    width: 100%;
  }
`;
const Col = styled.span`
  display: inline-block;
  padding: 8px;
  box-sizing: border-box;
  vertical-align: middle;
  border-left: 2px solid #b16363;
  height: 100%;
  &.no-border {
    border-left: none;
  }
  .text-center {
    text-align: center;
    border-left: none;
    border-right: none;
  }
  &.transparent-border {
    border-left: 2px solid rgba(0, 0, 0, 0);
  }
  &.invoice-number {
    border-left: none;
    color: #b16363;
    padding: 0 0 0 800px;
    font-size: 14px;
  }
`;
const UnderLine = styled.div`
  border: 2px solid #b16363;
  width: 325px;
  height: 8px;
  margin: -1% 0 2% 35%;
  border-left: none;
  border-right: none;
`;
const InvoiceInfo = styled.span`
  color: black;
`;
const TitleDescription = styled.div`
  margin-top: 4.2%;
`;
const ProjectContainer = styled.div`
  width: 100%;
  height: 160px;
  border-top: 2px solid #b16363;
  border-right: 2px solid #b16363;
  border-left: 2px solid #b16363;
  overflow: auto;
  .single-project {
    width: 100%;
    height: 30px;
  }
`;
export default ({ data }) => {
  return (
    <div>
      <InvoiceTmpDiv>
        <Row>
          <Col className="col_18 invoice-number">
            发票号码：<InvoiceInfo>{data.invoiceNumber}</InvoiceInfo>
          </Col>
          <Col className="title col_18 no-border">
            电子发票（
            {data.type === 'SPECIAL_TICKET' ? '增值税专用发票' : '普通发票'}）
          </Col>
          <UnderLine className="UnderLine">
            <div></div>
          </UnderLine>
        </Row>
        <Row className="row height84">
          <Col className="col_1 no-border">购买方信息</Col>
          <Col className="col_15">
            <TitleDescription>
              <span className="label">名称</span>：
              <span className="content">{data.partyAName}</span>
            </TitleDescription>
            <TitleDescription>
              <span className="longLabel">统一社会信用代码/纳税人识别号</span>：
              <span className="content">{data.partyATaxid}</span>
            </TitleDescription>
          </Col>
          <Col className="col_1">销售方信息</Col>
          <Col className="col_6">
            <TitleDescription>
              <span className="label">名称</span>：
              <span className="content">{data.partyBName}</span>
            </TitleDescription>
            <TitleDescription>
              <span className="longLabel">统一社会信用代码/纳税人识别号</span>：
              <span className="content">{data.partyBTaxid}</span>
            </TitleDescription>
          </Col>
        </Row>
        <Row className="row">
          <Col className="col_7 no-border">
            <div className="text-center">项目名称</div>
          </Col>
          <Col className="col_5">
            <div className="text-center">规格型号</div>
          </Col>
          <Col className="">
            <div className="text-center">单位</div>
          </Col>
          <Col className="col_2">
            <div className="text-center">数量</div>
          </Col>
          <Col className="col_2">
            <div className="text-center">单价</div>
          </Col>
          <Col className="col_2">
            <div className="text-center">金额</div>
          </Col>
          <Col className="">
            <div className="text-center">税率/征收率</div>
          </Col>
          <Col className="col_2">
            <div className="text-center">税额</div>
          </Col>
        </Row>
        <Row>
          <ProjectContainer>
            {data &&
              data.invoiceDetails?.map((item) => {
                const {
                  taxPrice,
                  totalPrice,
                  specification,
                  projectName,
                  quantity,
                  price,
                  taxRate,
                  unit,
                } = item;
                return (
                  <div className="single-project" key={item.id}>
                    <Col
                      className="col_7 transparent-border"
                      key={'projectName'}
                    >
                      <div className="text-center">{projectName}</div>
                    </Col>
                    <Col
                      className="col_5 transparent-border"
                      key={'specification'}
                    >
                      <div className="text-center">{specification}</div>
                    </Col>
                    <Col className=" transparent-border" key={'unit'}>
                      <div className="text-center">{unit}</div>
                    </Col>
                    <Col className="col_2 transparent-border" key={'quantity'}>
                      <div className="text-center">{quantity}</div>
                    </Col>
                    <Col className="col_2 transparent-border" key={'price'}>
                      <div className="text-center">{price}</div>
                    </Col>
                    <Col
                      className="col_2 transparent-border"
                      key={'totalPrice'}
                    >
                      <div className="text-center">{totalPrice}</div>
                    </Col>
                    <Col className=" transparent-border" key={'taxRate'}>
                      <div className="text-center">{taxRate}</div>
                    </Col>
                    <Col className="col_2 transparent-border" key={'taxPrice'}>
                      <div className="text-center">{taxPrice}</div>
                    </Col>
                  </div>
                );
              })}
          </ProjectContainer>
        </Row>
        <Row className="row">
          <Col className="col_15 no-border">
            价税合计（大写）
            <InvoiceInfo>{data.totalPriceText}</InvoiceInfo>
          </Col>
          <Col className="no-border">
            （小写）<InvoiceInfo>￥{data.totalPrice}</InvoiceInfo>
          </Col>
        </Row>
        <Row className="row height84">
          <Col className="col_1 no-border">备注</Col>
          <Col className="col_7">
            <InvoiceInfo>{data.comment}</InvoiceInfo>
          </Col>
        </Row>
        <Row className="last-row">
          <Col className="col_6 no-border">
            开票人：<InvoiceInfo>{data.invoicingPerson}</InvoiceInfo>
          </Col>
        </Row>
      </InvoiceTmpDiv>
    </div>
  );
};