<template>
  <div class="djxxTable">
    <div class="tableBox">
      <div class="title">
        {{ title }}
        <div class="checkbox">
          <el-checkbox-group v-model="checkList" @change="checkChange">
            <el-checkbox label="临时"></el-checkbox>
            <el-checkbox label="现势"></el-checkbox>
            <el-checkbox label="历史"></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="xxTableBox">
        <table class="xxTable">
          <tr>
            <th rowspan="3">业务类型</th>
          </tr>
          <!-- 第一行表头 -->
          <tr class="one">
            <th v-for="(item, index) in ths" :key="index" :class="[item.class, item.type == '临时' ? 'linshiIcon' : '']">
              <div class="icon" v-if="item.type == '临时'">正在办理</div>
              {{ item.type }}
            </th>
          </tr>
          <!-- 第二行表头 -->
          <tr class="two">
            <th v-for="(item, index) in ths" :key="index" :class="item.class">
              <p>{{ item.qllxmc }}</p>
              <p>{{ item.djlxmc }}</p>
            </th>
          </tr>
          <!-- 数据 -->
          <tr v-for="(item, index) in columns" :key="index">
            <td>
              {{ item.label }}
            </td>
            <td v-for="(item1, index1) in showTableData" :key="index1" :class="[
              item1.qszt == '2' ? 'lishi' : '',
              item1.qszt == '0' ? 'linshi' : '',
            ]">
              {{ item1[item.prop] }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { datas } from "./jsydsyq";
import { getJsydsyqList } from "@/api/zhcx.js";
export default {
  name: "jsydsyq",
  data () {
    return {
      checkList: ["临时", "现势", "历史"],
      tableData: [],
      showTableData: [],
      ths: [],
      columns: [],
      title: "建设用地使用权、宅基地使用权登记信息",
      emptyData: {
        ssywh: '',
        dah: '',
        ywh: '',
        bdcdyh: "",
        zl: "",
        qlrlx: '',
        qlrmc: "",
        qlrzjzl: "",
        qlrzjhm: "",
        gyfs: "",
        mj: null,
        qlxz: '',
        ytmc: "",
        syqqzsj: null,
        tdsyqx: null,
        qdjg: null,
        djyy: '',
        bdcqzh: null,
        djsj: '',
        dbr: '',
        fj: "",
        qllxmc: "",
        djlxmc: '',
        qszt: "",
      }
    };
  },
  async created () {
    // 清空值
    this.tableData = [];
    this.ths = [];
    this.columns = datas.columns();
    let res = await getJsydsyqList({
      bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
      qllx: "A03",
      qszt: ["1"]
    })
    let resList = res.result.result ? res.result.result : []
    if (resList.length < 3) {
      let num = 3 - resList.length
      for (let i = 0; i < num; i++) {
        resList.push(this.emptyData)
      }
    }
    let detail = resList
    detail.length > 0 && detail.forEach((item) => {
      this.tableData.push(item);
      if (item.qszt == "0") {
        this.ths.push({
          type: "临时",
          qllxmc: item.qllxmc,
          djlxmc: item.djlxmc,
          prop: "linshi",
          class: "linshi",
        });
      } else if (item.qszt == "1") {
        this.ths.push({
          type: "现势",
          qllxmc: item.qllxmc,
          djlxmc: item.djlxmc,
          prop: "xianshi",
          class: "xianshi",
        });
      } else if (item.qszt == "2") {
        this.ths.push({
          type: "历史",
          qllxmc: item.qllxmc,
          djlxmc: item.djlxmc,
          prop: "lishi",
          class: "lishi",
        });
      }
    });
    this.showTableData = this.tableData;
  },
  methods: {
    checkChange () {
    },
  },
};
</script>

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

  .tableBox {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;

    .title {
      width: 100%;
      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;
      }
    }

    .xxTableBox {
      overflow-x: scroll;
      width: 100%;
    }

    .xxTable>tr:first-child th {
      width: 140px;
    }

    tr td {
      border: 1px solid #ccc;
    }

    .xxTable {
      // border-spacing: 0;
      border-spacing: 1px;
      width: 100%;

      tr>th {
        background: #464c5b;
        color: #fff;
        font-size: 16px;
        height: 60px;
      }

      th.linshi,
      th.xianshi {
        background: #464c5b;
      }

      th.lishi {
        background: rgba(70, 76, 91, 0.8);
      }

      .one th {
        height: 25px;
        font-size: 14px;
      }

      th.linshi {
        color: #fe9400;
      }

      .two th {
        height: 45px;

        p:nth-child(2) {
          font-size: 14px;
        }
      }

      .linshiIcon {
        position: relative;
      }

      .linshiIcon::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-width: 0px 0px 55px 55px;
        border-style: none solid solid;
        border-color: transparent transparent #fe9400;
        position: absolute;
        top: 0;
        right: 0;
        transform: rotate(-90deg);
      }

      .icon {
        position: absolute;
        top: 13px;
        right: -4px;
        transform: rotate(45deg);
        color: #fff;
        font-size: 12px;
        z-index: 10;
      }

      tr td {
        text-align: center;
        height: 40px;
        padding: 4px;
        font-size: 13px;
        width: 140px;
      }

      >tr:nth-child(odd) td {
        background: #f2f2f2;
      }

      >tr:nth-child(even) td {
        background: #f9f9f9;
      }

      td.linshi {
        color: #fe9400;
      }

      tr>td.lishi {
        color: #7f7f7f;
      }
    }
  }
}
</style>