<!--
 * @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="xxxTable">
        <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) {
          console.log("newValue", newValue);
          console.log("columns", this.columns);
          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;
            console.log("columnssssssssssss", this.columns);
          }
        });
        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;
    background-color: salmon;
    .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;
    }
    .xxxTable {
      width: 100%;
      border-collapse: collapse;

      tr td {
        border: 1px solid rgb(139, 137, 137);
        text-align: center;
        height: 40px;
        font-size: 14px;
        min-width: 80px;
        z-index: 1;
        min-width: 80px;
        padding: 5px;
      }
      td {
        width: 20px !important;
        word-break: break-all;
      }
    }
  }


</style>