<template>
  <view>
    <div class="content" id="pres">
      <div class="header">
        <div class="ti">
          <div class="left">
            <div class="baracode">
              <JsBarcode
                :presno="detailData.preNo"
              ></JsBarcode>
            </div>
          </div>
          <div class="mid">
            中药处方笺
          </div>
          <div class="rig">{{detailData.type=='1'?"中药处方":detailData.type=='2'?"中药制剂":""}}</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.state=="1"?"配药":detailData.state=="2"?"煎药":detailData.state=="3"?"发药":detailData.state=="4"?"配送":""}}</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">
          Rp:
        </div>
        <div class="lists">
          <div class="item"  v-for="(x, i) in detailData.detailList" :key="i">
            <div class="le tag-div">
              <el-tag effect="plain" >{{x.matName}} {{x.matDose}} {{x.matUnitName}}</el-tag>
            </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">
            剂数：{{detailData.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.prescriptionTotalSum}}
            <!-- <div class="zjw"></div> -->
          </div>
        </div>
        <div class="service">
          <div class="kf"><span class="we">开方：</span>{{operateList[0].operater}}</div>
          <div class="kf"><span class="we">审核：</span>{{operateList[1].operater}}</div>
          <div class="kf"><span class="we">调配：</span>{{operateList[2].operater}}</div>
          <div class="kf"><span class="we">复核：</span>{{operateList[3].operater}}</div>
          <div class="kf"><span class="we">浸泡：</span>{{operateList[4].operater}}</div>
          <div class="kf"><span class="we">煎煮：</span>{{operateList[5].operater}}</div>
          <div class="kf"><span class="we">打包：</span>{{operateList[6].operater}}</div>
          <div class="kf"><span class="we">发药：</span>{{operateList[7].operater}}</div>
        </div>
      </div>
      <div class="comment">
        <div class="z">注：</div>
        <div>{{entrust1111}}</div>
      </div>
    </div>
    <el-button class="print" v-print="'#pres'">打 印</el-button>
  </view>
</template>

<script>
import JsBarcode from "@/components/JsBarcode/index.vue";

export default {
  name: "Pres",
  components:{JsBarcode,},
  props: {
    detailData: {
      required: true,
      type: Object
    },
    operateList: {
      required: true,
      type: Array
    },
    entrust1111: {
      required: true,
      type: String
    }
  },
}
</script>

<style scoped lang="scss">
.content{
  margin: 5px;
  background-color: #fff;
  flex-direction:column;
  align-items: center;
  height: 1030px;
  width: 680px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  .header{
    display: flex;
    flex-direction:column;
    //margin:16px 16px 0;
    width: 660px;
    .ti{
      display: flex;
      flex-direction:row;
      justify-content: space-between;
      margin-top: 15px;
      .left{
        align-items: flex-start;
        border-right:0!important;
        //margin-left: 10px;
        .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;
        justify-content:center;
        align-items:center;
        margin-right: 150px;
        font-size: 23.75px;
        font-weight: 800;
      }
      .rig{
        display: flex;
        display: flex;
        justify-content:center;
        //align-items:center;
        font-size: 16px;
        width: 40px;
        font-weight: 300;
      }
    }
    .patiinfo{
      display: flex;
      flex-direction:column;
      margin: 20px 10px 10px;
      padding-bottom: 15px;
      border-bottom: 1px solid #979797;
      .r1{
        display: flex;
        flex-direction:row;
        margin-bottom:5px;
        .row{
          font-size: 12px;
          font-weight: 400;
          margin-right: 30px;
        }
        .we{
          color:#999999;
        }
      }
      .r2{
        display: flex;
        flex-direction:row;
        margin-bottom:5px;
        .row{
          font-size: 12px;
          font-weight: 400;
          margin-right: 30px;
        }
        .we{
          color:#999999;
        }
      }
      .r3{
        display: flex;
        flex-direction:row;
        font-size: 12px;
        .we{
          color:#999999;
        }
      }
    }
  }
  .rp{
    display: flex;
    flex-direction:column;
    width: 640px;
    align-items:flex-start;
    border-bottom: 1px solid #5a5e66;
    margin:0px 10px 10px;
    .title{
      display: flex;
      //margin:10px 10px 10px;
      //padding: 10px 20px;
      font-size: 22px;
      //margin-bottom: 10px;

    }
    .lists{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content:flex-start;
      align-content:flex-start;
      margin:10px 20px;
      height: 515px;
      .item{
        display: flex;
        justify-content:center;
        width: 150px;
        align-items: center;
        margin: 0 0 10px 0;
        .le{
          display: flex;
          font-size: 15px;
        }
        .tag-view.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 10px;
      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: 0 10px 0;
    padding-bottom: 5px;
    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: 30px;
      }
      .r2{
        display: flex;
        justify-content:center;
        align-items: center;
        font-size: 15px;
        height: 30px;
        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;
          height: 30px;
        }
        .psf{
          border-left: 1px solid #979797;
          width: 143.93px;
          display: flex;
          justify-content:center;
          align-items: center;
          height: 30px;
        }
      }
      .r3{
        display: flex;
        justify-content:center;
        align-items: center;
        height: 30px;
        font-size: 15px;
        border: 1px solid #979797;
      }
    }
    .service{
      display: flex;
      flex-wrap: wrap;
      margin-left: 20px;
      .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>
