<template>
  <!-- 质量报告 -->
  <div class="body">
    <div class="report" @click="exportReport()">导出报告</div>
    <div class="header">
      {{ reportData.basicInfo&&reportData.basicInfo.begin_time }}{{ reportData.basicInfo&&reportData.basicInfo.task_name }}质量报告
    </div>

    <div class="content">
      <div class="title">基础信息:</div>
      <div class="message">
        <a-row type="flex" justify="space-around">
          <a-col :span="6">
            <div class="height-100">
              <span class="mes-title">所属任务名名称:</span>
              <span>{{ reportData.basicInfo&&reportData.basicInfo.task_name }}</span>
            </div>
          </a-col>
          <a-col :span="6">
            <span class="mes-title">实例名称:</span>
            <span>{{ reportData.basicInfo&&reportData.basicInfo.task_instance_name }}</span>
          </a-col>
        </a-row>
        <a-row type="flex" justify="space-around">
          <a-col :span="6">
            <div class="height-100">
              <span class="mes-title">实例执行时间:</span>
              <span>{{ reportData.basicInfo&&reportData.basicInfo.create_time }}</span>
            </div>
          </a-col>
          <a-col :span="6">
            <span class="mes-title">实例运行时间:</span>
            <span>{{ reportData.basicInfo&&reportData.basicInfo.run_time }}</span>
          </a-col>
        </a-row>
      </div>
    </div>

    <div class="content">
      <div class="title">健康度分析</div>
      <div class="health">
        <a-row type="flex" justify="space-around" >
          <a-col :span="3">
            <div>
              <div class="total-health">
                <div class="health-title">总健康度</div>
                <!-- <a-progress
                  type="circle"
                  :stroke-color="colorShow(78)"
                  :percent="78"
                >
                  <template #format="percent">
                    <span :style="{'color': colorShow(78),'font-size': '28px'}">{{ percent }}</span>
                  </template>
                </a-progress> -->
                <PieChart
                  ref="PieChart"
                  :chartColor="colorShow(reportData.sumHealth)"
                  :chartData="reportData.sumHealth"/>
              </div>
            </div>
          </a-col>
          <a-col :span="13">
            <div>
              <div style="font-size: 18px;font-weight: 600;">维度健度</div>
              <div class="wdhearth">
                <div v-for="(item,index) in reportData.dimensionHealth" :key="index">
                  <div class="wdhearth-tit">{{ item.title }}</div>
                  <!-- <a-progress
                    type="circle"
                    :stroke-color="item.color"
                    :percent="item.number"
                  >
                    <template #format="percent">
                      <span :style="{'color': item.color,'font-size': '28px'}">{{ percent }}</span>
                    </template>
                  </a-progress> -->
                  <PieChart
                    :ref="'PieChart'+index"
                    :id="index"
                    :chartColor="item.color"
                    :chartData="item.number"/>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <div class="content">
      <div class="title">规则评分分析</div>
      <div class="chart">
        <div class="chart-title">{{ this.headLine }}</div>
        <HealthChart
          ref="healthChart"
          :chartColumns="chartColumns"
          :chartData="chartData"
          :chartColor="chartColor"/>
      </div>
    </div>

    <div class="content">
      <div class="title">校验详情</div>
      <div class="table">
        <FilterTable
          ref="table"
          :columns="columns"
          :dataSource="runResultData.data_object"
          :isSelected="isSelected"
          :total="total"/>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
