<!--
 * @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>
      <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,
      checkList: datas.columns().checkList,
      //列表数据
      //空列值个数
      emptycolNum:3,
      //列名称对象
      columns: [],
      datass:[],
    };
  },
  props: {
    propsParam: {
      type: Object,
      default: () => {},
    },
     tableData: {
      type: Array,
      default: () => [],
    },
  },
  created() {
  },
  watch: {
      tableData: {
        handler (newValue, oldValue) {
      this.tableData=newValue
      this.loadData()
        },
      }
  },
  methods: {
    /**
     * @description: loadData
     * @author: renchao
     */
    loadData() {
      getFieldListByQlxx({
        qllx: this.propsParam.qllx
      }).then((res) => {
        if (res.code === 200) {
          this.columns = res.result;

        }
      });

      this.tableData.forEach((item) => {
            item.sjlx = getSjlx(item.sjlx);
          })
         for (let i = 0; i < this.tableData.length; i+=3) {
            this.datass.push(this.tableData.slice(i,i+3))
         }
             let num=this.datass[this.datass.length-1].length
           if (num < 3) {
            this.emptycolNum =
              3 - num;
              this.datass[this.datass.length-1].emptycolNum=true
          } else {
            this.emptycolNum = 0;
          }
    },
  },
};
</script>

<style lang="scss" scoped>
.tbalede {
  width: 794px;
  // height: 1123px;
  margin: auto;
  .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;
    }
  }
}
</style>