<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="10">
          <div class="rowStyle">
            <el-row>
              <el-col :span="4" style="color:#878080">用例名称：</el-col>
              <el-col :span="20">
                <div>
                  <el-input v-model="sceneName"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <div class="col_style">
                <el-col :span="4" style="color:#878080">用例总数：</el-col>
                <el-col :span="20">
                  <el-input v-model="totalNumber"></el-input>
                </el-col>
              </div>
            </el-row>
            <el-row>
              <div class="col_style">
                <el-col :span="4" style="color:#878080">运行时间(s)：</el-col>
                <el-col :span="20">
                  <el-input v-model="totalElapsedTime"></el-input>
                </el-col>
              </div>
            </el-row>
            <el-row>
              <div class="col_style">
                <el-col :span="4" style="color:#878080">通过个数：</el-col>
                <el-col :span="20">
                  <el-input v-model="totalPass"></el-input>
                </el-col>
              </div>
            </el-row>
            <el-row>
              <div class="col_style">
                <el-col :span="4" style="color:#878080">失败个数：</el-col>
                <el-col :span="20">
                  <el-input v-model="totalFail"></el-input>
                </el-col>
              </div>
            </el-row>
          </div>
        </el-col>

        <el-col :span="14">
          <div class="divStyle">{{sceneName}}用例执行结果</div>
          <div id="chartPie" style="width:900px ;height:250px;margin-top:10px"></div>
        </el-col>
      </el-row>

    </el-card>
    <el-card>
      <el-table :data="reportDetailList" style="width: 100%" :header-cell-style="{background:'#FFE4C4',color:'#606266'}">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-row>
              <el-col :span="2">
                <div class="colStyle">请求头</div>
              </el-col>
              <el-col :span="22">
                <json-viewer :expand-depth=3 :value='props.row.headers'></json-viewer>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="2" class="colStyle">请求参数</el-col>
              <el-col :span="22">
                <json-viewer :expand-depth=3 :value='props.row.parameters'></json-viewer>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="2" class="colStyle">响应结果</el-col>
              <el-col :span="22">
                <json-viewer :expand-depth=3 :value='props.row.response'></json-viewer>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="2" class="colStyle">断 言</el-col>
              <el-col :span="22">
                <el-table v-if="isShowTable" :data="validateList" border style="width: 60%" :header-cell-style="{background:'#E6F3F7',color:'#606266','text-align':'center'}"
                  :cell-style="{'text-align':'center',background:'#E3EDEB',color:'#606266'}">
                  <el-table-column prop="check" label="检查值" width="250px"></el-table-column>
                  <el-table-column prop="comparator" label="比较符" width="250px"></el-table-column>
                  <el-table-column prop="expect" label="预期结果"></el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column type='index' label="序号" width="100px"></el-table-column>
        <el-table-column prop="interfaceName" label="接口名称" width="250px"></el-table-column>
        <el-table-column prop="interfaceUrl" label="接口URL"></el-table-column>
        <el-table-column prop="elapsedTime" label="耗时(s)" width="200px"></el-table-column>
        <el-table-column prop="status" label="结果" width="200px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'pass' ? 'success' : 'danger'" close-transition  effect="dark">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { getReportDetail } from '@/api/getAutoReport'
export default {
  name: '',
  data() {
    return {
      queryReportDetail: {
        namespace: '',
        batch: ''
      },
      charts: '',
      opinion: ['成功', '失败'],
      opinionData: [],
      reportDetailList: [],
      sceneName: '',
      validateList: [
        { check: 'name', comparator: 'eq', expect: 'zhansan' },
        { check: 'age', comparator: 'eq', expect: '18' }
      ],
      isShowTable: false,
      totalElapsedTime: '',
      totalPass: '',
      totalFail: '',
      totalNumber: ''
    }
  },
  created() {
    this.$bus.$off('reportDetail').$on('reportDetail', (row) => {
      console.log('参数信息', row)
      this.queryReportDetail.namespace = row.namespace
      this.queryReportDetail.batch = row.batch
      this.sceneName = row.sceneName
      this.getReportDetail()
    })
  },
  mounted() {},
  methods: {
    drawPieChart(id) {
      this.charts = this.$echarts.init(document.getElementById(id))
      this.charts.setOption({
        // title: {
        //   text: '场景用例执行结果',
        //   subtext: '',
        //   left: 300
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        legend: {
          orient: 'vertical', // 图标展示形似（横/竖）
          left: 200,
          y: 'top',
          data: this.opinion
          // bottom: 0
        },
        series: [
          {
            name: '运行结果',
            type: 'pie',
            radius: '70%',
            // center: ['40%', '60%'],
            center: ['45%', '45%'], // 距离左跟上的位置
            padding: [500, 10, 0, 0],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function (params) {
                // 自定义颜色
                var colorList = ['#50CFC7', '#CD5E5D']
                return colorList[params.dataIndex]
              }
            },
            data: this.opinionData
          }
        ]
      })
    },
    // 获取接口详情信息
    getReportDetail() {
      getReportDetail(this.queryReportDetail).then((resp) => {
        this.opinionData = []
        this.reportDetailList = resp.data.data.list
        this.totalNumber = resp.data.data.total
        this.totalElapsedTime = resp.data.data.totalElapsedTime / 1000
        this.totalPass = resp.data.data.pass
        this.totalFail = resp.data.data.fail
        this.reportDetailList.forEach((item) => {
          item['headers'] = JSON.parse(item['headers'])
          item['parameters'] = JSON.parse(item['parameters'])
          item['response'] = JSON.parse(item['response'])
          item['elapsedTime'] = item['elapsedTime'] / 1000
          if (item['validate'] !== '[]') {
            console.log('666', item['validate'].length)
            this.validateList = item['validate']
            this.isShowTable = true
          }
        })

        this.opinionData.push(
          {
            value: resp.data.data.pass,
            name: '成功'
          },
          {
            value: resp.data.data.fail,
            name: '失败'
          }
        )
        this.$nextTick(() => {
          this.drawPieChart('chartPie')
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.divStyle {
  font-size: 18px;
  color: #333333;
  margin-left: 300px;
  font-weight: bold;
  margin-top: 20px;
}
.colStyle {
  font-size: 15px;
  font-weight: bold;
  // background: red;
  margin-top: 30px;
}
.rowStyle {
  margin-left: 150px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: bold;
}
.col_style {
  margin-top: 28px;
}
</style>
