<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-25 17:16:32
-->
<template>
 <div class="all">
    <div class="tbalede">
        <table class="xxTable">
           <tr>
          <th colspan="5" class="head"> {{ title }}</th>
        </tr>
          <tr v-for="(item, colindex) in columns" :key="colindex">
            <td>
              {{ item.label }}
            </td>
            <td
              v-for="(row, index) in tableData"
              :key="index">
                <span>
                  {{ getQsztName(row[item.prop]) }}
                </span>

                <span>
                  {{ row[item.prop] }}
                </span>

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

<script>
  import { datas } from "./qlxxFormData.js";
  import { getSjlx, getDictLeabel } from "@/utils/dictionary.js";
  import { getLqList } from "@/api/djbDetail.js";
  export default {
    data () {
      return {
        title: "林权登记信息",
        qsztList: datas.columns().qsztList,
        checkList: datas.columns().checkList,
        //传递参数
          bdcdyid: this.$route.query.bdcdyid,
        qllx: this.$route.query.qllx,
        //列表数据
        tableData: [],
        //空列值个数
        emptycolNum: datas.columns().emptycolNum,
        //列名称对象
        columns: datas.columns().LDSYQ,
      };
    },
    created () {
      this.loadData();
    },
    methods: {
      /**
       * @description: loadData
       * @author: renchao
       */
      loadData () {
        if (this.$parent.addRepairRecord) {
          this.columns.unshift({
            prop: "cz",
            label: "操作",
          });
        }
        getLqList({
          bdcdyid: this.bdcdyid,
          qllx: this.qllx,
          qszt: this.checkList,
        }).then((res) => {
          if (res.code === 200) {
            this.tableData = res.result;
            this.tableData.forEach((item) => {
              item.sjlx = getSjlx(item.sjlx);
              item.ldsyqxz = getDictLeabel(item.ldsyqxz, 'A45')
              item.lz = getDictLeabel(item.lz, 'A26')
              item.qy = getDictLeabel(item.qy, 'A52')
            });
            if (this.tableData.length < datas.columns().emptycolNum) {
              this.emptycolNum =
                datas.columns().emptycolNum - this.tableData.length;
            } else {
              this.emptycolNum = 0;
            }
          }
        });
      },
      /**
       * @description: checkChange
       * @author: renchao
       */
      checkChange () {
        if (this.checkList.length === 0) {
          this.tableData = [];
          this.emptycolNum = datas.columns().emptycolNum;
        } else {
          this.loadData();
        }
      },
      /**
       * @description: getQsztName
       * @param {*} code
       * @author: renchao
       */
      getQsztName (code) {
        let name = "";
        for (let item of this.qsztList) {
          if (item.value == code) {
            name = item.label;
            break;
          }
        }
        return name;
      },
      // 新增一条补录信息
      /**
       * @description: 新增一条补录信息
       * @param {*} row
       * @param {*} del
       * @author: renchao
       */
      editDialog (row, del) {
        this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$parent.addRepairRecord(row, del);

            this.$message({
              type: "success",
              message: "补录成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消编辑",
            });
          });
      },
    },
  };
</script>

  <style lang="scss" scoped>
   .all {
  width: 794px;
  height: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.tbalede {
  width: 794px;
  height: 1123px;
  margin: auto;
}
.top {
  width: 80%;
  height: 100px;
  margin: auto;
  display: flex;
  position: relative;
}
p {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
table {
  width: 80%;
  border: 1px solid black;
  margin: 0 auto;
  border-collapse: collapse;
}
.head {
  font-size: 20px;
  width: 100%;
  height: 40px;
  margin: auto;
}
.dyh {
  padding: 10px;
  font-size: 12px;
  text-align: left;
}


.content {
  height: 40px;
}
.slash-wrap {
  position: relative;
  box-sizing: border-box;
  width: 150px;
  height: 40px;
}
/* 斜线 */
.slash1 {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 133px;
  height: 1px;
  background-color: #949393;
  transform: rotate(17.93010235415598deg);
  transform-origin: top left;
}
/* 左下角文字 */
.left {
  position: absolute;
  left: 30px;
  bottom: 5px;
}

/* 右上角文字 */
.mid {
  position: absolute;
  /* 右上角 right:0; top: 0; */
  right: 29px;
  top: 4px;
}
   .xxTable {
            width: 100%;
            border-collapse: collapse;
table-layout:fixed;


            td {
                border: 1px solid rgb(0, 0, 0);
                text-align: center;
                height: 40px;
                width: 80px!important;
                word-wrap:break-word
            }
            td:first-child{
                min-width: 180px !important;
            }

        }
        .ellipsis-line {
  display: inline-block;
  width: 300px;
  height: 100px!important;
  line-height: 20px!important;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>