<template>
  <div class="djxxTable">
    <div class="tableBox">
      <div class="title">
        {{ title }}
        <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">
        <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' : '',
                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>
            <td v-for="count in emptycolNum" :key="~count"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getJsydsyqList } from "@/api/zhcx.js";
export default {
  data() {
    return {
      qsztList: [
        {
          value: "0",
          label: "临时",
        },
        {
          value: "1",
          label: "现势",
        },
        {
          value: "2",
          label: "历史",
        },
      ],
      checkList: ["0", "1", "2"],
      //传递参数
      propsParam: this.$attrs,
      //列表数据
      tableData: [],
      //空列值个数
      emptycolNum: 0,
      //列名称对象
      columns: [
        {
          prop: "qszt",
          label: "权属状态",
        },
        {
          prop: "qllxmc",
          label: "权利类型",
        },
        {
          prop: "djlxmc",
          label: "登记类型",
        },
        {
          prop: "ssywh",
          label: "上手业务号",
        },
        {
          prop: "dah",
          label: "档案号",
        },
        {
          prop: "ywh",
          label: "业务号",
        },
        {
          prop: "bdcdyh",
          label: "不动产单元号",
        },
        {
          prop: "zl",
          label: "坐落",
        },
        {
          prop: "qlrlx",
          label: "权利人类型",
        },
        {
          prop: "qlrmc",
          label: "权利人",
        },
        {
          prop: "qlrzjzl",
          label: "证件种类",
        },
        {
          prop: "qlrzjhm",
          label: "证件号",
        },
        {
          prop: "gyfs",
          label: "共有情况",
        },
        {
          prop: "mj",
          label: "使用权面积(m²)",
        },
        {
          prop: "qlxz",
          label: "权利性质",
        },
        {
          prop: "ytmc",
          label: "土地用途",
        },
        {
          prop: "syqqzsj",
          label: "使用权起止时间",
        },
        {
          prop: "tdsyqx",
          label: "土地使用期限",
        },
        {
          prop: "qdjg",
          label: "取得价格(万元)",
        },
        {
          prop: "djyy",
          label: "登记原因",
        },
        {
          prop: "bdcqzh",
          label: "不动产权证号",
        },
        {
          prop: "djsj",
          label: "登记时间",
        },
        {
          prop: "dbr",
          label: "登簿人",
        },
        {
          prop: "fj",
          label: "附记",
        },
      ],
      title: "建设用地使用权、宅基地使用权登记信息",
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {  
      getJsydsyqList({
        bdcdyid: this.propsParam.bdcdyid,
        qllx: this.propsParam.qllx,
        qszt: this.checkList,
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.result;
          this.emptycolNum = 3 - this.tableData.length;
        }
      });
    },
    checkChange() {
      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 "./qlxxCommon.scss";
</style>