/*
 * Create:      柿子
 * CreateDate:  2022/08/31
 * Describe：   配镜管理 - 取镜弹窗
 * */
import React, { Component } from 'react';
import { Modal, Icon, Button, Steps, Input, Card, Row, Col, Tag, Divider, Checkbox, Select, Radio, message, Empty } from 'antd';
import { Util } from 'tools';
import { $loadTemplate } from 'pages/lodop/Common/Print.js';
import '../style/index.less';

const icon_name = require('pages/workstation/image/img/icon_name.png');
const icon_gender = require('pages/workstation/image/img/icon_gender.png');
const icon_expense = require('pages/workstation/image/img/icon_expense.png');
const icon_icon = require('pages/workstation/image/img/icon_icon.png');
const InputGroup = Input.Group;
const { Step } = Steps;

class TakeAMirrorModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      rowData: {},
      stepsData: [{
        title: '核对产品信息',
      }, {
        title: '确认收费',
      }],
      currentStep: 0,
      currentHighest: 0, // 当前操作最高所在的步骤
      productValue: undefined,
      verificationData: [], // 当前产品信息
      applicationData: [], // 申请参数信息
      patInfo: {}, // 患者信息
      uncheckedProducts: '', // 未核对眼别
      paymentInformation: {}, // 支付信息
      sumAmt: 0, // 总金额
      couponID: '1',
      couponPrice: '暂不支持使用优惠券',
      couponChecked: false, // 是否使用优惠券
      integralID: '1',
      integralPrice: '暂不支持积分抵扣',
      integralChecked: false, // 是否积分抵扣
      hedgingID: '1',
      optometryOffsetAmt: 0, // 视光对冲金额
      availableID: '1', // 是否可用
      couponList: [],
      isCharge: 'N',
      productConfirmData: [],
      payConfirmInfo: {},
      btnLoading: false,
      takeUserID: undefined, // 取镜人
      takeUserDesc: undefined, // 取镜备注，非当前取镜人取镜备注
    }
    this.productRef = React.createRef();
  }

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
  }

  // 修改弹窗状态
  modifyVisible = (visible, record = {}) => {
    let { rowData } = this.state;
    if (visible) { // 打开弹窗的情况
      if (record && record.glassesRequestID && record.glassesRequestID !== rowData?.glassesRequestID) {
        this.setState({ rowData: record, applicationData: [], verificationData: [], currentStep: 0, productValue: undefined, uncheckedProducts: '', takeUserID: undefined, takeUserDesc: undefined }, () => {
          this.getApplicationParameters();
        })
      }
    }
    this.setState({ visible });
  }

  // 切换步骤条
  handleStepsChange = (current, isHighest) => {
    const { currentHighest } = this.state;
    current === 1 ? this.getPaymentInformation() : '';
    if (isHighest === 'Y') {
      this.setState({ currentHighest: current });
    } else {
      if (currentHighest < current) {
        return;
      }
    }
    this.setState({ currentStep: current });
  }

  // 扫码确认产品
  handleProductValueChange = e => {
    this.setState({ productValue: e.target.value });
  }

  // 扫码确认
  handleScanningConfirmation = async () => {
    try {
      let { applicationData, productValue } = this.state;
      if (!productValue) return;
      let data = {
        params: [{
          inputDesc: productValue
        }]
      }
      let res = await React.$asyncPost(this, '17030047', data);
      let partObj = res?.result || {};
      for (var i = 0; i < applicationData.length; i++) {
        if (partObj && (applicationData[i].part === partObj.part)) {
          applicationData[i].verification = applicationData[i].productNo === partObj.productNo ? 'Y' : 'N';
          break;
        }
      }
      this.setState({ applicationData, productValue: undefined }, () => {
        setTimeout(() => {
          this.productRef.current?.focus();
        }, 300)
      });
    } catch (error) {
      console.log(error);
    }
  }

  // 修改查询接口入参
  handleInputChange = (e, dataIndex, type) => {
    if (type === 'tags') {
      this.state[dataIndex] = e[e.length - 1];
    } else {
      this.state[dataIndex] = e;
    }
    this.setState({});
  }

  // 获取申请参数信息
  getApplicationParameters = async () => {
    try {
      const { selectData } = this.props;
      const { rowData } = this.state;
      let data = {
        params: [{
          requestID: rowData?.glassesRequestID || ''
        }]
      }
      let res = await React.$asyncPost(this, '17030027', data);
      let applicationData = res.result && 'medArr' in res.result ? Util.addKeyValueToDataSource(res.result.medArr) : [];
      let partArr = Util.getArrayID(applicationData, 'part');
      if (applicationData && applicationData.length && (applicationData.length === 1)) {
        if (partArr.indexOf('L') < 0) {
          applicationData.unshift({
            key: 2,
            isEmpty: 'Y',
            partDesc: '左眼'
          })
        } else {
          applicationData.push({
            key: 2,
            isEmpty: 'Y',
            partDesc: '右眼'
          })
        }
      }
      if (selectData?.mirrorSkipScanConf === 'Y') { // 不核验直接可以下一步
        for (let i = 0; i < applicationData.length; i++) {
          applicationData[i].verification = 'Y';
        }
      }
      this.setState({ applicationData, patInfo: res.result?.patObj || {} });
    } catch (error) {
      console.log(error);
      this.setState({ applicationData: [], patInfo: {} });
    }
  }

  // 优惠券checkboxChange事件
  handleCouponCheckboxChange = (checked, index) => {
    let { couponList } = this.state;
    couponList[index].checked = checked ? 'Y' : 'N';
    this.setState({});
  }

  // 下一步
  handleNextStep = () => {
    const { selectData, applicationData, takeUserID } = this.state;
    if (!takeUserID && selectData?.takeUserRequiredFlag !== 'N') {
      message.error('请填写或选择取镜人！');
      return;
    }
    let isNext = true;
    let partDesc = '';
    if (applicationData && applicationData.length) {
      for (let i = 0; i < applicationData.length; i++) {
        if (applicationData[i].isEmpty !== 'Y' && applicationData[i].verification !== 'Y') {
          partDesc = applicationData[i].partDesc;
          isNext = false;
          break;
        }
      }
    } else {
      isNext = false;
    }
    isNext ? this.handleStepsChange(1, 'Y') : message.error('请核验(' + partDesc + ')产品信息！');
  }

  // 获取取镜支付信息
  getPaymentInformation = async (isTips) => {
    try {
      let { rowData, stepsData } = this.state;
      let data = {
        params: [{
          requestID: rowData?.glassesRequestID || ''
        }]
      }
      let res = await React.$asyncPost(this, '17030048', data);
      let paymentInformation = res?.result || {}
      let payFlag = paymentInformation?.payFlag || 'N';
      stepsData[1].title = payFlag === 'Y' ? '无需收费（已缴费）' : '确认收费';
      // 对冲金额 -> hedging
      this.setState({ paymentInformation, sumAmt: paymentInformation?.sumAmt || 0, optometryOffsetAmt: paymentInformation?.hedging || 0, stepsData });
      isTips === 'Y' ? message.success(res.errorMessage || '刷新成功') : '';
    } catch (error) {
      this.setState({ paymentInformation: {}, sumAmt: 0, optometryOffsetAmt: 0 });
    }
  }

  // 确认
  handleConfirmPayment = async () => {
    try {
      const { selectData } = this.props;
      let { rowData, paymentInformation, takeUserID, takeUserDesc } = this.state;
      if (paymentInformation && paymentInformation.payFlag === 'N' && paymentInformation.surplus < 0) { // 未支付并且预交金不足
        message.error('预交金余额不足，请先去缴费！')
        return
      }
      this.setState({ btnLoading: true });
      let data = {
        params: [{
          ...paymentInformation,
          takeUserID, // 取镜人
          takeUserDesc,
          requestID: rowData?.glassesRequestID || ''
        }]
      }
      let res = await React.$asyncPost(this, '17030049', data);
      message.success(res?.errorMessage || '操作成功');
      this.setState({ productConfirmData: res?.product || [], payConfirmInfo: res?.pay || {}, btnLoading: false }, () => {
        // this.handleStepsChange(2, 'Y');
        this.modifyVisible(false);
        this.props.handleQuery && this.props.handleQuery('N');
        selectData?.takeClassPrint === 'Y' && this.handlePrint();
      });
    } catch (error) {
      this.setState({ productConfirmData: [], payConfirmInfo: {}, btnLoading: false });
    }
  }

  // 打印
  handlePrint = async () => {
    try {
      let { rowData } = this.state;
      let data = {
        params: [{
          glassesRequestIDArr: [rowData?.glassesRequestID || ''],
          viewFlag: 'Y', // 预览标志
          type: 'take', // 取镜打印凭证
        }]
      }
      let res = await React.$asyncPost(this, '17030068', data);
      let dataArr = res?.result || [];
      dataArr && dataArr.map((item, i) => {
        $loadTemplate(item.template, item.printStr);
      })
    } catch (error) {
      console.log(error);
    }
  }

  render() {
    const { selectData } = this.props;
    const { visible, stepsData, currentStep, productValue, sumAmt, couponID, couponChecked, couponPrice, integralChecked, integralID, integralPrice, hedgingID, optometryOffsetAmt, availableID, btnLoading,
      couponList, isCharge, rowData, patInfo, applicationData, paymentInformation, productConfirmData, payConfirmInfo, takeUserID, takeUserDesc
    } = this.state;
    let patientUrl = !Util.isEmpty(patInfo) ? patInfo.patImage : ''
    let patientImg = patientUrl ? (patientUrl.indexOf('http') !== -1 ? patientUrl : windowHost + patientUrl) : '';

    return (
      <Modal
        title="取镜"
        width="1000px"
        footer={currentStep === 2 ? null : (
          <>
            {currentStep === 1 ? <Button ghost type="primary" style={{ marginRight: 12 }} onClick={() => this.handleStepsChange(currentStep - 1)}>上一步</Button> : ''}
            {currentStep === 0 ? <Button type="primary" style={{ marginRight: 12 }} onClick={this.handleNextStep}>下一步</Button> : ''}
            {currentStep === 1 ? <Button type="primary" loading={btnLoading} onClick={this.handleConfirmPayment}>确认</Button> : ''}
          </>
        )}
        visible={visible}
        className="glasses-matching-modal take-a-mirror-modal"
        onCancel={() => this.modifyVisible(false)}
      >
        <div className="flex">
          <div style={{ width: 172 }}>
            <div style={{ textAlign: 'center' }}>
              {
                !Util.isEmpty(patientUrl) ? <img className='splice-patient-img' src={patientImg} /> : <div className={patInfo && patInfo.patSexCode == '1' ?
                  'splice-boys' : (patInfo && patInfo.patSexCode == '2' ? 'splice-girls' : 'splice-girls')}></div>
              }
            </div>
            <div style={{ fontSize: '14px' }}>
              <div style={{ padding: '0 0 0 30px' }}>
                <div style={{ color: '#333333', fontWeight: 'bold', cursor: 'pointer' }}>
                  <img src={icon_name} style={{ marginRight: 20, marginBottom: 3 }} />
                  <span>{patInfo?.patName || rowData?.patName || '--'}</span>
                </div>

                <div className="ellipsis" style={{ marginTop: 10 }}>
                  <img src={icon_gender} style={{ marginRight: 20, marginBottom: 3 }} />
                  {patInfo?.patSexDesc || rowData?.patSexDesc || '--'}
                </div>

                <div className="ellipsis" style={{ marginTop: 10 }}>
                  <img src={icon_expense} style={{ marginRight: 20, marginBottom: 3 }} />
                  {patInfo?.patAge || rowData?.patAge || '--'}
                </div>

                <div className="ellipsis" style={{ marginTop: 10 }}>
                  <img src={icon_icon} style={{ marginRight: 20, marginBottom: 3 }} />
                  <span title={patInfo?.patMobile || rowData?.patMobile || '--'}>
                    {patInfo?.patMobile || rowData?.patMobile || '--'}
                  </span>
                </div>

                <div className="ellipsis" style={{ marginTop: 10 }}>
                  <Icon className='statusdesc-splice' style={{ marginRight: 20 }} />
                  {patInfo?.patSocialStatusDesc || rowData?.patSocialStatusDesc || '--'}
                </div>

                <div className="ellipsis" style={{ marginTop: 10 }} >
                  <Icon className='typeDesc-splice' style={{ marginRight: 20 }} />
                  {patInfo?.admReasonDesc || rowData?.admReasonDesc || '--'}
                </div>

                <div className="ellipsis" style={{ color: '#007AFF', marginTop: 10, marginBottom: 10 }}>
                  <Icon className='account-splice' style={{ marginRight: 20 }} />
                  {patInfo?.accountBalance || rowData?.accountBalance || 0}
                </div>

                {/* <div className="ellipsis" style={{ color: '#007AFF', marginTop: 10, marginBottom: 10 }}>
                  <Icon className='account-splice' style={{ marginRight: 20 }} />
                  {patInfo?.accountBalance || 0}
                </div>

                <div className="ellipsis" style={{ color: '#007AFF', marginTop: 10, marginBottom: 10 }}>
                  <Icon className='account-splice' style={{ marginRight: 20 }} />
                  {patInfo?.accountBalance || 0}
                </div>

                <div className="ellipsis" style={{ color: '#007AFF', marginTop: 10, marginBottom: 10 }}>
                  <Icon className='account-splice' style={{ marginRight: 20 }} />
                  {patInfo?.accountBalance || 0}
                </div> */}
              </div>
            </div>
          </div>
          <div style={{ width: 'calc(100% - 172px)' }}>
            <div className="tamm-steps">
              <Steps current={currentStep} onChange={this.handleStepsChange}>
                {stepsData && stepsData.map((item, index) => (
                  <Step key={index} title={item.title} />
                ))}
              </Steps>
            </div>
            {currentStep === 0 ? (
              <div>
                <div className="flex-align-items" style={{ margin: '24px 0', position: 'relative' }}>
                  {selectData?.takeUserFlag !== 'N' ? (
                    <div style={{ width: '50%' }} className="flex-align-items">
                      <span style={{ position: 'relative', padding: '4px 0 0 22px' }} className={selectData?.takeUserRequiredFlag !== 'N' ? 'formRequired' : ''}>取镜人：</span>
                      <Select
                        allowClear
                        showSearch
                        optionFilterProp="search"
                        placeholder="请选择"
                        style={{ width: '120px', marginRight: '6px' }}
                        value={takeUserID}
                        onChange={(e) => this.handleInputChange(e, 'takeUserID')}
                      >
                        {React.$SelectOptions(selectData?.takeUserList || [])}
                      </Select>
                      <Input
                        allowClear
                        ref={this.productRef}
                        placeholder="取镜备注"
                        value={takeUserDesc}
                        style={{ width: '170px', marginRight: '24px' }}
                        onChange={(e) => this.handleInputChange(e.target.value, 'takeUserDesc')}
                      />
                    </div>
                  ) : ''}
                  <div style={{ width: '50%' }} className="flex-align-items">
                    扫码确认：
                    <Input
                      ref={this.productRef}
                      placeholder="请扫码确认待核验产品"
                      value={productValue}
                      style={{ width: '80%' }}
                      onChange={this.handleProductValueChange}
                      onPressEnter={this.handleScanningConfirmation}
                    />
                  </div>
                  {/* <div className="tamm-unchecked-products" style={{ display: uncheckedProducts ? 'block' : 'none' }}>请您继续核对{uncheckedProducts}产品信息</div> */}
                </div>
                <Row className="tamm-card-content">
                  {applicationData && applicationData.map((item, index) => {
                    return (
                      <Col key={index} span={12} className={(applicationData.length - 1 > index) ? 'tamm-card-content-top' : ''}>
                        <Card size="small">
                          <div style={{ borderBottom: '1px solid #e8e8e8', width: '100%', paddingBottom: '6px' }}>
                            <Tag className="tamm-tag">{item?.partDesc || ''}</Tag>
                            <div style={{ float: 'right' }}>
                              {item.isEmpty === 'Y' ? '' : item?.verification === 'Y' ? (
                                <span className="flex-align-items" style={{ color: '#08979c' }}>
                                  <Icon style={{ color: '#08979c', marginRight: 6, fontSize: 16 }} theme="filled" type="check-circle" />
                                  核验通过
                                </span>
                              ) : (item?.verification === 'N' ? (
                                <span className="flex-align-items" style={{ color: 'red' }}>
                                  <Icon style={{ color: 'red', marginRight: 6, fontSize: 16 }} theme="filled" type="close-circle" />
                                  核验不通过
                                </span>
                              ) : (
                                <span className="flex-align-items" style={{ color: '#999' }}>
                                  <Icon style={{ color: '#999', marginRight: 6, fontSize: 16 }} theme="filled" type="clock-circle" />
                                  等待核验
                                </span>
                              ))}
                            </div>
                          </div>
                          {item.isEmpty === 'Y' ? (
                            <div className="no-matching-data">
                              暂无产品信息
                            </div>
                          ) : (
                            <>
                              <div className="tamm-card-content-title">
                                <div>
                                  <span>患者姓名：</span>{item?.patName || ''}
                                </div>
                                <div>
                                  <span>产品名称：</span>{item?.medDesc || ''}
                                </div>
                                <div>
                                  <span>数量：</span>{(item?.qty || '') + (item?.unitDesc || '')}
                                </div>
                                <div>
                                  <span>生产日期：</span>{item?.produceDate || ''}
                                </div>
                                <div>
                                  <span>有效期：</span>{item?.expDate || ''}
                                </div>
                                <div>
                                  <span>品牌：</span>{item?.brandDesc || ''}
                                </div>
                                <div>
                                  <span>产品编号：</span><span style={{ color: '#ff9100' }}>{selectData?.mirrorSkipScanConf === 'Y' ? (item?.productNo || '') : Util.desensitizedCommon(item?.productNo || '')}</span>
                                </div>
                              </div>
                            </>
                          )}

                        </Card>
                      </Col>
                    )
                  })}
                </Row>
              </div>
            ) : currentStep === 1 ? (
              <Row style={{ marginTop: 12 }}>
                <Col span={12}>
                  <div
                    style={{ paddingRight: '8px', position: 'relative', height: '100%' }}
                  >
                    <Card
                      size="small"
                      className="tamm-card"
                      title={(
                        <div className="card-title-left-icon">
                          <div></div>
                          支付信息
                        </div>
                      )}
                      extra={(
                        <span className="span" onClick={() => this.getPaymentInformation('Y')}>
                          <Icon type="sync" />
                          刷新
                        </span>
                      )}
                    >
                      {isCharge === 'N' ? (
                        <div style={{ height: 416 }}>
                          <InputGroup compact style={{ width: 'auto' }}>
                            <Input
                              disabled
                              value="总金额"
                              style={{ width: 100, textAlign: 'right' }} />
                            <Input
                              disabled
                              placeholder="请输入"
                              value={sumAmt}
                              style={{ width: 150, textAlign: 'right' }}
                              onChange={(e) => this.handleInputChange(e.target.value, 'sumAmt')}
                            />
                          </InputGroup>
                          <Divider dashed orientation="left" style={{ margin: '8px 0' }}>实收</Divider>
                          <div className="flex-align-items">
                            <InputGroup compact style={{ width: 'auto' }}>
                              <Select
                                disabled
                                allowClear
                                showSearch
                                placeholder="请选择"
                                style={{ width: 100 }}
                                optionFilterProp="search"
                                value={couponID}
                                onChange={(e) => this.handleInputChange(e, 'couponID')}
                              >
                                <Option value="1">优惠券</Option>
                              </Select>
                              <Input
                                disabled
                                placeholder="请输入"
                                value={couponPrice}
                                style={{ width: 150, textAlign: 'right' }}
                              // onChange={(e) => this.handleInputChange(e.target.value, 'couponPrice')}
                              />
                            </InputGroup>
                            <Checkbox disabled checked={couponChecked} onChange={(e) => this.handleInputChange(e.target.checked, 'couponChecked')} style={{ marginLeft: '12px' }}>不使用优惠券</Checkbox>
                          </div>
                          <div className="flex-align-items" style={{ margin: '12px 0' }}>
                            <InputGroup compact style={{ width: 'auto' }}>
                              <Select
                                disabled
                                allowClear
                                showSearch
                                placeholder="请选择"
                                style={{ width: 100 }}
                                optionFilterProp="search"
                                value={integralID}
                                onChange={(e) => this.handleInputChange(e, 'integralID')}
                              >
                                <Option value="1">积分抵扣</Option>
                              </Select>
                              <Input
                                disabled
                                placeholder="请输入"
                                value={integralPrice}
                                style={{ width: 150, textAlign: 'right' }}
                                onChange={(e) => this.handleInputChange(e.target.value, 'integralPrice')}
                              />
                            </InputGroup>
                            <Checkbox disabled checked={integralChecked} onChange={(e) => this.handleInputChange(e.target.checked, 'integralChecked')} style={{ marginLeft: '12px' }}>不使用抵扣</Checkbox>
                          </div>
                          <div>
                            <InputGroup compact style={{ width: 'auto' }}>
                              <Select
                                disabled
                                allowClear
                                showSearch
                                placeholder="请选择"
                                style={{ width: 100 }}
                                optionFilterProp="search"
                                value={hedgingID}
                                onChange={(e) => this.handleInputChange(e, 'hedgingID')}
                              >
                                <Option value="1">视光对冲</Option>
                              </Select>
                              <Input
                                disabled
                                placeholder="请输入"
                                value={optometryOffsetAmt}
                                style={{ width: 150, textAlign: 'right' }}
                                onChange={(e) => this.handleInputChange(e.target.value, 'optometryOffsetAmt')}
                              />
                            </InputGroup>
                            <div
                              style={{
                                width: '100%',
                                marginTop: 6,
                                lineHeight: '32px',
                                background: '#f0c08d',
                                fontWeight: 'normal',
                                paddingLeft: '6px',
                                fontSize: '13px'
                              }}>
                              提示：视光账户￥{paymentInformation?.depositAmt || 0}，<span>对冲后余额￥{paymentInformation?.surplus || 0}</span>
                            </div>
                          </div>
                        </div>
                      ) : (
                        <div className="tamm-card-no-charge" style={{ height: 416 }}>
                          <h3>订单已支付，无需重复支付</h3>
                          <div className="tamm-card-content-title">
                            <div>
                              <span>订单金额：</span>{paymentInformation?.orderAmt || '--'}
                            </div>
                            <div>
                              <span>支付方式：</span>{paymentInformation?.payWay || '--'}
                            </div>
                            <div>
                              <span>收费人员：</span>{paymentInformation?.payUserDesc || '--'}
                            </div>
                            <div>
                              <span>收费时间：</span>{paymentInformation?.payDateTime || '--'}
                            </div>
                          </div>
                        </div>
                      )}
                    </Card>
                  </div>
                  <div className="common-card-right-split-line" style={{ width: 8, background: '#fff' }}></div>
                </Col>
                <Col span={12}>
                  <Card
                    size="small"
                    className="tamm-card"
                    title={(
                      <div className="card-title-left-icon">
                        <div></div>
                        优惠券
                      </div>
                    )}
                    extra={(
                      <Radio.Group
                        size="small"
                        buttonStyle="solid"
                        value={availableID}
                        onChange={(e) => this.handleInputChange(e.target.value, 'availableID')}
                      >
                        <Radio.Button value="1">可用(0)</Radio.Button>
                        <Radio.Button value="2">不可用(0)</Radio.Button>
                      </Radio.Group>
                    )}
                  >
                    <div>
                      <div className="tamm-coupon-header" style={{ textAlign: 'right', paddingRight: 6, paddingBottom: 8 }}>
                        <Button
                          ghost
                          type="primary"
                          size="small"
                        >
                          核验优惠劵
                        </Button>
                      </div>
                      <div style={{ height: 384, overflow: 'auto', paddingRight: 6, paddingTop: 6 }} className="scroll-bar-style">
                        {couponList && couponList.length > 0 ? couponList.map((item, index) => {
                          return (
                            <div className="tamm-coupon-list">
                              <Row>
                                <Col span={8} className="tamm-coupon-list-left tamm-coupon-list-col">
                                  <Checkbox
                                    checked={item.checked === 'Y' ? true : false}
                                    onChange={(e) => this.handleCouponCheckboxChange(e.target.checked, index)}
                                  />
                                  <div className="tamm-coupon-list-left-title">
                                    9折劵
                                  </div>
                                  <div className="tamm-coupon-list-left-desc">
                                    无金额门槛
                                  </div>
                                </Col>
                                <Col span={16} className="tamm-coupon-list-right tamm-coupon-list-col">
                                  <div className="tamm-coupon-list-left-title">
                                    <Tag color="#2db7f5">折扣券</Tag>
                                    屈光手术9折劵
                                  </div>
                                  <div className="tamm-coupon-list-left-desc">
                                    2022.04.11至2022.12.12
                                  </div>
                                </Col>
                              </Row>
                              <div className="tamm-coupon-list-footer flex-between-center">
                                <span>
                                  来源：内部电子劵
                                </span>
                                <span className="span">
                                  查看详情
                                </span>
                              </div>
                            </div>
                          )
                        }) : (
                          <Empty description="暂无可用优惠卷" />
                        )}
                      </div>
                    </div>
                  </Card>
                </Col>
              </Row>
            ) : (
              <div>
                <Card
                  size="small"
                  className="tamm-card"
                  style={{ margin: '12px 0' }}
                  title={(
                    <div className="card-title-left-icon">
                      <div></div>
                      产品信息
                    </div>
                  )}
                >
                  <Row>
                    {productConfirmData && productConfirmData.map((item, index) => {
                      return (
                        <Col key={index} span={12}>
                          <div className="tamm-card-content-title">
                            <div>
                              <span>产品名称：</span>{item?.medDesc || ''}
                            </div>
                            <div>
                              <span>数量：</span>{(item?.qty || '') + (item?.unitDesc || '')}
                            </div>
                            <div>
                              <span>生产日期：</span>{item?.produceDate || ''}
                            </div>
                            <div>
                              <span>有效期：</span>{item?.expDate || ''}
                            </div>
                            <div>
                              <span>品牌：</span>{item?.brandDesc || ''}
                            </div>
                            <div>
                              <span>产品编号：</span><span style={{ color: '#ff9100' }}>{Util.desensitizedCommon(item?.productNo || '')}</span>
                              <Tag className="tamm-tag" style={{ marginLeft: 6 }}>{item?.partDesc || ''}</Tag>
                            </div>
                          </div>
                        </Col>
                      )
                    })}
                  </Row>
                </Card>
                <Card
                  size="small"
                  className="tamm-card"
                  title={(
                    <div className="card-title-left-icon">
                      <div></div>
                      支付信息
                    </div>
                  )}
                >
                  <Row>
                    <Col span={12}>
                      <div className="tamm-card-content-title">
                        {paymentInformation && paymentInformation.payFlag === 'Y' ? (
                          <>
                            <div>
                              <span>总金额(元)：</span>{payConfirmInfo?.totalAmt || '--'}
                            </div>
                            <div>
                              <span>支付方式：</span>{payConfirmInfo?.payWay || '--'}
                            </div>
                            <div>
                              <span>收费人员：</span>{payConfirmInfo?.payUserDesc || '--'}
                            </div>
                            <div>
                              <span>收费时间：</span>{payConfirmInfo?.payDateTime || '--'}
                            </div>
                          </>
                        ) : (
                          <>
                            <div>
                              <span>总金额(元)：</span>{sumAmt || '--'}
                            </div>
                            <div>
                              <span>优惠金额(元)：</span>{paymentInformation?.discountAmt || '--'}
                            </div>
                            <div>
                              <span>视光对冲：</span>{paymentInformation?.patAmt || 0}(<span style={{ color: '#ff3d00' }}>可用余额：</span>{paymentInformation?.depositAmt || 0}元)
                            </div>
                            <div>
                              <span>操作员：</span>{paymentInformation?.payUserDesc || '--'}
                            </div>
                          </>
                        )}
                      </div>
                    </Col>
                  </Row>
                </Card>
              </div>
            )}
          </div>
        </div>
      </Modal >
    )
  }
};

export default TakeAMirrorModal;