<template>
  <page-layer>
    <template #header>
      <el-input v-model="patientId" style="width: 100px" clearable placeholder="门诊ID">
      </el-input>
      <el-select v-model="medType" style="width: 120px" placeholder="医疗类别">
        <el-option v-for="item in medTypes" :key="item.code" :value="item.code" :label="item.name"></el-option>
      </el-select>
      <el-select v-model="admdvs" clearable filterable placeholder="参保地区" style="width: 160px">
        <el-option v-for="item in admdvses" :key="item.code" :label="item.name" :value="item.code">
          <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-dropdown trigger="click" @command="receiptsOpts" style="margin-left: 8px">
        <el-button type="primary">
          处方&nbsp;<el-icon><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="Document" command="require">获取门诊处方</el-dropdown-item>
            <el-dropdown-item icon="Delete" command="delete">删除所有处方</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <ReadCard :pat-no="patientId" @success="afterReadCard" />
      <el-dropdown trigger="click" @command="registor">
        <el-button type="primary">
          登记&nbsp;<el-icon><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="CreditCard" command="execute">医保登记</el-dropdown-item>
            <el-dropdown-item icon="RefreshLeft" command="revoke">取消登记</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown trigger="click" @command="receiptsOpts" style="margin-left: 8px">
        <el-button type="primary">
          上传&nbsp;<el-icon><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="Upload" command="upload">医保处方上传</el-dropdown-item>
            <el-dropdown-item icon="RefreshLeft" command="retract">撤销处方上传</el-dropdown-item>
            <el-dropdown-item divided icon="Edit" command="diags">普门诊断补录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown trigger="click" @command="settlement" style="margin-left: 8px">
        <el-button type="primary">
          结算&nbsp;<el-icon><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="SetUp" command="preSettlement">试算</el-dropdown-item>
            <el-dropdown-item icon="Stamp" command="realSettlement">结算</el-dropdown-item>
            <el-dropdown-item divided icon="RefreshLeft" command="cancelSettlement">取消结算</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button type="danger" icon="Refresh" @click="clearinfo" style="margin-left: 8px"> 重置 </el-button>
    </template>
    <template #aside>
      <div style="display: flex">
        <div style="width: 40px">
          <el-table ref="timesTable" :data="unPaidReceipts" highlight-current-row @row-click="clickTimes" empty-text="无">
            <el-table-column label="次数" prop="times"></el-table-column>
          </el-table>
        </div>
        <div style="width: 260px">
          <el-table ref="ordersTable" :data="orderNos" highlight-current-row @row-click="clickOrderNo" empty-text="无">
            <el-table-column label="处方" width="50">
              <template #default="scope">
                <span v-html="colorStatus(scope.row)"></span>
              </template>
            </el-table-column>
            <el-table-column label="金额" width="60">
              <template #default="scope">
                {{ scope.row.totalFee.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button text icon="Check" @click="markMzFees" :disabled="scope.row.status"> 生成 </el-button>
                <el-button text icon="Delete" @click="unmarkMzFees(scope.row)" :disabled="!scope.row.status"> 撤销 </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
    <template #main>
      <div style="margin-left: 30px; position: relative">
        <img v-if="mzVisit.settledFlag === 1" :src="mzSettled" alt="" style="z-index: 999; width: 230px;
            position: absolute; top: 160px; left: 260px; background: rgba(255,255,255,.5)">
        <div class="receipt-title">长沙泰和医院处方笺</div>
        <el-divider></el-divider>
        <div class="receipt-head">
          <div>姓名：{{ mzVisit.name }}</div>
          <div>性别：{{ mzVisit.sex }}</div>
          <div>年龄：{{ mzVisit.age }} 岁</div>
        </div>
        <div class="receipt-head">
          <div>门诊号：{{ mzVisit.patientId }}</div>
          <div>科别：{{ mzVisit.visitDeptName }}</div>
          <div class="ellipsis-text" :title="mzVisit.icdText">临床诊断：{{ mzVisit.icdText }}</div>
        </div>
        <div class="receipt-head">
          <div>开具日期：{{ mzVisit.opDay }}</div>
          <div class="ellipsis-text">
            地址：<span :title="mzVisit.address">{{ mzVisit.address }}</span>
          </div>
          <div>电话：{{ mzVisit.phoneNo }}</div>
        </div>
        <el-divider></el-divider>
        <div :style="receiptBoxStyle">
          <div v-for="(item, index) in currentReceipts" :key="index">
            <div class="receipt-item">
              <div class="w75">
                <el-checkbox v-model="item.checked"></el-checkbox>
                {{ index + 1 }}）{{ item.drugName }}&nbsp; （
                <span v-if="item.specification">{{ item.specification }}</span>
                <span v-else>{{ item.drugUnit }}</span>
                ）
              </div>
              <div class="w25">&times;&nbsp;&nbsp;&nbsp;{{ item.quantity }}</div>
            </div>
            <div class="receipt-tips">
              <span v-if="item.drugQuan"> 用法：{{ item.drugQuan }}{{ item.drugUnit }}/次 </span>
              <span v-if="item.frequency"> {{ item.frequency }} </span>
              <span v-if="item.orderDays"> {{ item.orderDays }}天 </span>
              <span v-if="item.supplyCode"> {{ item.supplyCode }} </span>
              <span v-if="item.instructionText"> 备注：{{ item.instructionText }} </span>
            </div>
            <div :style="{ color: item.nationalCode ? 'green' : 'red', fontWeight: 'bold', padding: '0 0 12px 64px' }">医保码：{{ item.nationalCode || '未匹配' }}</div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="receipt-head">
          <div style="font-size: 15px; width: 70%">医师：{{ mzVisit.doctorName }} / {{ mzVisit.doctorCode }} / <span v-html="highlightYbCode(mzVisit.doctorCode,mzVisit.doctorYbCode)"></span></div>
          <div style="font-size: 15px">
            总金额：<span style="font-size: 18px; font-weight: bold">￥{{ totalFee }}</span>
          </div>
        </div>
      </div>
      <el-dialog title="个人信息" v-model="showInsuinfo" width="65%">
        <el-tag>参保信息</el-tag>
        <el-table :data="psnBaseinfo.insuinfo" @row-click="handleClickInsuinfo">
          <el-table-column property="balc" label="余额"></el-table-column>
          <el-table-column label="险种类型" prop="insutypeName"></el-table-column>
          <el-table-column label="人员类别" prop="psnTypeName"></el-table-column>
          <el-table-column label="参保状态" prop="psnInsuStasName"></el-table-column>
          <el-table-column property="psnInsuDate" label="个人参保日期"></el-table-column>
          <el-table-column property="pausInsuDate" label="暂停参保日期"></el-table-column>
          <el-table-column property="cvlservFlagName" label="公务员标志"></el-table-column>
          <el-table-column property="insuplcAdmdvs" label="参保地医保区划"></el-table-column>
          <el-table-column property="insuplcAdmdvsName" label="参保地名称"></el-table-column>
          <el-table-column property="empName" label="单位名称"></el-table-column>
        </el-table>
        <div style="height: 16px"></div>
        <el-tag>身份信息</el-tag>
        <el-table :data="psnBaseinfo.idetinfo" stripe height="180">
          <el-table-column label="人员身份类别" prop="psnIdetTypeName"></el-table-column>
          <el-table-column label="人员类别等级" prop="psnTypeLv"></el-table-column>
          <el-table-column label="备注" prop="memo"></el-table-column>
          <el-table-column label="开始时间" prop="begntime"></el-table-column>
          <el-table-column label="结束时间" prop="endtime"></el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog title="请选择（慢特病备案信息）" v-model="showSpcChrAccts" width="40%">
        <el-table :data="spcChrDiseAccts" @row-click="uploadFees">
          <el-table-column property="opspDiseCode" label="病种编码"></el-table-column>
          <el-table-column property="opspDiseName" label="病种名称"></el-table-column>
          <el-table-column property="begndate" label="生效日期"></el-table-column>
          <el-table-column property="enddate" label="失效日期"></el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog title="请选择生育病种" v-model="showMatnDises" width="60%">
        <el-table :data="matnDises" @row-click="uploadFees" stripe height="360">
          <el-table-column property="code" label="病种编码"></el-table-column>
          <el-table-column property="name" label="病种名称"></el-table-column>
          <el-table-column property="insutype" label="险种类型"></el-table-column>
          <el-table-column property="limitAmt" label="疾病限额"></el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog title="普门诊断补录" v-model="showInputDiags" width="60%" :close-on-click-modal="false" :close-on-press-escape="false">
        <outpatient-diagnose-supply :med-type="medType" :mz-visit="mzVisit" @close="showInputDiags = false"></outpatient-diagnose-supply>
      </el-dialog>
      <el-dialog v-model="showMdtrtGrpType" title="跨省患者请选择" width="360px">
        <div>
          &nbsp;&nbsp;&nbsp;&nbsp;就诊人群类型：
          <el-select v-model="expContent.MDTRT_GRP_TYPE" style="width: 160px">
            <el-option v-for="item in mdtrtGrpTypes" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </div>
        <div style="margin-top: 12px">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;外伤标志：
          <el-select v-model="expContent.TRUM_FLAG" style="width: 160px">
            <el-option label="无" value=""></el-option>
            <el-option label="非外伤" value="0"></el-option>
            <el-option label="外伤" value="1"></el-option>
          </el-select>
        </div>
        <div style="margin-top: 12px">
          涉及第三方标志：
          <el-select v-model="expContent.REL_TTP_FLAG" style="width: 160px">
            <el-option label="无" value=""></el-option>
            <el-option label="涉及" value="0"></el-option>
            <el-option label="不涉及" value="1"></el-option>
          </el-select>
        </div>
        <div style="margin-top: 12px">
          门急诊转诊标志：
          <el-select v-model="expContent.OTP_ER_REFL_FLAG" style="width: 160px">
            <el-option label="无" value=""></el-option>
            <el-option label="急诊" value="1"></el-option>
            <el-option label="转诊" value="2"></el-option>
            <el-option label="转诊合并急诊" value="3"></el-option>
          </el-select>
        </div>
        <div style="margin-top: 20px; width: 100%; text-align: right">
          <el-button @click="afterChooseMdtrtGrpType" type="primary" size="default">确定</el-button>
        </div>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { admdvses } from '@/data'
import {
  deleteAllMzReceipts,
  deleteMzReceipt,
  getMzReceipts,
  insertSiMzFees,
  outpatientPreSettlement,
  outpatientRegistration,
  revokeOutpatientFeeDetails,
  revokeOutpatientRegistration,
  uploadOutpatientFeeDetails,
  outpatientSettlement,
  revokeOutpatientSettlement,
} from '@/api/medical-insurance/si-outpatient'
import {ElMessage, ElMessageBox, ElSelect} from 'element-plus'
import store from '@/store'
import { obtainBasicPersonInfo, querySpecialChronicDiseasesAccreditation, queryMzMatnDises } from '@/api/medical-insurance/si-query'
import { getMedTypesByFlag } from '@/api/medical-insurance/si-dict'
import ReadCard from '@/components/medical-insurance/readcard/Index.vue'
import mzSettled from '@/assets/mz-settled.png'
import OutpatientDiagnoseSupply from '@/components/medical-insurance/outpatient-diagnose-supply/Index.vue'
import PageLayer from "@/layout/PageLayer";

const medType = ref(null)
const admdvs = ref(null)
const certainAdmdvs = ref('')
const medTypes = ref([])
const patientId = ref('')
const times = ref(null)
const windowSize = store.state.app.windowSize
const receiptBoxStyle = {
  height: windowSize.h - 335 + 'px',
  overflowY: 'auto',
}
const unPaidReceipts = ref([])
const showInsuinfo = ref(false)
const psnBaseinfo = ref({})
const mzVisit = ref({})
const receipts = ref({})
const orderNos = ref([])
const currentReceipts = ref([])
const totalFee = ref(null)
const timesTable = ref(null)
const ordersTable = ref(null)
const currentOrder = ref({})
const spcChrDiseAccts = ref([])
const showSpcChrAccts = ref(false)
const matnDises = ref([])
const showMatnDises = ref(false)
const showInputDiags = ref(false)

const showMdtrtGrpType = ref(false)
const expContent = reactive({
  MDTRT_GRP_TYPE: '',
  TRUM_FLAG: '',
  REL_TTP_FLAG: '',
  OTP_ER_REFL_FLAG: ''
})
const mdtrtGrpTypes = [
  {code: '', name: '普通患者'},
  {code: '1', name: '新冠肺炎确诊患者'},
  {code: '2', name: '其他国家突发公共事件'},
  {code: '3', name: '新冠肺炎疑似患者'},
  {code: '4', name: '无症状感染者'},
]

const nullPatientId = () => {
  if (!patientId.value) {
    ElMessage({
      message: '请输入门诊id号！',
      type: 'warning',
      duration: 2500,
      showClose: true,
    })
    return true
  }
  return false
}

const clearExpContent = () => {
  expContent.MDTRT_GRP_TYPE = ''
  expContent.TRUM_FLAG = ''
  expContent.REL_TTP_FLAG = ''
  expContent.OTP_ER_REFL_FLAG = ''
}

const registor = (command) => {
  if (nullPatientId()) {
    return
  }
  if (nullTimes()) {
    return
  }
  clearExpContent()
  const param = {
    patNo: patientId.value,
    medType: medType.value,
    admdvs: admdvs.value,
    times: times.value,
    needSaving: 1,
  }
  if (command === 'execute') {
    if (!medType.value) {
      ElMessage({
        message: '请先选择医疗类别！',
        type: 'warning',
        duration: 2500,
        showClose: true,
      })
      return
    }
    obtainBasicPersonInfo(param).then((res) => {
      times.value = res.times
      psnBaseinfo.value = res
      showInsuinfo.value = true
    })
  } else {
    revokeOutpatientRegistration(param).then((res) => {
      ElMessage({
        message: res,
        type: 'success',
        duration: 2000,
        showClose: true,
      })
    })
  }
}

const nullTimes = () => {
  if (!times.value) {
    ElMessage({
      message: '请先获取门诊处方！',
      type: 'warning',
      duration: 2500,
      showClose: true,
    })
    return true
  }
  return false
}

const receiptsOpts = (command) => {
  if (nullPatientId()) {
    return
  }
  if (command !== 'require') {
    if (nullTimes()) {
      return
    }
  }
  const param = {
    patNo: patientId.value,
    times: times.value,
  }
  switch (command) {
    case 'require':
      fetchReceipts(param)
      break
    case 'delete':
      deleteAllMzReceipts(param).then((res) => {
        ElMessage({
          message: res,
          type: 'success',
          duration: 2000,
          showClose: true,
        })
        fetchReceipts(param)
      })
      break
    case 'upload':
      qrySpcChrDiseAcct(param)
      break
    case 'retract':
      revokeOutpatientFeeDetails(param).then((res) => {
        ElMessage({
          message: res,
          type: 'success',
          duration: 2000,
          showClose: true,
        })
      })
      break
    case 'diags':
      showInputDiags.value = true
      break
  }
}

const fetchReceipts = (param) => {
  clearReadCardData()
  getMzReceipts(param)
      .then((res) => {
        unPaidReceipts.value = res
        setTimeout(() => {
          timesTable.value.setCurrentRow(res[0])
          clickTimes(res[0])
        }, 100)
      })
      .catch(() => {
        unPaidReceipts.value = []
        orderNos.value = []
        currentReceipts.value = []
      })
}

const markMzFees = () => {
  if (currentReceipts.value.length === 0) {
    ElMessage({
      message: '请先选择要保存的处方！',
      type: 'warning',
      duration: 2500,
      showClose: true,
    })
    return
  }
  ElMessageBox.confirm('是否将选中处方生成医保处方？', '提示', {
    type: 'warning',
    confirmButtonText: '生成',
    cancelButtonText: '取消',
  })
      .then(() => {
        insertSiMzFees(currentReceipts.value).then(() => {
          currentOrder.value.status = true
          ElMessage({
            message: '已成功生成医保处方。',
            type: 'success',
            duration: 2500,
            showClose: true,
          })
        })
      })
      .catch(() => {})
}

const qrySpcChrDiseAcct = (param) => {
  if (medType.value === '51') {
    queryMzMatnDises().then((res) => {
      matnDises.value = res
      showMatnDises.value = true
    })
  } else if (medType.value === '14') {
    querySpecialChronicDiseasesAccreditation(param).then((res) => {
      spcChrDiseAccts.value = res
      showSpcChrAccts.value = true
    })
  } else {
    uploadFees(param)
  }
}

const uploadFees = (row) => {
  if (medType.value === '51') {
    row.patNo = patientId.value
    row.times = times.value
    row.opspDiseCode = row.code
    row.opspDiseName = row.name
  }
  uploadOutpatientFeeDetails(row).then((res) => {
    times.value = res.times
    showSpcChrAccts.value = false
    showMatnDises.value = false
    mzPreSetl()
  })
}

const readCardData = reactive({
  mdtrtCertType: null,
  readCardResult: null,
  readCardBizType: null,
})

const clearReadCardData = () => {
  readCardData.mdtrtCertType = null
  readCardData.readCardResult = null
  readCardData.readCardBizType = null
}

const afterReadCard = (result) => {
  readCardData.mdtrtCertType = result.mdtrtCertType
  readCardData.readCardResult = result.readCardResult
  readCardData.readCardBizType = result.readCardBizType
}

const handleClickInsuinfo = (row) => {
  certainAdmdvs.value = row.insuplcAdmdvs
  const param = {
    patNo: patientId.value,
    times: times.value,
    name: mzVisit.value.name,
    insutype: row.insutype,
    medType: medType.value,
    psnType: row.psnType,
    insuplcAdmdvs: row.insuplcAdmdvs,
    empName: row.empName,
    balc: row.balc,
    mdtrtCertType: readCardData.mdtrtCertType,
    readCardResult: readCardData.readCardResult,
    readCardBizType: readCardData.readCardBizType,
  }
  outpatientRegistration(param).then((res) => {
    showInsuinfo.value = false
    clearReadCardData()
    ElMessage({
      message: res,
      type: 'success',
      duration: 2000,
      showClose: true,
    })
  })
}

const clickOrderNo = (row) => {
  currentOrder.value = row
  currentReceipts.value = receipts.value[row.orderNo]
  totalFee.value = row.totalFee.toFixed(2)
}

const clickTimes = (row) => {
  mzVisit.value = row.mzVisit
  receipts.value = row.mzReceipts
  orderNos.value = row.orderNos
  times.value = row.times
  currentReceipts.value = []
  setTimeout(() => {
    ordersTable.value.setCurrentRow(orderNos.value[0])
    clickOrderNo(orderNos.value[0])
  }, 100)
}

const colorStatus = (row) => {
  return row.status ? `<span style="color: green">第${row.orderNo}张</span>` : `<span style="color: red">第${row.orderNo}张</span>`
}

const unmarkMzFees = (row) => {
  ElMessageBox.confirm('是否将选中处方从医保处方中删除？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    deleteMzReceipt(row).then(() => {
      currentOrder.value.status = false
      ElMessage({
        message: '已成功删除医保处方。',
        type: 'success',
        duration: 2500,
        showClose: true,
      })
    })
  }).catch(() => {})
}

