/*
 * Creator:     ML
 * CreatDate:   2019-09-12
 * descripts：  门诊医生医嘱录入 导诊单打印
*/
import React from 'react';
import { Row, Col, Divider, Button, Table, Card, Form } from 'antd';
import { $http } from 'containers/config/https';
import AcBarcode from 'ac-barcode';
import QRCode from 'qrcode.react';
import store from '../../../store';
import { Util } from 'tools/index';
import { $loadTemplate } from '../../lodop/Common/Print.js';
import "../style/SummaryPrinting.less"

const FormItem = Form.Item;
const formItemLayout = { // label 和input宽度
  labelCol: { span: 8 },
  wrapperCol: { span: 14 },
}
const formItemLayoutLoc = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 },
}
const formItemLayoutDate = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
}
const formItemLayoutType = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
}

const PrintingGuidanceSheet = Form.create()(
  class PrintingGuidanceSheet extends React.Component {
    constructor(porps) {
      super(porps);
      this.state = {
        params: {},
        drugsData: [],
        testData: [],
        inspectData: [],
        otherData: [],
        info: {},
        labCheckOtherInfo: []
      }
    }

    componentDidMount = () => {
      this.getPrintOrder()
    }

    //获取导诊单
    getPrintOrder = () => {
      let data = {
        params: [{
          admID: sessionStorage.patientData ? JSON.parse(sessionStorage.patientData).admID : "",
          // admID:48,
        }]
      }
      $http.post('urlS', this, {
        code: '03050126',
        data: data,
        success: function (res) {
          if (+res.errorCode === 0) {
            this.setState({
              info: res.result,
              params: res.result.patInfo,
              drugsData: res.result.medInfo.data,
              // testData: res.result.labCheckOtherInfo[0].data,
              // inspectData: res.result.labCheckOtherInfo[1].data,
              // otherData: res.result.labCheckOtherInfo[2].data,
              // materialData: res.result.labCheckOtherInfo[3].data,
              // testDec: res.result.labCheckOtherInfo[0].ordCatDesc,
              // insDec: res.result.labCheckOtherInfo[1].ordCatDesc,
              // othDec: res.result.labCheckOtherInfo[2].ordCatDesc,
              // materDec: res.result.labCheckOtherInfo[3].ordCatDesc,
              /**
              * @ByShizi: 导诊单预览优化
              * Create  ：2022-08-18
              * */
              labCheckOtherInfo: res.result?.labCheckOtherInfo || []
            })
          }
        }
      })
    }

    //打印导诊单
    handlePrinting = () => {
      let data = {
        params: [{
          admID: sessionStorage.patientData ? JSON.parse(sessionStorage.patientData).admID : "",
          userID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
          hospID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).hospID : "",
          groupID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).groupID : "",
        }]
      }
      $http.post('urlS', this, {
        code: '03050127',
        data: data,
        success: function (res) {
          if (+res.errorCode === 0) {
            if (res.result && res.result.length > 0) {
              res.result.map((item, i) => {
                $loadTemplate(item.template, item.printStr);
              })
            }

          }
        }
      })
    }

    //国际化
    setMessage(name, message) {
      return this.props.localeProvider ? this.props.localeProvider[name][message] : ''
    }

    render() {
      const { getFieldDecorator } = this.props.form;
      const { params, info, labCheckOtherInfo } = this.state
      let tabsHeight = store.getState().tableHeight.y + 154 + 'px'
      //项目明细
      const Columns = [
        {
          align: "center",
          title: '项目名称',
          dataIndex: 'ordDesc',
          key: '1',
          width: 280,
        },
        // {
        //   align: "center",
        //   width: 100,
        //   title: '就诊科室',
        //   dataIndex: 'ordRecLoc',
        //   key: '2',
        // }, 
        {
          align: "center",
          width: 140,
          title: '单价',
          dataIndex: 'ordAmt',
          key: '3',
        },
      ];
      const drugsColumns = [
        {
          align: "center",
          title: '名称',
          dataIndex: 'recLoc',
          key: '1',
          width: 280,
        },
        // {
        //   align: "center",
        //   width: 100,
        //   title: '数量',
        //   dataIndex: 'count',
        //   key: '2',
        // }, 
        {
          align: "center",
          width: 140,
          title: '单价',
          dataIndex: 'ordAmt',
          key: '3',
        },
      ]
      return (
        <div className="printingGuidance-Dom">
          <div className="printingDom" style={{ position: 'relative', }}>
            <Button style={{ position: 'absolute', right: '266px', top: '12px', zIndex: '5' }} type="primary" onClick={this.handlePrinting}>{this.handlePrit}{this.props.localeProvider && this.props.localeProvider.PrintButtonPrint ? this.setMessage('PrintButtonPrint', 'descripts') : "打印"}</Button>
            <Card style={{ height: tabsHeight, overflow: 'auto' }}>
              <Card>
                <div style={{ padding: '12px 24px', boxSizing: 'border-box', position: 'relative' }}>
                  <div style={{ position: 'absolute', left: '10px', top: '10px', zIndex: '9' }}>
                    <AcBarcode value={params.patNo} width={1.2 - ((20 - 10) / 20)} height={30} fontSize={10} margin={3} />
                  </div>
                  <div className="bigTitle" style={{ textAlign: 'center', paddingBottom: '14px' }}>
                    {params.hospDesc && params.hospDesc ? params.hospDesc : '--'}
                  </div>
                  {info && 'payQrCode' in info && info.payQrCode ? (
                    <div style={{ position: 'absolute', top: '12px', right: '10px', zIndex: '9', textAlign: 'center' }}>
                      <QRCode
                        renderAs="svg"
                        level="Q"
                        value={info.payQrCode}
                        size={86}
                        fgColor="#000000"
                      />
                      <div style={{ fontWeight: 'normal', fontSize: '12px', color: '#999', marginTop: '-4px' }}>微信扫码 快捷缴费</div>
                    </div>
                  ) : ''}
                </div>
                <Row style={{ margin: "0" }}>
                  <Col span={10}>
                    <FormItem label={this.props.localeProvider && this.props.localeProvider.PrintName ? this.setMessage('PrintName', 'descripts') : "姓名"} {...formItemLayoutDate}>
                      {getFieldDecorator("name", {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <span>{params.patName && params.patName ? params.patName : "--"}</span>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={4} >
                    <FormItem label={this.props.localeProvider && this.props.localeProvider.PrintGender ? this.setMessage('PrintGender', 'descripts') : "性别"} {...formItemLayout}>
                      {getFieldDecorator("sex", {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <span>{params.patSex && params.patSex ? params.patSex : "--"}</span>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={4}>
                    <FormItem label={this.props.localeProvider && this.props.localeProvider.PrintAge ? this.setMessage('PrintAge', 'descripts') : "年龄"} {...formItemLayout} >
                      {getFieldDecorator("age", {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <span>{params.patAge && params.patAge ? params.patAge : "--"}</span>
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row style={{ margin: "0" }}>
                  <Col span={10}>
                    <FormItem label={this.props.localeProvider && this.props.localeProvider.PrintBranch ? this.setMessage('PrintBranch', 'descripts') : "科别"} {...formItemLayoutDate}>
                      {getFieldDecorator('loc', {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <span>{params.patLoc && params.patLoc ? params.patLoc : "--"}</span>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={10} >
                    <FormItem label={this.props.localeProvider && this.props.localeProvider.PrintClinicNumber ? this.setMessage('PrintClinicNumber', 'descripts') : "门诊号"} {...formItemLayoutType} style={{ wordBreak: "break-word" }}>
                      {getFieldDecorator("hopNo", {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <span>{params.patAdmNo && params.patAdmNo ? params.patAdmNo : "--"}</span>
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row style={{ margin: "0" }}>
                  <Col span={10}>
                    <FormItem label={this.props.localeProvider && this.props.localeProvider.PrintRegisteredDate ? this.setMessage('PrintRegisteredDate', 'descripts') : "挂号日期"} {...formItemLayoutDate}>
                      {getFieldDecorator('dataForm', {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <span>{params.patAdmDate && params.patAdmDate ? params.patAdmDate : "--"}</span>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={10}>
                    <FormItem label={this.props.localeProvider && this.props.localeProvider.PrintFabe ? this.setMessage('PrintFabe', 'descripts') : "费别"} {...formItemLayoutType}>
                      {getFieldDecorator("payType", {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <span>{params.patAdmReason && params.patAdmReason ? params.patAdmReason : "--"}</span>
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Divider />
                <Row gutter={60} style={{ margin: "0" }}>
                  <Col span={18}>
                    <FormItem label={this.props.localeProvider && this.props.localeProvider.PrintDiagnosis ? this.setMessage('PrintDiagnosis', 'descripts') : "诊断"} {...formItemLayoutLoc}>
                      {getFieldDecorator('log', {
                        initialValue: undefined,
                        rules: [{ required: false, message: '' }],
                      })(
                        <span>{info && info.diagInfo ? info.diagInfo.data : "--"}</span>
                        // <span></span>
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Divider />
                <Col style={{ paddingLeft: '54px' }}>
                  <p className="tableTitle">{info && info.medInfo ? '【' + info.medInfo.code + '】' : ''} {info && info.medInfo ? info.medInfo.prescStr : '--'}</p>
                  {this.state.drugsData && this.state.drugsData.map((item, index) => {
                    return (
                      <div key={index} style={{ paddingLeft: 6 }}>
                        <div >{!Util.isEmpty(item) ? item[0].count : ''} </div>
                        <div style={{ paddingLeft: '20px' }}>
                          <Table
                            style={{
                              // maxHeight: '100px',
                              maxHeight: '260px',
                              overflow: 'auto'
                            }}
                            className="components-table-demo-nested"
                            showHeader={false}
                            pagination={false}
                            columns={drugsColumns}
                            rowKey={record => record.key}
                            dataSource={item ? item : []}
                          />
                        </div>
                      </div>
                    )
                  })}
                </Col>
                {labCheckOtherInfo && labCheckOtherInfo.map((item, index) => {
                  return (
                    <div key={index}>
                      <Divider />
                      <Col style={{ paddingLeft: '54px' }}>
                        <p className="tableTitle">{item && item.ordCatDesc ? '【' + item?.ordCatDesc + '】' : '--'}</p>
                        {item.data && item.data.map((childItem, childIndex) => {
                          return (
                            <div key={index + '-' + childIndex} style={{ paddingLeft: 6 }}>
                              <div >{!Util.isEmpty(childItem) ? childItem[0].ordRecLoc : ''} </div>
                              <div style={{ paddingLeft: '20px' }}>
                                <Table
                                  style={{
                                    // maxHeight: '100px',
                                    maxHeight: '260px',
                                    overflow: 'auto'
                                  }}
                                  className="components-table-demo-nested"
                                  showHeader={false}
                                  pagination={false}
                                  columns={Columns}
                                  rowKey={record => record.key}
                                  dataSource={childItem ? childItem : []}
                                />
                              </div>
                            </div>
                          )
                        })}
                      </Col>
                    </div>
                  )
                })}
              </Card>
              <Card style={{ marginBottom: "12px", borderTop: "0" }}>
                <Row style={{ paddingLeft: "20px" }}>
                  {this.props.localeProvider && this.props.localeProvider.PrintGuidTips ? this.setMessage('PrintGuidTips', 'descripts') : "请到收费处交费后再到相应科室就诊"}
                </Row>
                <Row style={{ paddingLeft: "20px" }}>
                  {this.props.localeProvider && this.props.localeProvider.PrintGuidReference ? this.setMessage('PrintGuidReference', 'descripts') : "本单据材料费未计算，仅供参考"}
                </Row>
              </Card>
            </Card>
          </div>
        </div>
      )
    }
  })
export default PrintingGuidanceSheet