<template>
  <div class="all">
    <div class="tbalede">
      <div class="title">
        {{ title }}
      </div>
      <table class="xxTable">
        <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 v-if="['djyy','fj'].includes(item.prop)">
              {{ row[item.prop] }}
            </span>

            <span v-if="(item.prop !== 'qszt' && item.prop !== 'djyy'&& item.prop !== 'fj') && !judge(item.label)">
              {{ row[item.prop] }}
            </span>
            <div v-if="judge(item.label)">
              <div v-for="(label, index) in row.djQlxxFdcqxmDoList" :key="index">
                {{ label[item.prop] }}
              </div>
            </div>
          </td>
          <td v-for="count in emptycolNum" :key="~count"></td>
        </tr>
      </table>
    </div>
    <div class="tbalede">
      <div class="title">
        {{ title }}
      </div>
      <table class="xxTable">
        <tr v-for="(item, colindex) in columns" :key="colindex">
          <td>
            {{ item.label }}
          </td>
          <td v-for="(row, index) in tableData" :key="index">
            <span class="ooo" v-if="item.prop == 'qszt'">
              {{ getQsztName(row[item.prop]) }}
            </span>

            <el-tooltip v-if="['djyy','fj'].includes(item.prop)">
              <span>
                {{ row[item.prop] }}
              </span>
            </el-tooltip>

            <span v-if="(item.prop !== 'qszt' && item.prop !== 'djyy'&& item.prop !== 'fj') && !judge(item.label)">
              {{ row[item.prop] }}
            </span>
            <div v-if="judge(item.label)">
              <div v-for="(label, index) in row.djQlxxFdcqxmDoList" :key="index">
                {{ label[item.prop] }}
              </div>
            </div>
          </td>
          <td 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 { getFdcq1List } 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().FDCQ1,
      };
    },
    created () {
      this.loadData();
    },
    methods: {
      /**
       * @description: loadData
       * @author: renchao
       */
      loadData () {
        if (this.$parent.addRepairRecord) {
          this.columns.unshift({
            prop: "cz",
            label: "操作"
          })
        }
        getFdcq1List({
          bdcdyid: this.bdcdyid,
          qllx: this.qllx,
          qszt: this.checkList,
        }).then((res) => {
          if (res.code === 200) {
            this.tableData = res.result;
            this.tableData.forEach(item => {
              this.tableData.push(item)
              item.sjlx = getSjlx(item.sjlx)

            })
            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: judge
       * @param {*} lable
       * @author: renchao
       */
      judge (label) {
        if ('项目名称幢号总层数规划用途用途名称批准用途实际用途房屋结构房屋结构名称建筑面积竣工时间总套数'.indexOf(label) > -1) {
          return true
        } else {
          return false
        }
      },
      // 新增一条补录信息
      /**
       * @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);
    overflow: hidden;
  }
  .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;
    }
  }
  .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;

    tr td {
      border: 2px solid rgb(227, 226, 226);
      text-align: center;
      height: 40px;
      font-size: 13px;
      // flex: 1;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      min-width: 80px;
      z-index: 1;
      .ooo {
        width: 190px !important;
      }
    }
    td:first-child {
      flex: inherit !important;
      // 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>