import FilterTable from '@/components/filterTable'
import HealthChart from '../../components/HealthChart'
import PieChart from '../../components/pieChart'
import { qualityReport, runResult } from '@/api/quality/reports.js'
export default {
  data() {
    return {
      isSelected: false,
      columns: [
        {
          title: '字段名称',
          dataIndex: 'attr_name',
          key: 'attr_name',
          align: 'center'
        },
        {
          title: '规则名称',
          dataIndex: 'rule_name',
          key: 'rule_name',
          align: 'center'
        },
        {
          title: '总行数',
          dataIndex: 'data_size',
          key: 'data_size',
          align: 'center'
        },
        {
          title: '错误行数',
          dataIndex: 'error_size',
          key: 'error_size',
          align: 'center'
        },
        {
          title: '错误率',
          dataIndex: 'error_rate',
          key: 'error_rate',
          align: 'center'
        },
        {
          title: '规则权重',
          dataIndex: 'rules_weight',
          key: 'rules_weight',
          align: 'center'
        },
        {
          title: '评分',
          dataIndex: 'rules_score',
          key: 'rules_score',
          align: 'center'
          // scopedSlots: { customRender: 'rules_score' }
          // fixed: 'left',
        }
      ],
      logDataSource: [],
      total: 0,
      hearthData: [
        {
          title: '唯一性',
          number: 100
        },
        {
          title: '合法性',
          number: 56
        },
        {
          title: '准确性',
          number: 1
        },
        {
          title: '完整性',
          number: 28
        },
        {
          title: '及时性',
          number: 65
        },
        {
          title: '一致性',
          number: 90
        }
      ],
      chartColumns: [],
      chartData: [],
      chartColor: [],
      reportData: {},
      runResultData: {},
      reportId: null,
      headLine: null
    }
  },
   components: {
    HealthChart,
    FilterTable,
    PieChart
  },
  computed: {

  },
  created() {

  },
  mounted() {
    const { id } = this.$route.query
    this.reportId = id
    this.getList(id)
    this.$refs.PieChart.initEchartsData()
    // console.log('this.$refs.PieChart.echartImg', this.$refs.healthChart.echartImg)
    // this.hearthData.forEach((item, index) => {
      // const name = 'PieChart' + index
    // this.$refs.PieChart0[0].initEchartsData()
    // this.$refs.PieChart1[0].initEchartsData()
    // this.$refs.PieChart2[0].initEchartsData()
    // this.$refs.PieChart3[0].initEchartsData()
    // this.$refs.PieChart4[0].initEchartsData()
    // this.$refs.PieChart5[0].initEchartsData()
  },
  methods: {
    exportReport() {
      // this.$refs.healthChart.echartImg
        const url = process.env.VUE_APP_BASE_API + '/system/taskInstance/qualityReportExports'
        const parmes = {
           histogramImg: this.$refs.healthChart.echartImg,
           sumImg: this.$refs.PieChart.echartImg,
           id: this.reportId,
           handTitle: this.headLine,
           imgLength: JSON.stringify(this.reportData.dimensionHealth.length)
        }
        this.reportData.dimensionHealth.forEach((item, index) => {
          const num = index + 1
          parmes['image' + num] = this.$refs['PieChart' + index][0].echartImg
          parmes['dimen' + num] = item.title
        })
        // window.open(url, '_target')
      // qualityReportExports({ image1: this.$refs.healthChart.echartImg, id: this.reportId, image2: this.$refs.healthChart.echartImg, image3: this.$refs.healthChart.echartImg }).then(res => {
      // })
      this.httpPost(url, parmes)
    },

    httpPost(URL, PARAMS) {
      var temp = document.createElement('form')
      temp.action = URL
      temp.method = 'post'
      temp.target = '_blank' // 1.跳转新窗口需要设置该参数 2.当前页跳转可以去掉该参数
      temp.style.display = 'none'

      for (var x in PARAMS) {
          var opt = document.createElement('textarea')
          opt.name = x
          opt.value = PARAMS[x]
          temp.appendChild(opt)
      }

      document.body.appendChild(temp)
      temp.submit()

      return temp
    },

    colorShow(e) {
      if (e > 80 && e <= 100) {
        return '#81F781'
      } else if (e > 60 && e <= 80) {
        return '#58D3F7'
      } else if (e > 40 && e <= 60) {
        return '#FF8000'
      } else if (e > 0 && e <= 40) {
        return '#FF4000'
      }
    },
    getList(id) {
      qualityReport({ id: id }).then(res => {
        this.reportData = res.data
        this.getQualityReportData(this.reportData.dimensionHealth)
        this.sumHealth = res.sumHealth
      })
      runResult(id).then(res => {
        this.runResultData = res.data
        this.headLine = res.headLine
        this.getRunResultData(res.rulesScore)
      })
    },
    getQualityReportData(data) {
       data.forEach(item => {
        item.color = this.colorShow(item.number)
      })
    },
    getRunResultData(data) {
      const chartColArr = []
      const chartDataArr = []
      const chartColorArr = []
      data.forEach(item => {
        item.color = this.colorShow(item.number)
        chartColArr.push(item.title)
        chartColorArr.push(item.color)
        chartDataArr.push(item.number)
      })
      this.chartColumns = chartColArr
      this.chartData = chartDataArr
      this.chartColor = chartColorArr
      console.log('%c [ this.chartColor ]-312', 'font-size:13px; background:pink; color:#bf2c9f;', this.chartColor)
      this.$refs.healthChart.initEchartsData()
    }
  }
}
</script>

<style lang='less' scoped>
.body{
  padding: 50px 10%;
  .content{
    margin: 30px 0;
    .chart{
      height: 500px;
      .chart-title{
         font-size: 14px;
         font-weight: 600;
         text-align: center;
      }
    }
  }
   .message{
    font-size: 20px;
    .mes-title{
    font-weight: 600;
    margin-right: 20px;
    }
  }
}
.report{
  position: absolute;
  top: 1%;
  right: 1%;
  font-size: 28px;
  font-weight: 600;
  cursor: pointer;
}
.health{
  margin-left: 10%;
  .total-health{
    .health-title{
      margin-bottom: 34px;
      font-size: 18px;
      font-weight: 600;
    }
  }
  .wdhearth{
    display: flex;
    justify-content: space-around;
    .wdhearth-tit{
      font-size: 16px;
      text-align: center;
      margin-bottom: 14px;
    }
  }

}
.title{
  margin: 30px 0;
  margin-left: 10%;
  color: #000;
  font-size: 20px;
  font-weight: 700;

}
.table{
  padding: 0px 10%;
}
.header{
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}
</style>
