<template>
  <div class="body">
    <div v-if="activePrint==='标签'" class="cotent"></div>
    <div v-else class="pres">
      <div class="header">
        <div class="ti">
          <div class="left">
            <div class="baracode">
              <!--                    <w-barcode :options="preseObj"></w-barcode>-->
              <svg id="barcode"></svg>
              <!--                    <div class="barnum">{{detailData.preNo}}</div>-->
            </div>
          </div>
          <div class="mid">
            <text class="title">中药处方笺</text>
          </div>
          <div class="rig"><text class="title">{{detailData.presType}}</text></div>
        </div>
        <div class="patiinfo">
          <div class="r1">
            <div class="row"><span class="we">姓名：</span>{{detailData.name}}</div>
            <div class="row"><span class="we">性别：</span>{{detailData.sex}}</div>
            <div class="row"><span class="we">年龄：</span>{{detailData.age}}岁</div>
            <div class="row"><span class="we">电话：</span>{{detailData.contactNumber}}</div>
            <div class="row"><span class="we">当前处方状态：</span>{{detailData.status}}</div>
          </div>
          <div class="r2">
            <div class="row"><span class="we">就诊科室：</span>{{detailData.department}}</div>
            <div class="row"><span class="we">临床诊断：</span>{{detailData.disName}}—{{detailData.symName}}</div>
            <div class="row"><span class="we">开方时间：</span>{{detailData.prescriptionTime}}</div>
          </div>
          <div class="r3"><span class="we">联系地址：</span>{{detailData.address}}</div>
        </div>
      </div>
      <div class="rp">
        <div class="title">
          <text class="text">Rp:</text>
        </div>
        <div class="lists">
          <div class="item"  v-for="(x, i) in detailData.detailList" :key="i">
            <div class="le tag-div">
              <uni-tag :text="x.matName+x.matDose+x.matUnitName" />
            </div>
            <div class="rig">
              <div class="up"> {{x.matUsageName}}</div>
              <div class="do"> {{x.sign}}</div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="js">
            剂数：{{v.number}}
            <div v-if="detailData.daijianCost!==''" class="pies_tips">
              ({{代煎}})
            </div>
          </div>
          <div class="js">{{detailData.dosageForm}}</div>
          <div class="js">{{detailData.prescriptionUsage}}</div>
          <div class="js">每次{{detailData.concentration}}</div>
          <div class="js">{{detailData.frequency}}</div>
          <div class="freque">{{detailData.medicationTime}}</div>
        </div>
        <div class="rp-tips">{{detailData.entrust}}</div>
      </div>
      <div class="amountarea">
        <div class="amount">
          <div class="r1">
            <div class="pijw">药品金额：{{detailData.prescriptionSum}}</div>
          </div>
          <div class="r2">
            <div class="jyf">煎药费：{{detailData.daijianCost}}</div>
            <div class="psf">配送费：{{detailData.distributionCost}}</div>
          </div>
          <div class="r3">
            总金额：{{detailData.prescriptionTotleSum}}
            <!-- <div class="zjw"></div> -->
          </div>
        </div>
        <div class="service">
          <div class="kf"><span class="we">开方：</span>{{detailData.operateList[0].operater || ''}}</div>
          <div class="kf"><span class="we">审核：</span>{{detailData.operateList[1].operater || ''}}</div>
          <div class="kf"><span class="we">调配：</span>{{detailData.operateList[2].operater || ''}}</div>
          <div class="kf"><span class="we">复核：</span>{{detailData.operateList[3].operater || ''}}</div>
          <div class="kf"><span class="we">浸泡：</span>{{detailData.operateList[4].operater || ''}}</div>
          <div class="kf"><span class="we">煎煮：</span>{{detailData.operateList[5].operater || ''}}</div>
          <div class="kf"><span class="we">打包：</span>{{detailData.operateList[6].operater || ''}}</div>
          <div class="kf"><span class="we">发药：</span>{{detailData.operateList[7].operater || ''}}</div>
        </div>
      </div>
      <div class="comment">
        <div class="z">注：</div>
        <text>{{detailData.entrust1111}}</text>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PrintPres"
}
</script>

