<template>
  <div class="dyaq">
    <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: "dyaq",
  data() {
    return {
      checkList: ["临时", "现势", "历史"],
      columns: [
        {
          prop: "ssywh",
          label: "上手业务号",
        },
        {
          prop: "dah",
          label: "档案号",
        },
        {
          prop: "ywh",
          label: "业务号",
        },
        {
          prop: "bdcdyh",
          label: "不动产单元号",
        },
        {
          prop: "zjjzwzl",
          label: "在建建筑物坐落",
        },
        {
          prop: "dybdclx",
          label: "抵押不动产类型",
        },
        {
          prop: "dyqr",
          label: "抵押权人",
        },
        {
          prop: "zjzl",
          label: "证件种类",
        },
        {
          prop: "zjh",
          label: "证件号",
        },
        {
          prop: "dyr",
          label: "抵押人",
        },
        {
          prop: "dyfs",
          label: "抵押方式",
        },
        {
          prop: "sfygdj",
          label: "是否预告登记",
        },
        {
          prop: "zjjzwdyfw",
          label: "在建建筑物抵押范围",
        },
        {
          prop: "dymj",
          label: "抵押面积",
        },
        {
          prop: "bdbzzqse",
          label: "被担保主债权数额(万元)",
        },
        {
          prop: "dbfw",
          label: "担保范围",
        },
        {
          prop: "zwlxqssj",
          label: "债务履行起始时间",
        },
        {
          prop: "zwlxjssj",
          label: "债务履行结束时间",
        },
        {
          prop: "zwlxqx",
          label: "债务履行期限(债务确定期间)",
        },
        {
          prop: "zgzqqdsshse",
          label: "最高债权确定事实和数额",
        },
        {
          prop: "sfczyd",
          label: "是否存在禁止或限制转让抵押不动产的约定",
        },
        {
          prop: "djyy",
          label: "登记原因",
        },
        {
          prop: "bdcdjzmh",
          label: "不动产登记证明号",
        },
        {
          prop: "djsj",
          label: "登记时间",
        },
        {
          prop: "dbr",
          label: "登簿人",
        },
        {
          prop: "djjg",
          label: "登记机构",
        },
        {
          prop: "fj",
          label: "附记",
        },
        {
          prop: "qlqtzk",
          label: "权利其他状况",
        },
        {
          prop: "zxdyywh",
          label: "注销抵押业务号",
        },
        {
          prop: "zxdyyy",
          label: "注销抵押原因",
        },
      ],
      tableData: {
        linshi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 W00000000",
          zjjzwzl:
            "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          dybdclx: "土地",
          dyqr: "中国银行股份有限公司C区支行",
          zjzj: "营业执照",
          zjh: "*******",
          dyr: "联城有限公司",
          dyfs: "一般抵押",
          sfygdj: "否",
          zjjzwdyfw: "",
          dymj: "22384.1700",
          bdbzzqse: "22000",
          dbfw: "城镇住宅用地",
          zwlxqssj: "2007年12月25日",
          zwlxjssj: "2077年12月24日",
          zwlxqx: "1年",
          zgzqqdsshse: "11223",
          sfczyd: "否",
          djyy: "合同设立",
          bdcdjzmh: "A（2011）B市不动产证明第0000060号",
          djsj: "2009年04月21日",
          dbr: "路**",
          djjg: "",
          fj: "",
          qlqtzk: "",
          zxdyywh: "201025126854",
          zxdyyy: "贷款还清",
        },
        xianshi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 W00000000",
          zjjzwzl:
            "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          dybdclx: "土地",
          dyqr: "中国银行股份有限公司C区支行",
          zjzj: "营业执照",
          zjh: "*******",
          dyr: "联城有限公司",
          dyfs: "一般抵押",
          sfygdj: "否",
          zjjzwdyfw: "",
          dymj: "22384.1700",
          bdbzzqse: "22000",
          dbfw: "城镇住宅用地",
          zwlxqssj: "2007年12月25日",
          zwlxjssj: "2077年12月24日",
          zwlxqx: "1年",
          zgzqqdsshse: "11223",
          sfczyd: "否",
          djyy: "合同设立",
          bdcdjzmh: "A（2011）B市不动产证明第0000060号",
          djsj: "2009年04月21日",
          dbr: "路**",
          djjg: "",
          fj: "",
          qlqtzk: "",
          zxdyywh: "201025126854",
          zxdyyy: "贷款还清",
        },
        lishi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 W00000000",
          zjjzwzl:
            "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          dybdclx: "土地",
          dyqr: "中国银行股份有限公司C区支行",
          zjzj: "营业执照",
          zjh: "*******",
          dyr: "联城有限公司",
          dyfs: "一般抵押",
          sfygdj: "否",
          zjjzwdyfw: "",
          dymj: "22384.1700",
          bdbzzqse: "22000",
          dbfw: "城镇住宅用地",
          zwlxqssj: "2007年12月25日",
          zwlxjssj: "2077年12月24日",
          zwlxqx: "1年",
          zgzqqdsshse: "11223",
          sfczyd: "否",
          djyy: "合同设立",
          bdcdjzmh: "A（2011）B市不动产证明第0000060号",
          djsj: "2009年04月21日",
          dbr: "路**",
          djjg: "",
          fj: "",
          qlqtzk: "",
          zxdyywh: "201025126854",
          zxdyyy: "贷款还清",
        },
      },
    };
  },
};
</script>

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