<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" :width="tableWidth">
          <tr>
            <th rowspan="3">业务类型</th>
          </tr>
          <!-- 第一行表头 -->
          <tr class="one" id="">
            <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 { mapGetters } from "vuex";
import { datas } from "./jsydsyq";
import { getJsydsyqList } from "@/api/zhcx.js";
export default {
  name: "djxxTable",
  props: {
    showType: "",
  },
  data () {
    return {
      checkList: ["临时", "现势", "历史"],
      tableWidth: 810,
      type: datas.columns(),
      tableData: [],
      showTableData: [],
      ths: [],
      showThs: [],
      columns: [],
      title: "",
    };
  },
  computed: {
    ...mapGetters(["djbxx"]),
  },
  watch: {
    showType: {
      handler (newVlue) {
        // 清空值
        this.tableData = [];
        this.ths = [];
        this.columns = this.type[newVlue].columns;
        this.title = this.type[newVlue].title;
        this.checkList = ["临时", "现势", "历史"];
        this.tableWidth = 810;
        let detail;
        if (newVlue === "JSYDSYQ") {
          getJsydsyqList({
            bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
            qllx: "A03",
            qszt: ["1"]
          }).then((res) => {
            if (res.code === 200) {
              detail = res.result;
            }
          });
        } else {
          detail = this.djbxx.detail.qlxxs[newVlue];
        }
        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;
        this.showThs = this.ths;
        let width = (this.tableData.length - 3) * 223 + this.tableWidth;
        this.tableWidth = this.tableData.length > 3 ? width : 810;
      },
      immediate: true,
    },
  },
  methods: {
    checkChange () {
      var checkKey = [];
      this.ths = [];
      this.tableWidth = 810;
      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",
          });
        }
      });
      let width = (this.showTableData.length - 3) * 223 + this.tableWidth;
      this.tableWidth = this.showTableData.length > 3 ? width : 810;
    },
  },
};
</script>

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

  .tableBox {
    width: 810px;
    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 {
      width: 810px;
      overflow-x: scroll;
    }

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

    .xxTable {
      border-spacing: 1px;

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

      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;
      }

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

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

      td.linshi {
        color: #fe9400;
      }

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