<template>
  <div class="ygdj">
    <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: "ygdj",
  data() {
    return {
      checkList: ["临时", "现势", "历史"],
      columns: [
        {
          prop: "ssywh",
          label: "上手业务号",
        },
        {
          prop: "dah",
          label: "档案号",
        },
        {
          prop: "ywh",
          label: "业务号",
        },
        {
          prop: "bdcdyh",
          label: "不动产单元号",
        },
        {
          prop: "zl",
          label: "坐落",
        },
        {
          prop: "qlr",
          label: "权利人",
        },
        {
          prop: "qlrzjzl",
          label: "证件种类",
        },
        {
          prop: "qlrzjh",
          label: "证件号",
        },
        {
          prop: "ywr",
          label: "义务人",
        },
        {
          prop: "ywrzjzl",
          label: "证件种类",
        },
        {
          prop: "ywrzjh",
          label: "证件号",
        },
        {
          prop: "fwxz",
          label: "房屋性质",
        },
        {
          prop: "ghyt",
          label: "规划用途",
        },
        {
          prop: "fwzcs",
          label: "房屋总层数",
        },
        {
          prop: "fwszc",
          label: "房屋所在层",
        },
        {
          prop: "jzmj",
          label: "建筑面积",
        },
        {
          prop: "djyy",
          label: "登记原因",
        },
        {
          prop: "bdbzzqse",
          label: "取得价格/被担保主债权数额",
        },
        {
          prop: "jedw",
          label: "金额单位",
        },
        {
          prop: "dbfw",
          label: "担保范围",
        },
        {
          prop: "sfczyd",
          label: "是否存在禁止或限制转让抵押不动产的约定",
        },
        {
          prop: "djsj",
          label: "登记时间",
        },
        {
          prop: "bdcdjzmh",
          label: "不动产登记证明号",
        },
        {
          prop: "dbr",
          label: "登簿人",
        },
        {
          prop: "zxygywh",
          label: "注销预告业务号",
        },
        {
          prop: "zxygyy",
          label: "注销预告原因",
        },
        {
          prop: "zxsj",
          label: "注销时间",
        },
        {
          prop: "qszt",
          label: "权属状态",
        },
      ],
      tableData: {
        linshi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 F00160111",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          qlr: "企业",
          qlrzjzj: "组织机构代码证",
          qlrzjh: "*******",
          ywr: "企业",
          ywrzjzl: "组织机构代码证",
          ywrzjh: "*******",
          tdsyqr: "绿地开发有限公司",
          fwxz: "商品房",
          ghyt: "住宅",
          fwzcs: "10",
          fwszc: "6",
          jzmj: "111.5",
          djyy: "",
          bdbzzqse: "80.000",
          jedw: "万元",
          dbfw: "****",
          sfczyd: "",
          djsj: "2008年3月11日",
          bdcdjzmh: "A（2011）B市不动产证明第0000060号",
          dbr: "路**",
          zxygywh: "",
          zxygyy: "",
          zxsj: "",
          qszt: "",
        },
        xianshi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 F00160111",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          qlr: "企业",
          qlrzjzj: "组织机构代码证",
          qlrzjh: "*******",
          ywr: "企业",
          ywrzjzl: "组织机构代码证",
          ywrzjh: "*******",
          tdsyqr: "绿地开发有限公司",
          fwxz: "商品房",
          ghyt: "住宅",
          fwzcs: "10",
          fwszc: "6",
          jzmj: "111.5",
          djyy: "",
          bdbzzqse: "60.000",
          jedw: "",
          dbfw: "",
          sfczyd: "是",
          djsj: "2008年3月11日",
          bdcdjzmh: "A（2011）B市不动产证明第0000060号",
          dbr: "路**",
          zxygywh: "",
          zxygyy: "",
          zxsj: "",
          qszt: "",
        },
        lishi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 F00160111",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          qlr: "企业",
          qlrzjzj: "组织机构代码证",
          qlrzjh: "*******",
          ywr: "企业",
          ywrzjzl: "组织机构代码证",
          ywrzjh: "*******",
          tdsyqr: "绿地开发有限公司",
          fwxz: "商品房",
          ghyt: "住宅",
          fwzcs: "10",
          fwszc: "6",
          jzmj: "111.5",
          djyy: "",
          bdbzzqse: "",
          jedw: "",
          dbfw: "",
          sfczyd: "",
          djsj: "2008年3月11日",
          bdcdjzmh: "A（2011）B市不动产证明第0000060号",
          dbr: "路**",
          zxygywh: "200825012286",
          zxygyy: "个人原因",
          zxsj: "2008年3月11日",
          qszt: "",
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.ygdj {
  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>