 <template>
  <div id="list-print" class="list-print">
    <div v-for="(i, index) in pageArr.length" :key="index">
      <TABLE
        class="listTable"
        border="0"
        cellspacing="0"
        style="font-size: 14px"
        align="center"
      >
        <THEAD style="display: table-header-group; font-weight: bold;border-bottom: 1px solid;">
          <TR
            ><TD colspan="4" align="center" style="font-size: 20px"
              >{{ $store.getters.xt_user.org.org_name }}费用清单</TD
            ></TR>
          
          <TR>
            <TD colspan="1">个人编码:{{ order.psn_no }}</TD>
            <TD>住院号：{{ order.mdtrt_id }}</TD>
            <TD>姓名：{{ order.psn_name }}</TD>
            <TD>性别：{{ patient.gender == 1 ? "男" : "女" }}</TD>
          </TR>
          <TR>
            <TD> 入院科室：血液透析室 </TD>
            <TD> 出院科室：血液透析室 </TD>
          </TR>
          <TR>
            <TD> 出院诊断：尿毒症 </TD>
            <TD> 床位号： </TD>
            <TD v-if="order && order.insutype == '390'">
              费别：城乡居民基本医疗保险
            </TD>
            <TD v-if="order && order.insutype == '310'">
              费别：职工基本医疗保险
            </TD>
            <TD></TD>
          </TR>
        </THEAD>
        <TBODY style="text-align: center">
          <TR>
            <TD colspan="4">
              <Table
                class="listTable"
                border="1"
                frame="hsides"
                rules="none"
                v-for="item in list"
                :key="item"
                cellspacing="0"
              >
                <TR style="border: 1px solid">
                  <TD width="80"
                    >账单名称：{{ item.med_chrgitm_name }}</TD
                  >
                  <TD width="80">费用名称</TD>
                  <TD width="150">规格</TD>
                  <TD width="80">类别</TD>
                  <TD width="80">单价(元)</TD>
                  <TD width="80">数量</TD>
                  <TD width="80">金额(元)</TD>
                </TR>
                <TR v-for="subItem in item.details" :key="subItem">
                  <TD style="white-space: nowrap">{{
                    subItem.name
                  }}</TD>
                  <TD style="white-space: nowrap"></TD>
                  <TD >{{ subItem.spec }}</TD>
                  <TD style="white-space: nowrap">{{
                    subItem.medicine_insurance_kind
                  }}</TD>
                  <TD>{{ subItem.price.toFixed(2) }}</TD>
                  <TD style="white-space: nowrap"
                    >{{ subItem.count }}{{ subItem.unit }}</TD
                  >
                  <TD>{{
                    (subItem.price * subItem.count).toFixed(2)
                  }}</TD>
                </TR>
                <TR>
                  <TD style="white-space: nowrap"
                    >甲类：{{ item.jiaTotal ? item.jiaTotal : "0.00" }}</TD
                  >
                  <TD style="width: 20%; white-space: nowrap"
                    >乙类：{{ item.yiTotal ? item.yiTotal : "0.00" }}</TD
                  >
                  <TD style="width: 5%; white-space: nowrap"
                    >丙类：{{ item.bingTotal ? item.bingTotal : "0.00" }}</TD
                  >
                  <TD style="width: 5%; white-space: nowrap"
                    >其他：{{ 0.0 }}</TD
                  >
                  <TD></TD>
                  <TD style="width: 20%; white-space: nowrap"
                    >小计：{{ item.total }}</TD
                  >
                  <TD></TD>
                </TR>
              </Table>
            </TD>
          </TR>
          <TR>
            <TD colspan="4">
              <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>总费用：{{ order.medfee_sumamt }}</TD>
                </TR>
                <TR>
                  <TD>报销类别费用合计</TD>
                  <TD>甲类：{{ getJaiTotal() ? getJaiTotal() : "0.00" }}</TD>
                  <TD>乙类：{{ getYiTotal() ? getYiTotal() : "0.00" }}</TD>
                  <TD>丙类：{{ getBingTotal() ? getBingTotal() : "0.00" }}</TD>
                  <TD></TD>
                  <TD>其他：0.00</TD>
                </TR>
              </Table>
            </TD>
          </TR>
        </TBODY>
        <TFOOT style="display: table-header-group; font-weight: bold">
          <TR>
            <TD colspan="4">制表日期：{{ getNowTime() }}</TD>
          </TR>
        </TFOOT>
      </TABLE>
    </div>
  </div>
</template>

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

export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    patient: {
      type: Object,
      default: function () {
        return {};
      },
    },
    hospital_record: {
      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: {
    getDay(dateString1, dateString2) {
      var startDate = Date.parse(dateString1);
      var endDate = Date.parse(dateString2);
      if (startDate > endDate) {
        return 0;
      }
      if (startDate == endDate) {
        return 1;
      }
      var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
      return days;
    },
    getJaiTotal() {
      var total = 0;
      for (let i = 0; i < this.list.length; i++) {
        total = parseFloat(total) + parseFloat(this.list[i].jiaTotal);
      }
      return total.toFixed(2);
    },
    getYiTotal() {
      var total = 0;
      for (let i = 0; i < this.list.length; i++) {
        total = parseFloat(total) + parseFloat(this.list[i].yiTotal);
      }
      return total.toFixed(2);
    },
    getBingTotal() {
      var total = 0;
      for (let i = 0; i < this.list.length; i++) {
        total = parseFloat(total) + parseFloat(this.list[i].bingTotal);
      }
      return total.toFixed(2);
    },

    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.list, "lisy");
      console.log(this.pageArr, "this.pageAr");
    },
  },
  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 thead {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  line-height: 40px;
  font-size: 14px;
  border-color: #000;
  text-align: left;
}
.listTable thead tr td {
  padding: 0 5px;
}
.tableBottom {
  font-size: 16px;
  display: flex;
  margin-top: 20px;
}
.tableBottomOne {
  margin-right: 40px;
}
</style>