<style scoped lang="scss">
.content{
  margin: 5px;
  display: flex;
  background-color: #fff;
  flex-direction:column;
  align-items: center;
.header{
  display: flex;
  flex-direction:column;
  margin:16px 16px 0;
.ti{
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  margin-top: 15.22px;
.left{
  display: flex;

.baracode{
  display: flex;
  flex-direction:column;
.barnum{
  font-size: 15px;
  display: flex;
  justify-content:center;
  align-items: center;
  letter-spacing: 0.3em;
}
}
}
.mid{
  display: flex;
  margin-right: 160px;
.title{
  font-size: 23.75px;
  font-weight: 800;
}
}
.rig{
  display: flex;
.title{
  font-size: 16px;
  width: 40px;
  font-weight: 300;
}
}
}
.patiinfo{
  display: flex;
  flex-direction:column;
  margin-top: 25.2px;
  padding-bottom: 21.45px;
  border-bottom: 1px solid #979797;
.r1{
  display: flex;
  flex-direction:row;
  margin-bottom:15px;
.row{
  font-size: 15px;
  font-weight: 400;
  margin-right: 30px;
}
.we{
  color:#999999;
}
}
.r2{
  display: flex;
  flex-direction:row;
  margin-bottom:15px;
.row{
  font-size: 15px;
  font-weight: 400;
  margin-right: 30px;
}
.we{
  color:#999999;
}
}
.r3{
  display: flex;
  flex-direction:row;
  font-size: 15px;
.we{
  color:#999999;
}
}
}
}
.rp{
  display: flex;
  flex-direction:column;
  margin:22.39px 17.36px 0;
  border-bottom: 1px solid #979797;
.title{
  font-size: 22px;
  margin-bottom: 10px;
}
.lists{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content:flex-start;
  align-content:flex-start;
  margin-left:40px;
  height: 545px;
.item{
  display: flex;
  justify-content:center;
  align-items: center;
  margin: 0 15px 20px 0;
.le{
  display: flex;
  font-size: 15px;

}
.tag-view:deep(.uni-tag){
  display: flex;
  justify-content:center;
  align-items: center;
  font-size: 15px;
  padding: 6px 6px;
}
.rig{
  display: flex;
  flex-direction:column;
  margin-left: 5.31px;
.up{
  width: 60px;
  font-size: 12px;
  height: 12.5px;
}
.do{
  width: 60px;
  font-size: 12px;
  height: 12.5px;
}
}
}
}
.footer{
  margin: 0 10px 8px;
  display: flex;
  font-size: 15px;
.js{
  display: flex;
  margin-right: 54.4px;
.pies_tips{}
}
.freque{}
}
.rp-tips{
  display: flex;
  justify-content:flex-end;
  font-size: 15px;
  margin-right: 10px;
}
}
.amountarea{
  display: flex;
  margin: 21.3px 19.38px 0;
  padding-bottom: 20.94px;
  border-bottom: 1px solid #979797;
.amount{
  display: flex;
  flex-direction:column;
.r1{
  border: 1px solid #979797;
  font-size: 15px;
  width: 287.5px;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 33.75px;
}
.r2{
  display: flex;
  justify-content:center;
  align-items: center;
  font-size: 15px;
  height: 33.75px;
  width: 287.5px;
  border-left: 1px solid #979797;
  border-right: 1px solid #979797;
.jyf{

  width: 143.93px;
  display: flex;
  justify-content:center;
  align-items: center;
}
.psf{
  border-left: 1px solid #979797;
  width: 143.93px;
  display: flex;
  justify-content:center;
  align-items: center;
}
}
.r3{
  display: flex;
  justify-content:center;
  align-items: center;
  height: 33.75px;
  font-size: 15px;
  border: 1px solid #979797;
}
}
.service{
  display: flex;
  flex-wrap: wrap;
  margin-left: 60px;
.kf{
  font-size: 15px;
  margin-right: 60px;
  width:90px;
.we{
  font-size: 15px;
  color:#999999;
}
}
}
}

.comment{
  margin: 10px 16px 10px;
  font-size: 15px;
  display: flex;
}
}
</style>