const currentCommand = ref(null)
const settlement = (command) => {
  if (nullPatientId() || nullTimes()) {
    return
  }
  if (command === 'cancelSettlement') {
    revokeMzSettle()
  } else {
    if (certainAdmdvs.value.startsWith('43')) {
      command === 'preSettlement' ? mzPreSetl() : chooseWhetherUseAcctFlag()
    } else {
      currentCommand.value = command
      showMdtrtGrpType.value = true
    }
  }
}

const afterChooseMdtrtGrpType = () => {
  if (currentCommand.value) {
    currentCommand.value === 'preSettlement' ? mzPreSetl() : chooseWhetherUseAcctFlag()
  }
  showMdtrtGrpType.value = false
}

const mzPreSetl = () => {
  const param = {
    staffId: store.state.user.info.code,
    patNo: patientId.value,
    times: times.value,
    mdtrtCertType: readCardData.mdtrtCertType,
    readCardResult: readCardData.readCardResult,
    readCardBizType: readCardData.readCardBizType,
    expContent: JSON.stringify(expContent)
  }
  outpatientPreSettlement(param).then((res) => {
    const message = '医保处方总费用：' + res.totalCost + '，医保报销金额：' + res.fundPay + '。'
    ElMessageBox.alert(message, '试算成功', {
      type: 'success',
      showCancelButton: false,
    }).then(() => {})
  })
}

