<template>
  <div class="medicine">
    <div class="medicine-box">
      <div class="col">行{{ rowNumber | convertToChinaNum }} </div>
      <div class="row">
        <div class="row-name">列{{ item.columnNumber | convertToChinaNum }}</div>
        <div class="row-title">柜号：{{ item.containerNumber }}</div>
        <div class="row-content" v-if="item.preData">
          <div>
            患者：{{ item.preData.patient }};{{ item.preData.sex }}， {{ item.preData.age }}岁
          </div>
          <div>出生日期：{{ item.preData.dateOfBirth }}</div>
          <div>类型：{{ item.preData.type }}</div>
          <div>剂数：{{ item.preData.dosage }}</div>
          <div>处方号：{{ item.preData.preNo }}</div>
        </div>
      </div>
    </div>
    <slot></slot>

  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rowNumber: {
      type: Number,
      default: ''
    }
  },
  filters: {
    convertToChinaNum(num) {
      var arr1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
      var arr2 = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿'];//可继续追加更高位转换值
      if (!num || isNaN(num)) {
        return "零";
      }
      var english = num.toString().split("")
      var result = "";
      for (var i = 0; i < english.length; i++) {
        var des_i = english.length - 1 - i;//倒序排列设值
        result = arr2[i] + result;
        var arr1_index = english[des_i];
        result = arr1[arr1_index] + result;
      }
      //将【零千、零百】换成【零】 【十零】换成【十】
      result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十');
      //合并中间多个零为一个零
      result = result.replace(/零+/g, '零');
      //将【零亿】换成【亿】【零万】换成【万】
      result = result.replace(/零亿/g, '亿').replace(/零万/g, '万');
      //将【亿万】换成【亿】
      result = result.replace(/亿万/g, '亿');
      //移除末尾的零
      result = result.replace(/零+$/, '')
      //将【零一十】换成【零十】
      //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
      //将【一十】换成【十】
      result = result.replace(/^一十/g, '十');
      return result;
    }

  },
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.medicine {
  // margin-bottom: 20px;
}

.medicine-box {
  width: 252px;
  height: 203px;
  background: #F7FFFE;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #DBE8E6;
  display: flex;

  .col {
    width: 26px;
    font-weight: 400;
    font-size: 14px;
    color: #444444;
    text-align: center;
    border-right: 1px solid #DBE8E6;
    writing-mode: vertical-rl;
    word-spacing: 2px;

  }

  .row {
    flex: 1;

    &-name {
      height: 26px;
      line-height: 26px;
      text-align: center;
      color: #444444;
      font-weight: 400;
      font-size: 14px;
    }

    &-title {
      height: 30px;
      line-height: 30px;
      background: #D5EDE9;
      text-align: center;
      font-weight: 500;
      font-size: 15px;
      color: #333333;
    }

    &-content {
      padding-top: 5px;
      padding-left: 13px;

      &>div:first-child {
        font-weight: 500;
        font-size: 15px;
        color: #333333;
      }

      &>div {
        line-height: 28px;
        font-weight: 400;
        font-size: 15px;
        color: #333333;
      }
    }
  }
}
</style>
