<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">{{ scoreValue }}</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"
      :cell-style="tableCellStyle"
    >
      <el-table-column
        label="指标"
        align="center"
        prop="check_type_str"
      ></el-table-column>
      <el-table-column label="部位" align="center" prop="is_important">
        <template slot-scope="scope">
          <span>{{
            scope.row.is_important == 1 ? "重要部位" : "一般部位"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="column in columns"
        :key="column.key"
        :label="column.label"
        align="center"
        :prop="column.key"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getZLJCList } from "@/api/dataStatis";
export default {
  name: "ZFJGDetail",

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

      loading: false,
      loadingBG: "rgba(0, 0, 0, 0.2)",
      columns: [],
      allData: [],
      scoreValue: ''
    };
  },

  methods: {
    tableCellStyle({ row, column, rowIndex, columnIndex }){
      for (let i = 0; i < this.columns.length; i++) {
        if(column.property == this.columns[i].key && this.isRed(row[this.columns[i].key])) {
            return 'background: #46234c; color: #ff3737;'
          }
      }
    },
    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 == 0) {
        // 只对 type 列进行处理
        const rowspan = this.getRowspan(row, rowIndex);
        if (rowspan >= 1) {
          return {
            rowspan,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    getRowspan(row, rowIndex) {
      const currentFactorMainNumber = row.check_type;
      let rowspan = 1; // 默认rowspan为1，也就是每个单元格只占一行
      // 如果当前行不是第一行，则先查看前一行，如果前一行的值（同列单元格）与当前行（同列单元格）相同，则将当前单元格与前一行合并（当前单元格占0行，rowspan=0）
      if (rowIndex > 0) {
        const previousRow = this.tableData[rowIndex - 1];
        const previousFactorMainNumber = previousRow.check_type;
        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.check_type;
        if (currentFactorMainNumber === nextFactorMainNumber) {
          rowspan++;
        } else {
          break;
        }
      }
      return rowspan;
    },

    getData() {
      let id = this.tabnamenow == 'ZLPD' ? this.data.id : this.data.project_id
      getZLJCList(id).then((res) => {
        this.allData = [...res.data.score_data];
        this.infoData = res.data.project_info
        this.scoreValue = this.tabnamenow == 'ZLPD' ? this.data.quality_check_score : this.infoData.quality_check_score 

        let arr = [];
        res.data.score_data.forEach((item) => {
          item[`unqualified_percent${item.entrust_type}`] =
            item.unqualified_percent + "%";
          let index = arr.findIndex(
            (row) =>
              row.check_type == item.check_type &&
              row.is_important == item.is_important
          );
          if (index >= 0) {
            arr[index][`unqualified_percent${item.entrust_type}`] =
              item.unqualified_percent + "%";
          } else {
            arr.push(item);
          }
        });
        console.log(arr);
        this.getColumns();
        this.tableData = arr;
      });
    },
    isRed(str){
      if (str) {
        let num = str.indexOf('%')
        if (num >= 0) {
          let str1 = str.substring(0, num) * 1
          return str1 > 0
        }
      }else {
        return false
      }
    },
    getColumns() {
      let arr = [];
      this.columns = [];
      this.allData.forEach((item) => {
        let index = arr.findIndex((row) => row.key == item.entrust_type);
        if (index == -1) {
          arr.push({ key: item.entrust_type, value: item.entrust_type_str });
        }
      });
      arr.forEach((item) => {
        this.columns.push({
          label: item.value + "不合格率",
          key: `unqualified_percent${item.key}`,
        });
      });
      this.columns = [...this.columns];
      console.log(arr, "arr");
    },
  },
  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;
  }
}
.red{
  color: rgb(248, 98, 98);
}
</style>