<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-24 16:15:50
-->
<template>
  <div class="djxxTable" :style="{'max-height': this.timeLineHeight + 'px' }"
    style="overflow-y:scroll;">
    <div class="tableBox">
      <div class="title">
        <span>{{ title }}</span>
      </div>
      <div class="xxTableBox">
        <table class="xxTable">
          <tr>
            <td></td>
            <td>变更前</td>
            <td>变更后</td>
          </tr>
          <tr 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' : '',
                row.qlzt == '4' ? 'linshi' : '',

                item.prop == 'qszt' && row.qlzt == '3' ? 'linshiIcon' : '',
                item.prop == 'qszt' && row.qlzt == '2' ? 'linshiIcon' : '',
                item.prop == 'qszt' && row.qlzt == '1' ? 'xianshiIcon' : '',
                item.prop == 'qszt' && row.qlzt == '4' ? 'zhuxiaoIcon' : ''
              ]">
              <div class="icon" v-if="item.prop == 'qszt' &&row.qlzt == '1'">
                有效
              </div>
              <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '2'">
                正在补录
              </div>
              <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '3'">
                正在申请
              </div>
              <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '4'">
                正在注销
              </div>

              <p v-if="!['djyy','fj'].includes(item.prop)">
                <span v-if="item.prop == 'qszt'">
                  {{ getQsztName(row[item.prop]) }}
                </span>
                <span v-else>{{ row[item.prop] }}</span>
              </p>

              <el-tooltip v-else effect="dark" :content="row[item.prop]" placement="top" popper-class="tooltip-width">
                <span class="ellipsis-line">
                  {{ row[item.prop] }}
                </span>
              </el-tooltip>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import { getFdcqLSInfo } from "@/api/djbDetail.js";
  import { datas } from "@/views/registerBook/qlxxFormData.js";

  export default {
    data () {
      return {
        title: "房地产权登记信息（独幢、层、套、间房屋）",
        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: {
      /**
       * @description: loadData
       * @author: renchao
       */
      loadData () {
        var formdata = new FormData();
        formdata.append("bsmSldy", this.propsParam.formData.bsmSldy);
        formdata.append("qllx", this.propsParam.formData.qllx);
        formdata.append("isEdit", this.ableOperation);
        getFdcqLSInfo(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;
            }
          }
        });
      },
      /**
       * @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;
      },
    },
  };
</script>

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