const chooseWhetherUseAcctFlag = () => {
  ElMessageBox.confirm('是否使用个人账户？', '提示', {
    type: 'warning',
    confirmButtonText: '不使用',
    cancelButtonText: '使用',
    distinguishCancelAndClose: true,
    closeOnClickModal: false,
    closeOnPressEscape: false,
  }).then(() => {
    mzSettle('0')
  }).catch((action) => {
    if (action === 'cancel') {
      mzSettle('1')
    }
  })
}

const mzSettle = (useAcctFlag) => {
  const param = {
    patNo: patientId.value,
    times: times.value,
    acctUsedFlag: useAcctFlag,
    mdtrtCertType: readCardData.mdtrtCertType,
    readCardResult: readCardData.readCardResult,
    readCardBizType: readCardData.readCardBizType,
    expContent: JSON.stringify(expContent)
  }
  outpatientSettlement(param).then((res) => {
    clearReadCardData()
    const message = '医保处方总费用：' + res.totalCost + '，医保报销金额：' + res.fundPay + '。'
    ElMessageBox.alert(message, '结算成功', {
      type: 'success',
      showCancelButton: false,
    }).then(() => {})
  })
}

const revokeMzSettle = () => {
  const param = {
    patNo: patientId.value,
    times: times.value,
  }
  revokeOutpatientSettlement(param).then((res) => {
    ElMessageBox.alert('撤销门诊结算成功', '提示', {
      type: 'success',
      showCancelButton: false,
    })
  })
}

