<template>
  <Dialog
    :title="data.project_name"
    :visible="dialogVisible"
    width="1200px"
    @change-visible="changeVisible"
    :destroy-on-close="true"
    is-full-screen
  >
    <div class="top-scores">
      <div class="top-score">
        <img src="@/assets/images/dialogs/zt.png" alt="" />
        <div>工程整体得分</div>
        <div
          class="count"
          :style="{
            color: project_info.total_score < warningNum[6] ? '#f86262' : '',
          }"
        >
          {{ project_info.total_score }}
        </div>
      </div>
      <div class="top-score">
        <img src="@/assets/images/dialogs/zfjg.png" alt="" />
        <div>政府监管得分</div>
        <div
          class="count"
          :style="{
            color:
              project_info.regulation_score < warningNum[2] ? '#f86262' : '',
          }"
        >
          {{ project_info.regulation_score }}
        </div>
      </div>
      <div class="top-score">
        <img src="@/assets/images/dialogs/gczl.png" alt="" />
        <div>工程质量得分</div>
        <div
          class="count"
          :style="{
            color:
              project_info.quality_total_score < warningNum[7] ? '#f86262' : '',
          }"
        >
          {{ project_info.quality_total_score }}
        </div>
      </div>
      <div class="top-score">
        <img src="@/assets/images/dialogs/cxcy.png" alt="" />
        <div>创新创优得分</div>
        <div
          class="count"
          :style="{
            color:
              project_info.excellence_score < warningNum[3] ? '#f86262' : '',
          }"
        >
          {{ project_info.excellence_score }}
        </div>
      </div>
    </div>

    <div class="scores">
      <div class="score-title">
        <div class="title">
          政府监管(得分：
          <span
            :style="{
              color:
                project_info.regulation_score < warningNum[2] ? '#f86262' : '',
            }"
          >
            {{ project_info.regulation_score }})</span
          >
          <el-tooltip
            v-if="project_info.regulation_score < warningNum[2]"
            class="item"
            effect="dark"
            :content="`低于合格分：${warningNum[2]}分`"
            placement="top"
          >
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
      <div class="score-detail">
        <el-table
          border
          class="dialog-data-table"
          :data="question_info"
          @row-click="showQuestion"
        >
          <el-table-column
            label="问题总数"
            align="center"
            prop="total_num"
          ></el-table-column>
          <el-table-column
            label="一般问题数量"
            align="center"
            prop="yb_num"
          ></el-table-column>
          <!-- <el-table-column
            label="一般问题扣分"
            align="center"
            prop="yb_score"
          ></el-table-column> -->
          <el-table-column
            label="较重问题数量"
            align="center"
            prop="jz_num"
          ></el-table-column>
          <!-- <el-table-column
            label="较重问题扣分"
            align="center"
            prop="jz_score"
          ></el-table-column> -->
          <el-table-column
            label="严重问题数量"
            align="center"
            prop="yz_num"
          ></el-table-column>
          <!-- <el-table-column
            label="严重问题扣分"
            align="center"
            prop="yz_score"
          ></el-table-column> -->
          <el-table-column
            label="总扣分"
            align="center"
            prop="total_koufen"
          ></el-table-column>
          <el-table-column
            label="最终得分"
            align="center"
            prop="total_score"
          ></el-table-column>
        </el-table>
      </div>
    </div>

    <div class="scores">
      <div class="score-title">
        <div class="title">
          工程质量(得分：
          <span
            :style="{
              color:
                project_info.quality_total_score < warningNum[7]
                  ? '#f86262'
                  : '',
            }"
          >
            {{ project_info.quality_total_score }})</span
          >
          <el-tooltip
            v-if="project_info.quality_total_score < warningNum[7]"
            class="item"
            effect="dark"
            :content="`低于合格分：${warningNum[7]}分`"
            placement="top"
          >
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
      <div class="score-detail">
        <div class="inner-title">
          质量检测<span>(得分：{{ project_info.quality_check_score }})</span>
        </div>

        <el-table
          border
          class="dialog-data-table"
          :data="check_info"
          :span-method="handleSpanJC"
          style="margin-bottom: 10px; margin-top: 0"
        >
          <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 class="inner-title">
          质量评定<span>(得分：{{ project_info.quality_score }})</span>
        </div>
        <el-table
          border
          class="dialog-data-table"
          :data="pd_info"
          style="margin-top: 0"
          :span-method="handleSpan"
          :max-height="400"
        >
          <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="center"
            prop="part_name"
          ></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>
    </div>

    <div class="scores">
      <div class="score-title">
        <div class="title">
          创新创优(得分：

          <span
            :style="{
              color:
                project_info.excellence_score < warningNum[3] ? '#f86262' : '',
            }"
          >
            {{ project_info.excellence_score }})</span
          >
          <el-tooltip
            v-if="project_info.excellence_score < warningNum[3]"
            class="item"
            effect="dark"
            :content="`低于合格分：${warningNum[3]}分`"
            placement="top"
          >
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
      <div class="score-detail">
        <el-table border class="dialog-data-table" :data="excellence_info">
          <el-table-column
            label="创新工法"
            align="center"
            prop="cxgf_score"
          ></el-table-column>
          <el-table-column
            label="工程专利"
            align="center"
            prop="patent_score"
          ></el-table-column>
          <el-table-column
            label="优秀质量管理成果"
            align="center"
            prop="result_score"
          ></el-table-column>
          <el-table-column
            label="工程质量获奖"
            align="center"
            prop="city_project_score"
          ></el-table-column>
          <el-table-column
            label="最终得分"
            align="center"
            prop="total_score"
          ></el-table-column>
        </el-table>
      </div>
    </div>

    <ZFJGDialog
      :data="currentRowData"
      :visible="ZFJGVisible"
      @change-visible="(val) => (ZFJGVisible = val)"
    ></ZFJGDialog>
  </Dialog>
