<template>
  <div class="report">
    <div class="reportheader">
      <h2>测试报告</h2>
    </div>
    <!-- 数据总计区 -->
    <el-card>
      <el-collapse v-model="activeNames" @change="handleCollapseChange">
        <el-collapse-item title="报告汇总" name="1">
          <div class="total">
            <!-- 汇总区域 -->
            <div class="panel">
              <div class="data">
                <p style="color: #1CB395; font-weight: bold; margin-bottom: 10px;">
                  用例名称：
                  <el-input
                    v-model="testcaseName"
                    :disable="true"
                    style="width: 200px;"
                    size="small"
                  ></el-input>
                </p>
                <p style="color: #1CB395; font-weight: bold; margin-bottom: 10px;">
                  用例总数：
                  <el-input
                    v-model="totalCaseNum"
                    :disable="true"
                    style="width: 200px;"
                    size="small"
                  ></el-input>
                </p>
                <p style="color: #1CB395; font-weight: bold; margin-bottom: 10px;">
                  用例通过：
                  <el-input
                    v-model="passedCaseNum"
                    :disable="true"
                    style="width: 200px;"
                    size="small"
                  ></el-input>
                </p>
                <p style="color: #EE5968; font-weight: bold; margin-bottom: 10px;">
                  用例失败：
                  <el-input
                    v-model="failedCaseNum"
                    :disable="true"
                    style="width: 200px;"
                    size="small"
                  ></el-input>
                </p>
                <p style="color: #F9B264; font-weight: bold; margin-bottom: 10px;">
                  用例跳过：
                  <el-input
                    v-model="jumpCaseNum"
                    :disable="true"
                    style="width: 200px;"
                    size="small"
                  ></el-input>
                </p>
                <p style="color: #1CB395; font-weight: bold; margin-bottom: 10px;">
                  开始时间：
                  <el-input v-model="startTime" :disable="true" style="width: 200px;" size="small"></el-input>
                </p>
                <p style="color: #1CB395; font-weight: bold;">
                  运行时长：
                  <el-input
                    v-model="elapsedTime"
                    :disable="true"
                    style="width: 200px;"
                    size="small"
                  ></el-input>
                </p>
              </div>
            </div>
            <div class="panel">
              <div class="chart"></div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="详细数据" name="2">
          <div class="body">
            <!-- 头部过滤区 -->
            <div class="detail">
              <div class="filter">
                <p>
                  接口地址：&nbsp;
                  <el-select
                    v-model="value"
                    clearable
                    placeholder="请选择"
                    style="width: 300px;"
                    size="medium"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </p>
                <p>
                  结果：&nbsp;
                  <el-select v-model="value" clearable placeholder="请选择" size="medium">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </p>
              </div>
              <div class="num">
                <p style="color: #1CB395;">用例数: 10000 |&nbsp;</p>
                <p style="color: #1CB395;">成功: 0 |&nbsp;</p>
                <p style="color: #1CB395;">失败: 0 |&nbsp;</p>
                <p style="color: #1CB395;">跳过: 0 &nbsp;</p>
              </div>
            </div>
          </div>
          <!-- 表格区域 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="编号" width="100px"></el-table-column>
            <el-table-column prop="date" label="请求地址" width="180"></el-table-column>
            <el-table-column prop="name" label="响应结果" width="180"></el-table-column>
            <el-table-column prop="address" label="用例描述"></el-table-column>
            <el-table-column prop="address" label="耗时"></el-table-column>
            <el-table-column prop="address" label="结果"></el-table-column>
            <el-table-column prop="address" label="操作"></el-table-column>
          </el-table>
          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          ></el-pagination>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1', '2'],
      testcaseName: '123', // 用例名称
      totalCaseNum: 100, // 总用例数
      passedCaseNum: 50, // 成功用例数
      failedCaseNum: 50, // 失败用例数
      jumpCaseNum: 0, // 跳过用例数
      startTime: 'xxx', // 开始时间
      elapsedTime: 123, // 运行时间
      // 测试结果饼图Option
      resultOption: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['成功', '失败', '跳过']
        },
        series: [
          {
            name: '用例数',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: 100, name: '成功' },
              { value: 20, name: '失败' },
              { value: 0, name: '跳过' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#1CB395', '#EE5968', '#F9B264']
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.setResultChart()
  },
  methods: {
    handleCollapseChange(val) {
      console.log(val)
    },
    // 渲染结果饼图
    setResultChart() {
      var resultChart = this.$echarts.init(
        document.querySelector('.panel .chart')
      )
      resultChart.setOption(this.resultOption)
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.reportheader {
  height: 50px;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 0;
  h2 {
    text-align: center;
    font-size: 22px;
    color: #18b394;
    padding-top: 10px;
  }
}

.total {
  position: relative;
  display: flex;
  height: 400px;
  width: 100%;
  .panel {
    flex: 1;
    margin: 0 10px;
    .data {
      margin-left: 30px;
    }
    .chart {
      height: 100%;
      width: 100%;
    }
  }
}

.total::before {
  position: absolute;
  top: 0;
  width: 100%;
  content: '';
  border-top: 1px solid #eceef6;
}

.panel:nth-child(1) {
  border-right: 1px solid #eceef6;
  margin-top: 25px;
}

.body {
  position: relative;
}

.detail::before {
  position: absolute;
  top: 0;
  width: 100%;
  content: '';
  border-top: 1px solid #eceef6;
}

.detail {
  display: flex;
  .filter {
    flex: 1;
    display: flex;
    p {
      flex: 1;
    }
  }
  .num {
    display: flex;
    width: 400px;
    padding-top: 10px;
    justify-content: flex-end;
    .p {
      flex: 1;
      text-align: center;
    }
  }
}
</style>