const clearinfo = () => {
  patientId.value = ''
  times.value = null
  unPaidReceipts.value = []
  psnBaseinfo.value = {}
  mzVisit.value = {}
  receipts.value = {}
  orderNos.value = []
  currentReceipts.value = []
  totalFee.value = null
  timesTable.value = null
  ordersTable.value = null
  currentOrder.value = {}
  spcChrDiseAccts.value = []
}

const highlightYbCode = (hisCode, ybCode) => {
  if (!hisCode) {
    return ''
  }
  return ybCode ? `<span>${ybCode}</span>` : '<span style="color: red">医师无医保编码</span>'
}

onMounted(() => {
  getMedTypesByFlag('clinic').then((res) => {
    medTypes.value = res
  })
})
</script>

<style scoped>
.receipt-title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  height: 32px;
  line-height: 32px;
}
.receipt-head {
  display: flex;
  height: 22px;
  line-height: 22px;
}
.receipt-head > div {
  width: 33%;
  padding-right: 20px;
}
.receipt-item {
  display: flex;
}
.receipt-tips {
  margin: 0 0 0 64px;
}
.receipt-tips > span {
  margin-right: 15px;
}
.w75 {
  width: 70%;
  font-size: 15px;
}
.w75 * {
  font-size: 15px;
}
.w25 {
  width: 25%;
  font-size: 15px;
  color: #0f5e0f;
  font-weight: bold;
}
</style>
