<template>
  <div id="list-print" class="list-print">
    <div v-for="(i, index) in pageArr.length" :key="index">
      <div class="listTitle">
        {{ $store.getters.xt_user.org.org_name }}费用清单
      </div>
      <!-- <div class="listTitle" :style="{position: 'absolute',top:(20 + (index * 160))  + 'px',left:200+ 'px',}">赤峰市肿瘤医院病人费用明细清单</div> -->
      <div class="listInfo">
        <div>个人编号:{{order.psn_no}}</div>
        <div>住院号：{{ patient.dialysis_no }}</div>
        <div>次数：</div>
        <div>姓名：{{ patient.name }}</div>
        <div>性别：{{ patient.gender == 1 ? "男" : "女" }}</div>
      </div>

      <div class="listInfo">
        <div>入院科室：</div>
        <div>出院科室：</div>
        <div>入院日期：</div>
        <div>出院日期：</div>
        <div>住院天数：</div>
      </div>

      <div
        class="listInfo"
        style="padding-bottom: 10px; border-bottom: 1px solid"
      >
        <div>出院诊断：</div>
        <div>床位号：</div>
        <div>费别：</div>
      </div>

      <table
        class="listTable"
        border="1"
        frame="hsides"
        rules="none"
        cellspacing="0"
      >
        <tr style="border: 1px solid">
          <td style="width: 19%">账单名称：床位费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>
        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr>
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>

        <tr style="border: 1px solid">
          <td style="width: 19%">账单名称：护理费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>

        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr>
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>

        <tr style="border: 1px solid">
          <td style="width: 19%">账单名称：化验费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>

        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr>
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>

        <tr style="border: 1px solid; page-break-after: always">
          <td style="width: 19%">账单名称：检查费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>

        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr>
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>

        <tr style="border: 1px solid">
          <td style="width: 19%">账单名称：麻醉费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>

        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr>
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>

        <tr style="border: 1px solid">
          <td style="width: 19%">账单名称：其他费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>

        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr>
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>

        <tr style="border: 1px solid">
          <td style="width: 19%">账单名称：取暖费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>

        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr style="page-break-after: always">
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>

        <tr style="border: 1px solid">
          <td style="width: 19%">账单名称：手术费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>

        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr>
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>

        <tr style="border: 1px solid">
          <td style="width: 19%">账单名称：西药费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>

        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr>
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>

        <tr style="border: 1px solid">
          <td style="width: 19%">账单名称：治疗费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>

        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr>
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>

        <tr style="border: 1px solid">
          <td style="width: 19%">账单名称：中成药费</td>
          <td style="width: 31%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 10%">金额(元)</td>
        </tr>

        <tr v-for="item in list.slice(index * 13, index * 13 + pageArr[index])">
          <td style="width: 19%"></td>
          <td style="width: 31%"></td>
          <td style="width: 14%">{{ item.spec }}</td>
          <td style="width: 10%">{{ item.med_chrgitm_type }}</td>
          <td style="width: 10%">{{ item.price.toFixed(2) }}</td>
          <td style="width: 6%">{{ item.count }}{{ item.unit }}</td>
          <td style="width: 10%">{{ (item.price * item.count).toFixed(2) }}</td>
        </tr>
        <tr>
          <td style="width: 19%">甲类：</td>
          <td style="width: 31%">乙类药品：</td>
          <td style="width: 14%">非药品：</td>
          <td style="width: 10%">丙类：</td>
          <td style="width: 10%">其他：</td>
          <td></td>
          <td style="width: 6%">小计：</td>
        </tr>
      </table>
      <table
        class="listTable"
        border="1"
        frame="below"
        rules="none"
        cellspacing="0"
      >
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>总费用：</td>
        </tr>

        <tr>
          <td>报销类别费用合计</td>
          <td>甲类：</td>
          <td>乙类药品：</td>
          <td>丙类：</td>
          <td></td>
          <td>其他：</td>
        </tr>
      </table>
      <div class="tableBottom">
        <!-- <div class="tableBottomOne">制表人：{{ admin.user_name }}</div> -->
        <div class="tableBottomOne">制表日期：{{ getNowTime() }}</div>
        <!-- <div class="tableBottomOne">总费用：{{ order.medfee_sumamt }}元</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { uParseTime } from "@/utils/tools";

export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    patient: {
      type: Object,
      default: function () {
        return {};
      },
    },
    order: {
      type: Object,
      default: function () {
        return {};
      },
    },
    admin: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      page: 1,
      pageArr: [],
    };
  },
  // mounted(){
  //     this.getPage()
  // },
  methods: {
    getNowTime: function () {
      let dateTime;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      dateTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      return dateTime;
    },
    getTimes(time) {
      return uParseTime(time, "{y}-{m}-{d}");
    },
    getPage() {
      if (this.list.length <= 13) {
        this.page = 1;
        this.pageArr.push(this.list.length);
      } else if (this.list.length > 13) {
        this.page = parseInt(this.list.length / 13);
        let num = this.list.length % 13;
        for (var i = 0; i < this.page; i++) {
          this.pageArr.push(13);
        }
        if (num != 0) {
          this.pageArr.push(num);
        }
      }

      console.log(this.pageArr, "this.pageArr");
    },
  },
  watch: {
    list: {
      handler(newVal) {
        this.getPage();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.list-print {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
    0 0 60px rgba(0, 0, 0, 0.06) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
    0 0 40px rgba(0, 0, 0, 0.06) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  margin-bottom: 20px;
  padding: 20px 10px;
}
.listTitle {
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}
.listInfo {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  margin: 10px 0;
}
.listTable {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  line-height: 40px;
  font-size: 14px;
  border-color: #000;
  text-align: left;
}
.listTable tr td {
  padding: 0 5px;
}
.tableBottom {
  font-size: 16px;
  display: flex;
  margin-top: 20px;
}
.tableBottomOne {
  margin-right: 40px;
}
</style>
