<template>
  <div id="statement-print" class="statement-print">
    <table class="statementTable" border="0">
      <thead>
        <tr>
          <td colspan="10">石狮圣誉血液透析中心结算单</td>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td colspan="10">日期区间：</td>
        </tr>
        <tr class="view_tr">
          <td colspan="2">姓名：</td>
          <td colspan="2">性别：</td>
          <td colspan="2">医保类型：</td>
          <td colspan="2">社会保障号码：</td>
          <td colspan="2">账号余额：</td>
        </tr>
        <tr class="view_tr">
          <td colspan="10">明细信息</td>
        </tr>

        <!-- 帐单列表分为左右两列，需要对数据进行x/2分别放进list_L，list_R两个数组进行循环 -->
        <tr>
          <td colspan="6">
            <table class="list_table">
              <tr colspan="6" v-for="(item, index) in list_L" :key="index">
                <td colspan="2">药名</td>
                <td>规格</td>
                <td>数量</td>
                <td>价格</td>
              </tr>
            </table>
          </td>

          <td colspan="4">
            <table class="list_table">
              <tr colspan="4" v-for="(item, index) in list_R" :key="index">
                <td colspan="2">药名</td>
                <td>规格</td>
                <td>数量</td>
                <td>价格</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="10">共一页，第一页419.32</td>
        </tr>
        <tr class="dashed_tr">
          <td colspan="10">结付分类</td>
        </tr>
        <tr>
          <td colspan="10">
            <div>费用总计：</div>
            <div>统筹支付：</div>
            <div>账户支付：</div>
            <div>个人现金支付：</div>
            <div>其他支付：</div>
            <div>减免金额：</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: function () {
        return {};
      },
    },
    p_admin: {
      type: Object,
      default: function () {
        return {};
      },
    },
    charge_admin: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      list_L: [1,2],
      list_R: [1,2],
    };
  },
  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;
    },
    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;
    },
  },
};
</script>


<style lang="scss" scoped>
.statement-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;
}

.statementTitle {
  font-size: 28px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.statementTable {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  line-height: 40px;
  font-size: 14px;
}
.statementTable thead{
  font-size: 28px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.statementTable tbody{
    text-align: left;
}
tbody .view_tr{
    border: 1px solid;
    text-align: center;
}
.list_table{
    width: 100%;
    margin-bottom: 100px;
}
tbody .dashed_tr{
    border: 1px dashed;
    text-align: center;
}
tbody tr td div{
    height: 25px;
}
</style>
