<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-24 16:15:01
-->
<template>
  <div id="box">
    <div
      class="tbalede"
      v-for="(el, indexx) in datass"
      :key="indexx"
      style="page-break-after: always"
    >
      <div class="title">{{ title }}</div>
      <div class="num">共{{ datass.length }}页，第{{ indexx + 1 }}页</div>
      <table class="xxTable">
        <tr v-for="item in columns" :key="item.name">
          <td>
            {{ item.despriction }}
          </td>
          <td v-for="(row, index) in el" :key="index + '2'">
            {{ row[item.name] }}
          </td>

          <td
            v-show="el.emptycolNum"
            v-for="count in emptycolNum"
            :key="count"
          ></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { datas } from "./qlxxFormData.js";
import { getSjlx } from "@/utils/dictionary.js";
import { getFieldListByQlxx } from "@/api/SysDjbFieldDO.js";

export default {
  data() {
    return {
      title: this.$parent.title,
      //列表数据
      //空列值个数
      emptycolNum: 4,
      //列名称对象
      columns: [],
      datass: [],
    };
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    render: {
      type: Boolean,
      default: false,
    },
  },
  created() {},
  watch: {
    tableData: {
      handler(newValue, oldValue) {
        this.tableData = newValue;
      },
    },
    render: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.loadData();
        }
      },
    },
    immediate: true,
    deep: true,
  },
  methods: {
    /**
     * @description: loadData
     * @author: miaofang
     */
    loadData() {
      getFieldListByQlxx({
        qllx: this.tableData[0].qllx,
      }).then((res) => {
        if (res.code === 200) {
          this.columns = res.result;
        }
      });
      if (this.tableData.length && this.datass.length == 0) {
        for (let i = 0; i < this.tableData.length; i += 4) {
          this.datass.push(this.tableData.slice(i, i + 4));
        }
        let num = this.datass[this.datass.length - 1].length;
        if (num < 4) {
          this.emptycolNum = 4 - num;
          this.datass[this.datass.length - 1].emptycolNum = true;
        } else {
          this.emptycolNum = 0;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tbalede {
  width: 100%;
  margin: auto;
  position: relative;
  .num {
   position: absolute;
   right: 10px;
   top: 0px;
  }
  .title {
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    height: 62px;
    line-height: 62px;
    position: relative;
    margin: 0 3px;
  }
  .xxTable {
    width: 100%;
    border-collapse: collapse;

    tr td {
      border: 2px solid rgb(227, 226, 226);
      text-align: center;
      height: 40px;
      font-size: 13px;
      min-width: 80px;
      z-index: 1;
      min-width: 80px;
      padding: 5px;
    }
    td {
      width: 20px !important;
      word-break: break-all;
      //       /* 方法一：使用 word-break */
      // word-break: break-all;
      // // /* 方法二：使用 white-space */
      // // white-space: pre-wrap;
      // // /* 方法三：使用 overflow-wrap */
      // // overflow-wrap: break-word;
    }
  }
}
</style>