<template>
  <div style="height: 100%; margin-top: 10px">
    <div class="project-name">
      <div>
        <img src="@/assets/images/index/project.png" alt="" />
        {{ data.project_name }}
      </div>
      <div>
        质量评定得分：<span class="count">{{ data.quality_score }}</span>
      </div>
    </div>
    <el-table
      border
      class="dialog-data-table"
      :data="tableData"
      v-loading="loading"
      :element-loading-background="loadingBG"
      height="calc(100% - .7rem)"
      :span-method="handleSpan"
    >
      <el-table-column
        label="单位工程名称"
        align="center"
        prop="parent_name"
      ></el-table-column>
      <el-table-column
        label="是否为主要单位"
        align="center"
        prop="tis_main_unit_name"
      ></el-table-column>
      <el-table-column
        label="外观质量得分"
        align="center"
        prop="tappearance_quality_score"
      ></el-table-column>
      <el-table-column
        label="分部工程名称"
        align="left"
        prop="part_name"
        :show-overflow-tooltip=true
      ></el-table-column>
      <el-table-column
        label="是否为主要分部"
        align="center"
        prop="is_main_distribution_name"
      ></el-table-column>
      <el-table-column
        label="重要隐蔽或关键单元工程个数"
        align="center"
        prop="concealed_critical_num"
      ></el-table-column>
      <el-table-column
        label="重要隐蔽或关键单元工程的优良率"
        align="center"
        prop="concealed_critical_percentage"
      ></el-table-column>
      <el-table-column
        label="一般单元工程个数"
        align="center"
        prop="general_num"
      ></el-table-column>
      <el-table-column
        label="一般单元工程优良率"
        align="center"
        prop="general_percentage"
      ></el-table-column>
    </el-table>
  </div>
</template>
  <script>
import { getZLPDList } from "@/api/dataStatis";
export default {
  name: "ZFJGDetail",

  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      tableData: [],

      loading: false,
      loadingBG: "rgba(0, 0, 0, 0.2)",
    };
  },

  methods: {
    changeVisible(val) {
      this.dialogVisible = val;
    },
    changeTime(tr) {
      this.searchForm.start_time = tr[0] ? tr[0] : "";
      this.searchForm.end_time = tr[1] ? tr[1] : "";
    },
    handleSearch() {
      this.$refs.table.getData();
    },
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (columnIndex <= 2) {
        // 只对 type 列进行处理
        const rowspan = this.getRowspan(row, rowIndex);
        if (rowspan >= 2) {
          return {
            rowspan,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    getRowspan(row, rowIndex) {
      const currentFactorMainNumber = row.tid;
      let rowspan = 1; // 默认rowspan为1，也就是每个单元格只占一行
      // 如果当前行不是第一行，则先查看前一行，如果前一行的值（同列单元格）与当前行（同列单元格）相同，则将当前单元格与前一行合并（当前单元格占0行，rowspan=0）
      if (rowIndex > 0) {
        const previousRow = this.tableData[rowIndex - 1];
        const previousFactorMainNumber = previousRow.tid;
        if (currentFactorMainNumber === previousFactorMainNumber) {
          return 0;
        }
      }
      // 然后向查看，如果后面行（同列单元格）的值与当前行（同列单元格）相同，则每找到一行rowspan加1，直到找到与当前行（同列单元格）的值不同的行为止。（也就是说只能合并连续的行）
      for (let i = rowIndex + 1; i < this.tableData.length; i++) {
        const nextRow = this.tableData[i];
        const nextFactorMainNumber = nextRow.tid;
        if (currentFactorMainNumber === nextFactorMainNumber) {
          rowspan++;
        } else {
          break;
        }
      }
      return rowspan;
    },
    getData() {
      getZLPDList(this.data.id).then((res) => {
        this.tableData = res.data.list;
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
    <style lang="less" scoped>
.project-name {
  line-height: 50px;
  padding: 0 10px;
  background: #12407f;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #60fff6;
  font-size: 14px;
  .count {
    font-size: 20px;
    font-weight: bold;
    vertical-align: top;
  }
  img {
    width: 20px;
    vertical-align: top;
    margin: 15px 10px;
  }
}
</style>