<template>
  <div>
    <el-card>
      <div style="font-size:20px;margin-left:300px;font-weigth:20px">场景用例执行结果</div>
      <div id="chartPie" style="width:900px ;height:400px;"></div>
    </el-card>
    <el-card>
      <el-table>

      </el-table>
    </el-card>
  </div>
</template>
<script>
import { getReportDetail } from '@/api/getAutoReport'
export default {
  name: '',
  data() {
    return {
      queryReportDetail: {
        namespace: '',
        batch: ''
      },
      charts: '',
      opinion: ['成功', '失败'],
      opinionData: [],
      reportDetailList: []
    }
  },
  created() {
    this.$bus.$off('reportDetail').$on('reportDetail', (row) => {
      // console.log('参数信息', row)
      this.queryReportDetail.namespace = row.namespace
      this.queryReportDetail.batch = row.batch
      this.getReportDetail()
    })
  },
  mounted() {},
  methods: {
    drawPieChart(id) {
      this.charts = this.$echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        legend: {
          padding: [10, 50, 0, 0],
          left: 300,
          data: this.opinion,
          bottom: 0
        },
        series: [
          {
            name: '运行结果',
            type: 'pie',
            radius: '60%',
            center: ['40%', '60%'],
            // avoidLabelOverlap: true,
            padding: [5, 10, 5, 10],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function (params) {
                // 自定义颜色
                var colorList = ['#67C23A', '#FF0000']
                return colorList[params.dataIndex]
              }
            },
            data: this.opinionData
          }
        ]
      })
    },
    // 获取接口详情信息
    getReportDetail() {
      getReportDetail(this.queryReportDetail).then((resp) => {
        this.opinionData = []
        console.log('返回信息', resp)
        this.opinionData.push(
          {
            value: resp.data.data.fail,
            name: '成功'
          },
          {
            value: resp.data.data.pass,
            name: '失败'
          }
        )
        this.$nextTick(() => {
          this.drawPieChart('chartPie')
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
div-style {
  font-size: 25px;
  color: #858585;
  margin-left: 300px;
}
</style>
