<template>
  <div class="bdcqldjml">
    <table class="mlTable">
      <tr>
        <th colspan="5" class="title">不动产权利登记目录</th>
      </tr>
      <tr>
        <td>序号</td>
        <td>不动产单元号</td>
        <td>不动产类型</td>
        <td>所在本数</td>
        <td>备注</td>
      </tr>
      <tr v-for="(item, index) in bdcqlml" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ item.bdcdyh }}</td>
        <td>{{ item.bdclx }}</td>
        <td>{{ item.szbs }}</td>
        <td>{{ item.bz }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import { getBdcqldjmlByBdcdyid } from "@/api/djbDetail.js";
export default {
  data() {
    return {
      bdcqlml: [],
      propsParam: this.$attrs,
    };
  },
  mounted() {
    getBdcqldjmlByBdcdyid({ bdcdyid: this.propsParam.bdcdyid }).then((res) => {
      if (res.code === 200) {
        this.bdcqlml = res.result;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.bdcqldjml {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: scroll;
  .mlTable {
    width: 90%;
    margin: 0 auto;
    color: #333;
    border-spacing: 1px;
    background-color: #333;

    .title {
      font-size: 20px;
      line-height: 60px;
      font-family: serif;
      position: relative;
    }

    td,
    th {
      background-color: white;
      line-height: 30px;
      padding: 0 4px;
      text-align: center;
    }
  }
}
</style>