<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-table
          :data="reportTableData1"
          :span-method="objectSpanMethod1"
          border
          tooltip-effect="dark"
          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" :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"
          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" />
        </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.getReportBySource()
    this.getReportByType()
  },
  methods: {
    getReportBySource() {
      getReportBySource().then(response => {
        if (response.success) {
          this.reportTableData1 = response.data
          this.rowspan1()
        }
      })
    },
    getReportByType() {
      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(percentage) {
      if (percentage < 5) {
        return '#67c23a'
      } else if (percentage < 10) {
        return '#909399'
      } else {
        return '#e6a23c'
      }
    },
    cellFormat(percentage) {
      return `${percentage}`
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
