<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 == '临时'">{{ 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: "建设用地使用权、宅基地使用权登记信息",
      list: [
        {
          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: "0",
        },
        {
          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: "1"
        },
        {
          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: "2"
        }
      ]
    };
  },
  async created () {
    // 清空值
    this.tableData = [];
    this.ths = [];
    this.columns = datas.columns();
    // let res = await getJsydsyqList({
    //   bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
    //   qllx: "A03",
    //   qszt: ["1"]
    // })
    let detail = this.list
    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 () {
      var checkKey = [];
      this.ths = [];
      this.checkList.forEach((item) => {
        if (item == "临时") {
          checkKey.push("0");
        }
        if (item == "现势") {
          checkKey.push("1");
        }
        if (item == "历史") {
          checkKey.push("2");
        }
      });
      this.showTableData = this.tableData.filter((item) =>
        checkKey.includes(item.qszt)
      );
      this.showTableData.forEach((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",
          });
        }
      });
    },
  },
};
</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-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;
      }
    }

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

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

    .xxTable {
      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 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;
        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>