<template>
  <div class="zdxx">
    <div class="tablebox">
      <table cellpadding="0" cellspacing="0" class="zdxxTable">
        <col width="80" />
        <col width="60" />
        <col width="90" />
        <col width="235" />
        <col width="150" />
        <tr>
          <td colspan="6" class="title">宗地基本信息</td>
        </tr>       
        <tr>
          <td colspan="2">不动产类型：</td>
          <td colspan="2">{{ bdclxList[zdjbxx.bdclx] }}</td>
          <td>单位：</td>
          <td>{{ zdjbxx.mjdw }}</td>
        </tr>
        <tr>
          <td colspan="2">坐落</td>
          <td colspan="4">{{ zdjbxx.zl }}</td>
        </tr>
        <tr>
          <td rowspan="8" class="title2">土地状况</td>
        </tr>
        <tr>
          <td colspan="2">宗地面积</td>
          <td>{{ zdjbxx.zdmj }}</td>
          <td>用途</td>
          <td>{{ zdjbxx.ghytmc }}</td>
        </tr>
        <tr>
          <td colspan="2">等级</td>
          <td>{{ zdjbxx.djmc }}</td>
          <td>价格</td>
          <td>{{ zdjbxx.jg }}</td>
        </tr>
        <tr>
          <td colspan="2">权利类型</td>
          <td>{{ zdjbxx.qllxmc }}</td>
          <td>权利性质</td>
          <td>{{ zdjbxx.qlxzmc }}</td>
        </tr>
        <tr>
          <td colspan="2">权利设定方式</td>
          <td>{{ zdjbxx.qlsdfs }}</td>
          <td>容积率</td>
          <td>{{ zdjbxx.rjl }}</td>
        </tr>
        <tr>
          <td colspan="2">建筑密度</td>
          <td>{{ zdjbxx.jzmd }}</td>
          <td>建筑限高</td>
          <td>{{ zdjbxx.jzxg }}</td>
        </tr>
        <tr>
          <td colspan="2">图幅号</td>
          <td>{{ zdjbxx.tfh }}</td>
          <td>地籍号</td>
          <td>{{ zdjbxx.djh }}</td>
        </tr>
        <tr>
          <td colspan="2">档案号</td>
          <td>{{ zdjbxx.dah }}</td>
          <td>地块代码</td>
          <td>{{ zdjbxx.dkdm }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-东</td>
          <td colspan="4">{{ zdjbxx.zdszd }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-南</td>
          <td colspan="4">{{ zdjbxx.zdszn }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-西</td>
          <td colspan="4">{{ zdjbxx.zdszx }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-北</td>
          <td colspan="4">{{ zdjbxx.zdszb }}</td>
        </tr>
        <tr>
          <td class="title2" height="96">备注</td>
          <td colspan="5">{{ zdjbxx.bz }}</td>
        </tr>
        <tr>
          <td class="title2" height="96">附记</td>
          <td colspan="5">{{ zdjbxx.fj }}</td>
        </tr>
        <tr>
          <td colspan="2">状态</td>
          <td colspan="2">{{ zdjbxx.zt }}</td>
          <td>区县代码</td>
          <td>{{ zdjbxx.qxdm }}</td>
        </tr>
        <tr v-show="showGroup">
          <td class="title2">变化情况</td>
          <td colspan="5" class="bhqk">
            <div class="box">
              <table cellspacing="0" cellpadding="0" :width="bhqkTableWidth">
                <tr v-for="(item, index) in bhqkColumns" :key="index">
                  <td class="bhqkTh">{{ item.label }}</td>
                  <!-- <td v-for="(item2, index2) in zdbhqks" :key="index2">
                    {{ item2[item.prop] }}
                  </td> -->
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </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;
          if (this.zdbhqks != null && this.zdbhqks.length > 0) {
            this.showGroup = true;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.zdxx {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding: 5px;
}
.tablebox {
  overflow-x: auto;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid rgb(228, 228, 228);
  text-align: center;
  padding: 4px;
  overflow-y: scroll;

  .zdxxTable {
    width: 100%;
    color: #333;

    td {
      border: 1px solid rgb(228, 228, 228);
      line-height: 30px;
      padding: 0 4px;
    }

    .title {
      line-height: 68px;
      font-size: 20px;
    }

    .unit {
      text-align: right;
    }

    .title2 {
      writing-mode: vertical-lr;
      letter-spacing: 6px;
    }

    .bhqk {
      padding: 0;

      .box {
        width: 745px;
        overflow: auto;
      }

      .test {
      }

      table {
        .bhqkTh {
          width: 110px;
          line-height: 40px;
          background-color: #f5f5f5;
          border: 1px solid rgb(228, 228, 228);
          font-weight: bold;
        }

        td {
          width: 180px;
        }
      }
    }
  }
}
</style>