<template>
  <div class="yydj">
    <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>异议登记</th>
          <th>异议登记</th>
          <th>异议登记</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: "yydj",
  data() {
    return {
      checkList: ["临时", "现势", "历史"],
      columns: [
        {
          prop: "ssywh",
          label: "上手业务号",
        },
        {
          prop: "dah",
          label: "档案号",
        },
        {
          prop: "ywh",
          label: "业务号",
        },
        {
          prop: "bdcdyh",
          label: "不动产单元号",
        },
        {
          prop: "zl",
          label: "坐落",
        },
        {
          prop: "yyr",
          label: "异议人",
        },
        {
          prop: "zjzl",
          label: "证件种类",
        },
        {
          prop: "zjh",
          label: "证件号",
        },
        {
          prop: "yysx",
          label: "异议事项",
        },
        {
          prop: "bdcdjzmh",
          label: "不动产登记证明号",
        },
        {
          prop: "djjg",
          label: "登记机构",
        },
        {
          prop: "dbr",
          label: "登簿人",
        },
        {
          prop: "djsj",
          label: "登记时间",
        },
        {
          prop: "zxyyywh",
          label: "注销异议业务号",
        },
        {
          prop: "zxyyyy",
          label: "注销异议原因",
        },
        {
          prop: "zxyydbr",
          label: "注销异议登簿人",
        },
        {
          prop: "zxyydjsj",
          label: "注销异议登记时间",
        },
      ],
      tableData: {
        linshi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 F00160111",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          yyr: "李四",
          zjzj: "身份证号",
          zjh: "*******",
          yysx: "",
          djjg: "",
          bdcdjzmh: "200825012286",
          dbr: "",
          djsj: "2008年3月11日",
          zxyyywh: "",
          zxyyyy: "",
          zxyydbr: "",
          zxyydjsj: "",
        },
        xianshi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 F00160111",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          yyr: "李四",
          zjzj: "身份证号",
          zjh: "*******",
          yysx: "",
          djjg: "",
          bdcdjzmh: "200825012286",
          dbr: "",
          djsj: "2008年3月11日",
          zxyyywh: "200825012286",
          zxyyyy: "时间到期",
          zxyydbr: "李四",
          zxyydjsj: "2008年3月11日",
        },
        lishi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 F00160111",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          yyr: "李四",
          zjzj: "身份证号",
          zjh: "*******",
          yysx: "",
          djjg: "",
          bdcdjzmh: "200825012286",
          dbr: "",
          djsj: "2008年3月11日",
          zxyyywh: "200825012286",
          zxyyyy: "时间到期",
          zxyydbr: "李四",
          zxyydjsj: "2008年3月11日",
        },
      },
    };
  },
};
</script>

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