<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="6" class="unit" v-if="djzd.mjdw == '1'">
            单位：■平方米 □公顷（□亩）、万元
          </td>
          <td colspan="6" class="unit" v-else>
            单位：□平方米 ■公顷（■亩）、万元
          </td>
        </tr>
        <tr>
          <td colspan="2">不动产类型</td>
          <td colspan="4">■土地 ■房屋建筑 □构筑物 □森林、林地 □其他</td>
        </tr>
        <tr>
          <td colspan="2">坐落</td>
          <td colspan="4">{{ djzd.zl }}</td>
        </tr>
        <tr>
          <td rowspan="8" class="title2">土地状况</td>
        </tr>
        <tr>
          <td colspan="2">宗地面积</td>
          <td>{{ djzd.zdmj }}</td>
          <td>用途</td>
          <td>{{ djzd.yt }}</td>
        </tr>
        <tr>
          <td colspan="2">等级</td>
          <td>{{ djzd.dj }}</td>
          <td>价格</td>
          <td>{{ djzd.jg }}</td>
        </tr>
        <tr>
          <td colspan="2">权利类型</td>
          <td>{{ djzd.qllx }}</td>
          <td>权利性质</td>
          <td>{{ djzd.qlxz }}</td>
        </tr>
        <tr>
          <td colspan="2">权利设定方式</td>
          <td>{{ djzd.qlsdfs }}</td>
          <td>容积率</td>
          <td>{{ djzd.rjl }}</td>
        </tr>
        <tr>
          <td colspan="2">建筑密度</td>
          <td>{{ djzd.jzmd }}</td>
          <td>建筑限高</td>
          <td>{{ djzd.jzxg }}</td>
        </tr>
        <tr>
          <td colspan="2">图幅号</td>
          <td>{{ djzd.tfh }}</td>
          <td>地籍号</td>
          <td>{{ djzd.djh }}</td>
        </tr>
        <tr>
          <td colspan="2">档案号</td>
          <td>{{ djzd.dah }}</td>
          <td>地块代码</td>
          <td>{{ djzd.dkdm }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-东</td>
          <td colspan="4">{{ djzd.zdszd }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-南</td>
          <td colspan="4">{{ djzd.zdszn }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-西</td>
          <td colspan="4">{{ djzd.zdszx }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-北</td>
          <td colspan="4">{{ djzd.zdszb }}</td>
        </tr>
        <tr>
          <td class="title2" height="96">备注</td>
          <td colspan="5">{{ djzd.bz }}</td>
        </tr>
        <tr>
          <td class="title2" height="96">附记</td>
          <td colspan="5">{{ djzd.fj }}</td>
        </tr>
        <tr>
          <td colspan="2">状态</td>
          <td colspan="2">{{ djzd.zt }}</td>
          <td>区县代码</td>
          <td>{{ djzd.qxdm }}</td>
        </tr>
        <tr>
          <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 { mapGetters } from "vuex";

export default {
  name: "zdxx",
  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,
      djzd: {},
      zdbhqks: [],
    };
  },
  computed: {
    ...mapGetters(["djbxx"]),
  },
  mounted() {
    this.info = this.djbxx.zdjbxx;
    this.djzd = this.djbxx.zdjbxx.djzd;
    this.zdbhqks = this.djbxx.zdjbxx.zdbhqks;


    let widths = (this.zdbhqks.length + 1) * 180 + 110;
    this.bhqkTableWidth = widths > 745 ? widths : 745;
  },
};
</script>

<style lang="scss" scoped>
.zdxx {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding: 10px 25px;
  .tablebox {
    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>