<template>
  <div class="djxxTable" :style="{'max-height': this.timeLineHeight + 'px' }"
       style="overflow-y:scroll;">
    <div class="tableBox" >
      <div class="title">
        <span v-if="this.propsParam.formData.qllx=='A04' || this.propsParam.formData.qllx=='A06' || this.propsParam.formData.qllx=='A08'">{{ title }}</span>
        <span v-if="this.propsParam.formData.qllx=='A03' || this.propsParam.formData.qllx=='A05' || this.propsParam.formData.qllx=='A07'">{{ ydTitile }}</span>
      </div>
      <div class="xxTableBox">
        <table class="xxTable">
          <tr>
            <td></td>
            <td>变更前</td>
            <td>变更后</td>
          </tr>
          <tr v-if="this.propsParam.formData.qllx=='A04' || this.propsParam.formData.qllx=='A06' || this.propsParam.formData.qllx=='A08'" v-for="(item, colindex) in columns" :key="colindex">
            <td>
              {{ item.label }}
            </td>
            <td
              v-for="(row, index) in tableData"
              :key="index"
              :class="[
                row.qszt == '2' ? 'lishi' : '',
                row.qszt == '0' ? 'linshi' : '',
                item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
              ]"
            >
              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
                正在办理
              </div>
              <span v-if="item.prop == 'qszt'">
                {{ getQsztName(row[item.prop]) }}
              </span>

              <span v-else> {{ row[item.prop] }}</span>
            </td>
          </tr>
          <tr v-if="this.propsParam.formData.qllx=='A03' || this.propsParam.formData.qllx=='A05' || this.propsParam.formData.qllx=='A07'" v-for="(item, colindex) in tdColumns" :key="colindex">
            <td>
              {{ item.label }}
            </td>
            <td
              v-for="(row, index) in tableData"
              :key="index"
              :class="[
                row.qszt == '2' ? 'lishi' : '',
                row.qszt == '0' ? 'linshi' : '',
                item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
              ]"
            >
              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
                正在办理
              </div>
              <span v-if="item.prop == 'qszt'">
                {{ getQsztName(row[item.prop]) }}
              </span>

              <span v-else> {{ row[item.prop] }}</span>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import {getFdcqLSInfo} from "@/api/registerBook.js";
import { datas } from "@/views/registerBook/qlxxFormData.js";
export default {
  data() {
    return {
      title: "房地产权登记信息（独幢、层、套、间房屋）",
      ydTitile: "土地使用权登记信息",
      qsztList: datas.columns().qsztList,
      checkList: datas.columns().checkList,
      //传递参数
      propsParam: this.$attrs,
      //列表数据
      tableData: [],
      //空列值个数
      emptycolNum: 1,
      //列名称对象
      columns: datas.columns().FDCQ2,
      tdColumns: datas.columns().JSYDSYQ

    };
  },
  created() {
    this.loadData();
  },
  mounted() {
    this.timeLineHeight = document.documentElement.clientHeight - 210;
    window.onresize = () => {
      this.timeLineHeight = document.documentElement.clientHeight - 210;
    };
  },
  methods: {
    loadData() {
      getFdcqLSInfo(this.propsParam.formData).then((res) => {
        if (res.code === 200) {
          this.tableData = res.result;
          if (this.tableData.length < datas.columns().emptycolNum) {
            this.emptycolNum =
              datas.columns().emptycolNum - this.tableData.length;
          } else {
            this.emptycolNum = 0;
          }
        }
      });
    },
    checkChange() {
      if (this.checkList.length === 0) {
        this.tableData = [];
        this.emptycolNum = datas.columns().emptycolNum;
      } else {
        this.loadData();
      }
    },
    getQsztName(code) {
      let name = "";
      for (let item of this.qsztList) {
        if (item.value == code) {
          name = item.label;
          break;
        }
      }
      return name;
    },
  },
};
</script>

<style lang="scss" scoped>
  @import "~@/views/registerBook/qlxxCommon.scss";
</style>