<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="zdjbxx.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">{{ 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.dj }}</td>
          <td>价格</td>
          <td>{{ zdjbxx.jg }}</td>
        </tr>
        <tr>
          <td colspan="2">权利类型</td>
          <td>{{ zdjbxx.qllx }}</td>
          <td>权利性质</td>
          <td>{{ zdjbxx.qlxz }}</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 { mapGetters } from "vuex";
import { getZdjjxxBySLdy } from "@/api/zhcx.js";

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,
      zdjbxx: {},
      zdbhqks: [],
      propsParam: {},
      showGroup: false,
    };
  },
  // computed: {
  //   ...mapGetters(["djbxx"]),
  // },
  created () {
    this.propsParam = this.$attrs;
    // this.$nextTick(() => {

    // });
    this.loadData();
    //this.$alert(this.param.bdcdyh);
    // 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;
  },
  methods: {
    loadData () {
      getZdjjxxBySLdy({ bsmsldy: this.propsParam.bsmSldy }).then((res) => {
        if (res.code === 200) {
          this.zdjbxx = res.result.zdjbxx;
          this.zdbhqks = res.result.zdbhqkList;
          //this.$alert(this.zdjbxx);
          if (this.zdbhqks != null && this.zdbhqks.length > 0) {
            this.showGroup = true;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.zdxx {
  width: 100%;
  height: calc(100% - 42px);
  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%;
      min-width: 900px;
      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>