<!--
 * @Description:
 * @Autor: miaofang
 * @LastEditTime: 2023-09-15 10:58:42
-->
<template>
  <div class="djxxTable">
    <!-- <div v-show="false">
      <printTemplate
        id="boxfdcq"
        :tableData="tableData"
        :render="render" />
    </div> -->
    <djbDetail :title="title" :shows="shows" :propsParam="propsParam"
      :columns="columns" :tableData="tableData" />
    <!-- <div class="tableBox">
      <div class="title">
        {{ title }}
        <el-button class="print" v-show="shows" @click="openPrint()">打印</el-button>
        <div class="checkbox">
          <el-checkbox-group v-model="checkList" @change="checkChange">
            <el-checkbox
              v-for="item in qsztList"
              :key="item.value"
              :label="item.value">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="xxTableBox rollTable">
        <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"
              :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="setbut"
                v-if="item.prop == 'cz' && row.sjlx != '系统数据'">
                <el-button
                  type="text"
                  icon="el-icon-edit-outline"
                  @click="editDialog(row)">编辑</el-button>
                <el-button
                  type="text"
                  icon="el-icon-edit-outline"
                  @click="editDialog(row, 'D')">删除</el-button>
              </div>
              <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>
            <td v-for="count in emptycolNum" :key="~count"></td>
          </tr>
        </table>
      </div>
    </div> -->
  </div>
</template>
<script>
  import { datas } from "./qlxxFormData.js";
  import { getSjlx } from "@/utils/dictionary.js";
  import { getFdcq2List } from "@/api/djbDetail.js";
  import djbDetail from "./components/djbDetail.vue"
  import printTemplate from "./components/printTemplate.vue";
  export default {
    components: {
      printTemplate,
      djbDetail
    },

    data () {
      return {
        shows: false,
        title: "房地产权登记信息（独幢、层、套、间房屋）",
        //传递参数
        propsParam: this.$attrs,
        //列表数据
        tableData: [],
        //列名称对象
        columns: datas.columns().FDCQ2,
        // qsztList: datas.columns().qsztList,
        render: false,
        // checkList:datas.columns().checkList,
        //空列值个数
        // emptycolNum: datas.columns().emptycolNum
      };
    },
    created () {
      this.loadData();
    },
    methods: {
      /**
       * @description: loadData
       * @author: miaofang
       */
      loadData () {
        if (this.$parent.addRepairRecord) {
          this.columns.unshift({ prop: "cz", label: "操作" });
        }
        getFdcq2List({
          bdcdyid: this.propsParam.bdcdyid,
          qllx: this.propsParam.qllx,
          qszt: this.checkList,
        }).then((res) => {
          if (res.code === 200) {
            this.tableData = res.result;
            this.shows = this.tableData.length > 0;
            this.tableData.forEach((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;
            }
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "./qlxxCommon.scss";
  .title {
    position: relative;
    .print {
      // background-color: #0079fe;
      z-index: 10;
      position: absolute;
      left: 11px;
      top: 5px;
    }
  }
</style>