<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>