<template>
  <div class="tableDivCss">
    <table cellpadding="0" cellspacing="0" class="tableCss">
      <tr>
        <th colspan="5" class="title">宗地基本信息</th>
      </tr>
      <tr>
        <td>单位</td>
        <td colspan="4">{{ zdjbxx.mjdw }}</td>
      </tr>
      <tr>
        <td>不动产类型</td>
        <td colspan="4">{{ bdclxList[zdjbxx.bdclx] }}</td>
      </tr>
      <tr>
        <td>坐落</td>
        <td colspan="4">{{ zdjbxx.zl }}</td>
      </tr>
      <tr>
        <td rowspan="8">土地状况</td>
      </tr>
      <tr>
        <td style="width:15%">宗地面积</td>
        <td style="width:30%">{{ zdjbxx.zdmj }}</td>
        <td style="width:15%">用途</td>
        <td style="width:30%">{{ zdjbxx.ghytmc }}</td>
      </tr>
      <tr>
        <td>等级</td>
        <td>{{ zdjbxx.djmc }}</td>
        <td>价格</td>
        <td>{{ zdjbxx.jg }}</td>
      </tr>
      <tr>
        <td>权利类型</td>
        <td>{{ zdjbxx.qllxmc }}</td>
        <td>权利性质</td>
        <td>{{ zdjbxx.qlxzmc }}</td>
      </tr>
      <tr>
        <td>权利设定方式</td>
        <td>{{ zdjbxx.qlsdfs }}</td>
        <td>容积率</td>
        <td>{{ zdjbxx.rjl }}</td>
      </tr>
      <tr>
        <td>建筑密度</td>
        <td>{{ zdjbxx.jzmd }}</td>
        <td>建筑限高</td>
        <td>{{ zdjbxx.jzxg }}</td>
      </tr>
      <tr>
        <td>图幅号</td>
        <td>{{ zdjbxx.tfh }}</td>
        <td>地籍号</td>
        <td>{{ zdjbxx.djh }}</td>
      </tr>
      <tr>
        <td>档案号</td>
        <td>{{ zdjbxx.dah }}</td>
        <td>地块代码</td>
        <td>{{ zdjbxx.dkdm }}</td>
      </tr>
      <tr>
        <td rowspan="5">宗地四至</td>
      </tr>

      <tr>
        <td>东</td>
        <td colspan="3">{{ zdjbxx.zdszd }}</td>
      </tr>
      <tr>
        <td>南</td>
        <td colspan="3">{{ zdjbxx.zdszn }}</td>
      </tr>
      <tr>
        <td>西</td>
        <td colspan="3">{{ zdjbxx.zdszx }}</td>
      </tr>
      <tr>
        <td>北</td>
        <td colspan="3">{{ zdjbxx.zdszb }}</td>
      </tr>
      <tr>
        <td>登记时间</td>
        <td colspan="2">{{ zdjbxx.bz }}</td>
        <td>登簿人</td>
        <td>{{ zdjbxx.bz }}</td>
      </tr>

      <tr>
        <td>附记</td>
        <td colspan="4">{{ zdjbxx.fj }}</td>
      </tr>
      <!-- <tr>
        <td>状态</td>
        <td colspan="2">{{ zdjbxx.zt }}</td>
        <td>区县代码</td>
        <td>{{ zdjbxx.qxdm }}</td>
      </tr> -->
      <tr v-if="showGroup">
        <td rowspan="4">变化情况</td>

                          <!-- <table cellspacing="0" cellpadding="0" :width="bhqkTableWidth">
            <tr v-for="(item, index) in bhqkColumns" :key="index">
              <td class="bhqkTh">{{ item.label }}</td>
            </tr>
          </table> -->

      </tr>

      <tr v-if="showGroup">
        <td >变化原因</td>
        <td >变化内容</td>
        <td >登记时间</td>
        <td >登簿人</td>
      </tr>
      <!-- <tr >
        <td>{{ zdbhqks[0].bhyy }}</td>
        <td>{{ zdbhqks[0].bhnr }}</td>
        <td>{{ zdbhqks[0].djsj }}</td>
        <td>{{ zdbhqks[0].dbr }}</td>
      </tr> -->



    </table>
  </div>
</template>

<script>
import { getZdjjxxBybdcdyid } from "@/api/registerBook.js";

export default {
  data() {
    return {
      bhqkColumns: [
        {
          prop: "ssywh",
          label: "上手业务号",
        },
        {
          prop: "zddm",
          label: "宗地代码",
        },
        {
          prop: "bhqzddm",
          label: "变化前宗地代码",
        },
        {
          prop: "bhnr",
          label: "变化内容",
        },
        {
          prop: "bhyy",
          label: "变化原因",
        },
        {
          prop: "djsj",
          label: "登记时间",
        },
        {
          prop: "dbr",
          label: "登簿人",
        },
        {
          prop: "fj",
          label: "附记",
        },
      ],
      bhqkTableWidth: 745,
      zdjbxx: {},
      zdbhqks: [],
      propsParam: this.$attrs,
      showGroup: false,
      bdclxList: ["", "宗地", "宗海", "自然幢", "多幢", "构筑物", "林权", "户"],
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      getZdjjxxBybdcdyid({ bdcdyid: this.propsParam.bdcdyid }).then((res) => {
        if (res.code === 200) {
          this.zdjbxx = res.result.zdjbxx;
          this.zdbhqks = res.result.zdbhqkList;
          debugger;
          if (this.zdbhqks != null && this.zdbhqks.length > 0) {
            this.showGroup = true;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/tablecss.scss";
</style>