<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-table
          :data="reportTableData1"
          :span-method="objectSpanMethod1"
          border
          tooltip-effect="dark"
          :max-height="300"
          style="width: 100%; margin: 15px 0;"
        >
          <el-table-column prop="ruleSourceName" label="数据源" align="center" />
          <el-table-column prop="ruleLevelName" label="规则级别" align="center" />
          <el-table-column prop="checkErrorCount" label="不合规数量" align="center">
            <template scope="scope">
              <el-progress :percentage="scope.row.checkErrorCount" :stroke-width="20" :text-inside="true" :color="colorFormat(scope.row.ruleLevelName)" :format="cellFormat" />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="10" :offset="4">
        <el-table
          :data="reportTableData2"
          :span-method="objectSpanMethod2"
          border
          tooltip-effect="dark"
          :max-height="300"
          style="width: 100%; margin: 15px 0;"
        >
          <el-table-column prop="ruleTypeName" label="规则类型" align="center" />
          <el-table-column prop="ruleName" label="规则名称" align="center" />
          <el-table-column prop="checkErrorCount" label="不合规数量" align="center" >
            <template scope="scope">
              <el-badge :value="scope.row.checkErrorCount" :type="typeFormat(scope.row.ruleLevelName)">
                {{scope.row.ruleLevelName}}
              </el-badge>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getReportBySource, getReportByType } from '@/api/quality/checkreport'

export default {
  name: 'AnalysisReport',
  data() {
    return {
      spanArr1: [],
      position1: 0,
      reportTableData1: [],
      spanArr2: [],
      position2: 0,
      reportTableData2: []
    }
  },
  created() {
    this.getReportData1()
    this.getReportData2()
  },
  methods: {
    getReportData1() {
      getReportBySource().then(response => {
        if (response.success) {
          this.reportTableData1 = response.data
          this.rowspan1()
        }
      })
    },
    getReportData2() {
      getReportByType().then(response => {
        if (response.success) {
          this.reportTableData2 = response.data
          this.rowspan2()
        }
      })
    },
    rowspan1() {
      this.reportTableData1.forEach((item, index) => {
        if (index === 0) {
          this.spanArr1.push(1)
          this.position1 = 0
        } else {
          if (this.reportTableData1[index].ruleSourceId === this.reportTableData1[index - 1].ruleSourceId) {
            this.spanArr1[this.position1] += 1
            this.spanArr1.push(0)
          } else {
            this.spanArr1.push(1)
            this.position1 = index
          }
        }
      })
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr1[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    rowspan2() {
      this.reportTableData2.forEach((item, index) => {
        if (index === 0) {
          this.spanArr2.push(1)
          this.position2 = 0
        } else {
          if (this.reportTableData2[index].ruleTypeId === this.reportTableData2[index - 1].ruleTypeId) {
            this.spanArr2[this.position2] += 1
            this.spanArr2.push(0)
          } else {
            this.spanArr2.push(1)
            this.position2 = index
          }
        }
      })
    },
    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr2[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    colorFormat(level) {
      if (level === '低') {
        return '#409eff'
      } else if (level === '中') {
        return '#e6a23c'
      } else {
        return '#f56c6c'
      }
    },
    cellFormat(percentage) {
      return `${percentage}`
    },
    typeFormat(level) {
      if (level === '低') {
        return 'primary'
      } else if (level === '中') {
        return 'warning'
      } else {
        return 'danger'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-badge__content {
  margin-top: 10px;
  right: 0px;
}
::v-deep .el-table__header th {
  background-color: #f5f5f5 !important;
}
</style>
