<template>
  <div class="gyjsydsyq">
    <div class="tableBox">
      <div class="title">
        建设用地使用权、宅基地使用权登记信息
        <div class="checkbox">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="临时"></el-checkbox>
            <el-checkbox label="现势"></el-checkbox>
            <el-checkbox label="历史"></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <table class="xxTable">
        <tr>
          <th rowspan="3" width="140">业务类型</th>
        </tr>
        <tr class="one">
          <th class="linshiIcon">
            <div class="icon">临时</div>
            临时
          </th>
          <th>现势</th>
          <th>历史</th>
        </tr>
        <tr class="two">
          <th>
            <p>建设用地使用权</p>
            <p>首次登记</p>
          </th>
          <th>
            <p>建设用地使用权</p>
            <p>转移登记</p>
          </th>
          <th>
            <p>建设用地使用权</p>
            <p>转移登记</p>
          </th>
        </tr>

        <tr v-for="(item, index) in columns" :key="index">
          <td>
            {{ item.label }}
          </td>
          <td>{{ tableData.linshi[item.prop] }}</td>
          <td>{{ tableData.xianshi[item.prop] }}</td>
          <td>{{ tableData.lishi[item.prop] }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "gyjsydsyq",
  data() {
    return {
      checkList: ["临时", "现势", "历史"],
      columns: [
        {
          prop: "ssywh",
          label: "上手业务号",
        },
        {
          prop: "dah",
          label: "档案号",
        },
        {
          prop: "ywh",
          label: "业务号",
        },
        {
          prop: "bdcdyh",
          label: "不动产单元号",
        },
        {
          prop: "zl",
          label: "坐落",
        },
        {
          prop: "qlrlx",
          label: "权利人类型",
        },
        {
          prop: "qlr",
          label: "权利人",
        },
        {
          prop: "zjzl",
          label: "证件种类",
        },
        {
          prop: "zjh",
          label: "证件号",
        },
        {
          prop: "gyqk",
          label: "共有情况",
        },
        {
          prop: "syqmj",
          label: "使用权面积(m²)",
        },
        {
          prop: "qlxz",
          label: "权利性质",
        },
        {
          prop: "tdyt",
          label: "土地用途",
        },
        {
          prop: "syqqssj",
          label: "使用权起始时间",
        },
        {
          prop: "syqjssj",
          label: "使用权结束时间",
        },
        {
          prop: "tdsyqx",
          label: "土地使用期限",
        },
        {
          prop: "qdjg",
          label: "取得价格(万元)",
        },
        {
          prop: "djyy",
          label: "登记原因",
        },
        {
          prop: "bdcqzh",
          label: "不动产权证号",
        },
        {
          prop: "djsj",
          label: "登记时间",
        },
        {
          prop: "dbr",
          label: "登簿人",
        },
        {
          prop: "fj",
          label: "附记",
        },
      ],
      tableData: {
        linshi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 W00000000",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          qlrlx: "企业",
          qlr: "联城有限公司",
          zjzj: "组织机构代码证",
          zjh: "*******",
          gyqk: "单独所有",
          syqmj: "22384.1700",
          qlxz: "出让",
          tdyt: "城镇住宅用地",
          syqqssj: "2007年12月25日",
          syqjssj: "2077年12月24日",
          tdsyqx: "70年",
          qdjg: "75793.75",
          djyy: "出让取得",
          bdcqzh: "陕2018汉台区不动产权第0003782号",
          djsj: "2008年3月11日",
          dbr: "路**",
          fj: "2014年10月21日办理房屋首次登记",
        },
        xianshi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 W00000000",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          qlrlx: "企业",
          qlr: "联城有限公司",
          zjzj: "组织机构代码证",
          zjh: "*******",
          gyqk: "单独所有",
          syqmj: "22384.1700",
          qlxz: "出让",
          tdyt: "城镇住宅用地",
          syqqssj: "2007年12月25日",
          syqjssj: "2077年12月24日",
          tdsyqx: "70年",
          qdjg: "75793.75",
          djyy: "出让取得",
          bdcqzh: "陕2018汉台区不动产权第0003782号",
          djsj: "2008年3月11日",
          dbr: "路**",
          fj: "2014年10月21日办理房屋首次登记",
        },
        lishi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 W00000000",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          qlrlx: "企业",
          qlr: "联城有限公司",
          zjzj: "组织机构代码证",
          zjh: "*******",
          gyqk: "单独所有",
          syqmj: "22384.1700",
          qlxz: "出让",
          tdyt: "城镇住宅用地",
          syqqssj: "2007年12月25日",
          syqjssj: "2077年12月24日",
          tdsyqx: "70年",
          qdjg: "75793.75",
          djyy: "出让取得",
          bdcqzh: "陕2018汉台区不动产权第0003782号",
          djsj: "2008年3月11日",
          dbr: "路**",
          fj: "2014年10月21日办理房屋首次登记",
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.gyjsydsyq {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: scroll;
  color: #333;

  .tableBox {
    width: 810px;
    margin: 0 auto;

    .title {
      font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
      font-weight: 700;
      font-size: 16px;
      text-align: center;
      background: #e9e9e9;
      height: 62px;
      line-height: 62px;
      position: relative;
      margin: 1px 0;
      .checkbox {
        position: absolute;
        right: 20px;
        bottom: -16px;
        height: 62px;
      }
    }

    .xxTable {
      width: 810px;
      border-spacing: 1px;
      tr > th {
        background: #464c5b;
        color: #fff;
        font-size: 16px;
      }
      tr > th:nth-child(1),
      tr > th:nth-child(2) {
        background: #464c5b;
      }
      tr > th:nth-child(3) {
        background: rgba(70, 76, 91, 0.8);
      }
      .one th {
        height: 25px;
        font-size: 14px;
      }
      .one > th:nth-child(1) {
        color: #fe9400;
      }
      .two th {
        height: 45px;

        p:nth-child(2) {
          font-size: 14px;
        }
      }
      .two > th:nth-child(1) {
        color: #fe9400;
      }
      .linshiIcon {
        position: relative;
      }
      .linshiIcon::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-width: 0px 0px 45px 45px;
        border-style: none solid solid;
        border-color: transparent transparent #fe9400;
        position: absolute;
        top: 0px;
        right: 3px;
        transform: rotate(-90deg);
      }
      .icon {
        position: absolute;
        top: 8px;
        right: 6px;
        transform: rotate(45deg);
        color: #fff;
        font-size: 12px;
        z-index: 10;
      }

      tr td {
        text-align: center;
        height: 40px;
        padding: 4px;
        font-size: 13px;
      }
      > tr:nth-child(odd) td {
        background: #f2f2f2;
      }
      > tr:nth-child(even) td {
        background: #f9f9f9;
      }
      tr > td:nth-child(2) {
        color: #fe9400;
      }
      tr > td:nth-child(4) {
        color: #7f7f7f;
      }
    }
  }
}
</style>