<template>
  <div class="print-content">
    <!-- <div v-for="(im, inx) in taData" :key="inx"> -->
    <div class="table-container">
      <div class="print-header">
        {{ userName }}
      </div>
      <table class="printTable" border="1" style="table-layout: auto">
        <thead>
          <tr style="height:50px;border-right: none;">
            <th></th>
          </tr>
          <tr>
            <th
              v-for="(item, index) in tableHeader"
              :key="index"
              :style="{ minWidth: item.minWidth + 'px' }"
            >
              {{ item.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in taData" :key="index">
            <td v-for="(itm, idx) in tableHeader" :key="idx">
              <span v-if="itm.value == 'iFas'">
                <span v-if="item.isFas == '0'">否</span>
                <span v-if="item.isFas == '1'">是</span>
              </span>
              <span v-if="itm.value == 'serial'"> {{ index + 1 }}</span>
              <span v-else> {{ item[itm.value] }}</span>
            </td>
          </tr>
          <tr>
            <td>合计</td>
            <td colspan="5">{{ chaseData() }}</td>
            <td>{{ amtNumber() }}</td>
            <td colspan="7"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="fot-val">
      {{ tableLabel }}
      <br />
      <br />
      &nbsp; &nbsp; &nbsp; &nbsp;{{ time }}
    </div>
    <!-- <div style="page-break-after: always"></div> -->
    <!-- </div> -->
  </div>
</template>
<script>
import { numberToChineseAmount } from "@/utils/utils";
import moment from "moment";
export default {
  components: {},
  data() {
    return {
      tableLabel: "",
      taData: [],
      userName: "",
      numBeroMount: "",
      time: ""
    };
  },
  props: {
    tableHeader: {
      type: Array,
      default: []
    },
    tableData: {
      type: Array,
      default: []
    }
  },
  methods: {
    paginData(arr, num) {
      let newArr = [];
      for (let i = 0; i < arr.length; ) {
        //注意：这里与for循环不太一样的是，没有i++
        newArr.push(arr.slice(i, (i += num)));
      }
      return newArr;
    },
    amtNumber() {
      let nub = 0;
      this.taData.forEach(item => {
        nub += Number(item.amt);
      });
      let pasNub = parseFloat(nub.toFixed(4));
      return pasNub + "元";
    },
    chaseData() {
      let nub = 0;
      this.taData.forEach(item => {
        nub += Number(item.amt);
      });
      let pasNub = parseFloat(nub.toFixed(4));
      let newNub = numberToChineseAmount(pasNub);
      return newNub;
    }
  },
  mounted() {
    let stopTime = moment(new Date()).format("YYYY-MM-DD");
    this.time = stopTime;
    this.userName =
      this.$route.query.branchName +
      "----" +
      this.$route.query.stmtPrd +
      "---结算单";
    this.tableLabel = this.$store.state.user.username;
    // let newData = this.paginData(this.tableData, 5);
    this.taData = this.tableData;
  }
};
</script>

<style scoped lang="scss">
.printTable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0px;
  tr {
    td {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }

    th {
      padding: 3px;
    }
  }
}
</style>
<style media="print" lang="scss">
@media print {
  html {
    zoom: 75%;
  }
  @page {
    size: auto;
    /* 重置页面大小，避免出现空白页 */
    margin-top: 10mm;
    /* 取消页眉 */
    margin-left: 6mm;
    /* 取消默认的左右页边距 */
    margin-right: 45mm;
    /* 取消默认的左右页边距 */
  }
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
}

.fot-val {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 50px;
}

.print-header {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
}
.table-container {
  position: relative;
}
.print-header {
}
</style>
