<template>
  <div class="cfdj">
    <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: "cfdj",
  data() {
    return {
      checkList: ["临时", "现势", "历史"],
      columns: [
        {
          prop: "ssywh",
          label: "上手业务号",
        },
        {
          prop: "dah",
          label: "档案号",
        },
        {
          prop: "ywh",
          label: "业务号",
        },
        {
          prop: "bdcdyh",
          label: "不动产单元号",
        },
        {
          prop: "zl",
          label: "坐落",
        },
        {
          prop: "bdcqlr",
          label: "不动产权利人",
        },
        {
          prop: "zjzl",
          label: "证件种类",
        },
        {
          prop: "zjh",
          label: "证件号",
        },
        {
          prop: "cflx",
          label: "查封类型",
        },
        {
          prop: "cfjg",
          label: "查封机关",
        },
        {
          prop: "cfwh",
          label: "查封文号",
        },
        {
          prop: "cfwj",
          label: "查封文件",
        },
        {
          prop: "cfqssj",
          label: "查封起始时间",
        },
        {
          prop: "cfjssj",
          label: "查封结束时间",
        },
        {
          prop: "cfqx",
          label: "查封期限",
        },
        {
          prop: "cffw",
          label: "查封范围",
        },
        {
          prop: "djjg",
          label: "登记机构",
        },
        {
          prop: "dbr",
          label: "登簿人",
        },
        {
          prop: "djsj",
          label: "登记时间",
        },
        {
          prop: "jfywh",
          label: "解封业务号",
        },
        {
          prop: "jfjg",
          label: "解封机关",
        },
        {
          prop: "jfwh",
          label: "解封文号",
        },
        {
          prop: "jfwj",
          label: "解封文件",
        },
        {
          prop: "jfdjsj",
          label: "解封登记时间",
        },
        {
          prop: "jfdbr",
          label: "解封登簿人",
        },
      ],
      tableData: {
        linshi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 F00160111",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          bdcqlr: "李四",
          zjzj: "身份证号",
          zjh: "*******",
          cflx: "查封",
          cfjg: "西安法院",
          cfwh: "200825012286",
          cfwj: "",
          cfqssj: "2008年3月11日",
          cfjssj: "2012年3月11日",
          cfqx: "4年",
          cffw: "",
          djjg: "",
          dbr: "",
          djsj: "",
          jfywh: "",
          jfjg: "",
          jfwh: "",
          jfwj: "",
          jfdjsj: "",
          jfdbr: "",
        },
        xianshi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 F00160111",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          bdcqlr: "李四",
          zjzj: "身份证号",
          zjh: "*******",
          cflx: "查封",
          cfjg: "西安法院",
          cfwh: "200825012286",
          cfwj: "",
          cfqssj: "2008年3月11日",
          cfjssj: "2012年3月11日",
          cfqx: "4年",
          cffw: "",
          djjg: "",
          dbr: "",
          djsj: "",
          jfywh: "200825012285",
          jfjg: "西安法院",
          jfwh: "123",
          jfwj: "",
          jfdjsj: "2012年3月11日",
          jfdbr: "",
        },
        lishi: {
          ssywh: "",
          dah: "",
          ywh: "200825012285",
          bdcdyh: "370205004005GB10030 F00160111",
          zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
          bdcqlr: "李四",
          zjzj: "身份证号",
          zjh: "*******",
          cflx: "查封",
          cfjg: "西安法院",
          cfwh: "200825012286",
          cfwj: "",
          cfqssj: "2008年3月11日",
          cfjssj: "2012年3月11日",
          cfqx: "4年",
          cffw: "",
          djjg: "",
          dbr: "",
          djsj: "",
          jfywh: "",
          jfjg: "",
          jfwh: "",
          jfwj: "",
          jfdjsj: "",
          jfdbr: "",
        },
      },
    };
  },
};
</script>

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