</template>
  <script>
import { getAreaDetail } from "@/api/dataStatis";
import ZFJGDialog from "./ZFJGDialog.vue";
export default {
  name: "AreaProjectDetail",
  components: { ZFJGDialog },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {},
      project_info: {},
      warningNum: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
        7: 0,
      },
      excellence_info: [],
      question_info: [],
      pd_info: [],
      columns: [],
      allData: [],
      check_info: [],
      ZFJGVisible: false,
      currentRowData: {},
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("change-visible", val);
      },
    },
  },
  methods: {
    changeVisible(val) {
      this.dialogVisible = val;
    },
    getData() {
      getAreaDetail(this.data.id).then((res) => {
        this.excellence_info = [res.data.excellence_info];
        this.question_info = [res.data.question_info];
        this.project_info = res.data.project_info;
        this.pd_info = res.data.pd_info;
        // this.check_info = res.data.check_info;

        this.allData = [...res.data.check_info];

        let arr = [];
        res.data.check_info.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);
          }
        });
        this.getColumns();

        this.check_info = arr;
      });
      //   project_info 工程信息
      //   question_info 政府监管
      //   check_info质量检测
      //   pd_info评定
      //   excellence_info创新创优
    },

    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.pd_info[rowIndex - 1];
        const previousFactorMainNumber = previousRow.tid;
        if (currentFactorMainNumber === previousFactorMainNumber) {
          return 0;
        }
      }
      // 然后向查看，如果后面行（同列单元格）的值与当前行（同列单元格）相同，则每找到一行rowspan加1，直到找到与当前行（同列单元格）的值不同的行为止。（也就是说只能合并连续的行）
      for (let i = rowIndex + 1; i < this.pd_info.length; i++) {
        const nextRow = this.pd_info[i];
        const nextFactorMainNumber = nextRow.tid;
        if (currentFactorMainNumber === nextFactorMainNumber) {
          rowspan++;
        } else {
          break;
        }
      }
      return rowspan;
    },

    handleSpanJC({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        // 只对 type 列进行处理
        const rowspan = this.getRowspanJC(row, rowIndex);
        if (rowspan >= 1) {
          return {
            rowspan,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    getRowspanJC(row, rowIndex) {
      const currentFactorMainNumber = row.check_type;
      let rowspan = 1; // 默认rowspan为1，也就是每个单元格只占一行
      // 如果当前行不是第一行，则先查看前一行，如果前一行的值（同列单元格）与当前行（同列单元格）相同，则将当前单元格与前一行合并（当前单元格占0行，rowspan=0）
      if (rowIndex > 0) {
        const previousRow = this.check_info[rowIndex - 1];
        const previousFactorMainNumber = previousRow.check_type;
        if (currentFactorMainNumber === previousFactorMainNumber) {
          return 0;
        }
      }
      // 然后向查看，如果后面行（同列单元格）的值与当前行（同列单元格）相同，则每找到一行rowspan加1，直到找到与当前行（同列单元格）的值不同的行为止。（也就是说只能合并连续的行）
      for (let i = rowIndex + 1; i < this.check_info.length; i++) {
        const nextRow = this.check_info[i];
        const nextFactorMainNumber = nextRow.check_type;
        if (currentFactorMainNumber === nextFactorMainNumber) {
          rowspan++;
        } else {
          break;
        }
      }
      return rowspan;
    },
    getColumns() {
      let arr = [];
      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];
    },
    showQuestion() {
      this.currentRowData = {
        id: this.data.id,
        regulation_score: this.project_info.regulation_score,
        project_name: this.project_info.project_name,
      };
      this.ZFJGVisible = true;
    },
  },
  mounted() {},
  watch: {
    dialogVisible(val) {
      if (val) {
        this.warningNum = window.warningNum;
        this.$nextTick(() => {
          this.getData();
        });
      }
    },
  },
};
</script>
  <style lang="less" scoped>
.scores {
  margin-bottom: 10px;
}
.score-title {
  background: #16488b;
  padding: 0 24px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  .title {
    font-size: 14px;
    color: #60fff6;
    font-weight: bold;
    position: relative;
    &::before {
      position: absolute;
      content: "";
      width: 3px;
      height: 16px;
      background: #60fff6;
      left: -12px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .got-score {
    color: #d9d9d9;
    font-size: 14px;
  }
}
.score-detail {
  background: #0c3163;
  border: 1px solid #1f4c89;
  border-top: 0;
  padding: 12px 20px;
}
.w-50 {
  width: 50%;
  text-align: left;
  color: #d9d9d9;
  font-size: 14px;
}

.top-scores {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .top-score {
    width: calc(25% - 6px);
    font-size: 16px;
    line-height: 40px;
    padding: 15px 30px;
    background: #12407f;
    color: #d9d9d9;
    white-space: nowrap;

    div {
      line-height: 40px;
      display: inline-block;
      vertical-align: top;
    }
    &:first-child {
      background: #117093;
      border: 4px solid #1d81a6;
    }
    .count {
      font-size: 28px;
      line-height: 40px;
      vertical-align: top;
      font-weight: bold;
      margin-left: 20px;
      display: inline-block;
    }
    img {
      width: 40px;
      height: 40px;
      vertical-align: top;
      margin-right: 10px;
    }
  }
}
.inner-title {
  background: #16488b;
  line-height: 40px;
  text-align: center;
  color: #0fd8d0;
  span {
    color: #fff;
  }
}
.el-icon-warning {
  color: red;
  font-size: 0.2rem;
  margin-left: 0.12rem;
  line-height: 0.4rem;
  vertical-align: top;
}
</style>