<template>
  <div class="report-detail">
    <div class="header">
      <div class="header-title">开始时间：{{ detailData.createTime }} 结束时间：{{ detailData.updateTime }}</div>
      <div class="header-content">
        <div class="content-title">{{ detailData.take }}</div>
        <div class="left-wrap">
          <!-- 环形图 -->
          <div>
          </div>
          <div class="left-count">
            <div class="left-count-show">
              <div class="green-wrap"></div>
              <div style="font-weight: 600;">{{ detailData.stepsSucceedNumber }} 成功</div>
            </div>
            <el-divider></el-divider>
            <div class="left-count-show">
              <div class="red-wrap"></div>
              <div style="font-weight: 600;">{{ detailData.stepsErrorNumber }} 失败</div>
            </div>
            <el-divider></el-divider>
            <div class="left-count-show">
              <div class="gray-wrap"></div>
              <div style="font-weight: 600;">{{ detailData.stepsNotNumber }} 未执行</div>
            </div>
          </div>
        </div>
        <div class="middle-wrap">
          <div class="wrap-show">
            <div class="middle-wrap">
              <div class="title">{{ detailData.scenesNumber }}</div>
              <div>场景</div>
            </div>
            <div class="green-wrap"></div>
            <div class="middle-wrap">
              <div class="title">{{ detailData.scenesErrorNumber }}</div>
              <div>失败</div>
            </div>
            <div class="red-wrap"></div>
            <div class="middle-wrap">
              <div class="title">{{ detailData.scenesSucceedNumber }}</div>
              <div>成功</div>
            </div>
            <div class="gray-wrap"></div>
            <div class="middle-wrap">
              <div class="title">{{ detailData.scenesNotNumber }}</div>
              <div>未执行</div>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="wrap-show">
            <div class="middle-wrap">
              <div class="title">{{ detailData.stepsNumber }}</div>
              <div>步骤</div>
            </div>
            <div class="green-wrap"></div>
            <div class="middle-wrap">
              <div class="title">{{ detailData.stepsErrorNumber }}</div>
              <div>失败</div>
            </div>
            <div class="red-wrap"></div>
            <div class="middle-wrap">
              <div class="title">{{ detailData.stepsSucceedNumber }}</div>
              <div>成功</div>
            </div>
            <div class="gray-wrap"></div>
            <div class="middle-wrap">
              <div class="title">{{ detailData.stepsNotNumber }}</div>
              <div>未执行</div>
            </div>
          </div>
          <div></div>
        </div>
        <div class="right-wrap">
          <div class="error-wrap">
            <i class="el-icon-warning-outline" style="color: red; font-size: 30px;"></i>
            <div class="show-title">{{ detailData.faiiRate ? detailData.faiiRate : '0' }}</div>
            <div class="show-sub">失败</div>
          </div>
          <div class="error-wrap">
            <i class="el-icon-document-checked" style="font-size: 30px;"></i>
            <div class="show-title">{{ detailData.successAssertion ? detailData.successAssertion : '0/0' }}</div>
            <div class="show-sub">成功断言</div>
          </div>
        </div>

      </div>
    </div>
    <div class="list">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <div style="margin-left: 10px;">{{ detailData.name }}</div>
              </template>
              <div class="list-sub-wrap">
                <el-collapse accordion>
                  <el-collapse-item v-for="(item, index) in uiSceneStepsAllReportVOList">
                    <template slot="title">
                      <div class="sub-collapse">
                        <div class="left-collapse">
                          <div class="sub-title">{{ index + 1 }}</div>
                          <div>{{ item.name }}</div>
                        </div>
                        <div class="right-collapse">
                          <div>{{ item.take }}</div>
                          <el-button v-if="item.screenshot" size="mini" type="text" @click.native.stop="clickHandleScreenshot(item.screenshot)">截图</el-button>
                          <div class="collapse-status">
                            <div v-if="item.executionFlag === '1'">成功</div>
                            <div v-if="item.executionFlag === '0'">未执行</div>
                            <div v-if="item.executionFlag === '2'">执行失败</div>
                          </div>
                        </div>
                      </div>
                    </template>
                    <el-tabs v-model="active" @tab-click="handleClick" style="margin-left: 20px;">
                      <el-tab-pane label="日志" name="first">
                        <div class="tab-content">{{ item.logInfo }}</div>
                      </el-tab-pane>
                      <el-tab-pane label="断言" name="second">
                        <div class="tab-content">{{ item.assertionJson }}</div>
                      </el-tab-pane>
                      <el-tab-pane label="提取" name="third">
                        <div class="tab-content">{{ item.extractionDataJson }}</div>
                      </el-tab-pane>
                    </el-tabs>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="失败" name="second">
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <div style="margin-left: 10px;">{{ detailData.name }}</div>
              </template>
              <div class="list-sub-wrap">
                <el-collapse accordion>
                  <el-collapse-item v-for="(item, index) in uiSceneStepsErrorReportVOList">
                    <template slot="title">
                      <div class="sub-collapse">
                        <div class="left-collapse">
                          <div class="sub-title">{{ index + 1 }}</div>
                          <div>{{ item.name }}</div>
                        </div>
                        <div class="right-collapse">
                          <div>{{ item.take }}</div>
                          <el-button v-if="item.screenshot" size="mini" type="text" @click.native.stop="clickHandleScreenshot(item.screenshot)">截图</el-button>
                          <div class="collapse-status">
                            <div v-if="item.executionFlag === '1'">成功</div>
                            <div v-if="item.executionFlag === '0'">未执行</div>
                            <div v-if="item.executionFlag === '2'">执行失败</div>
                          </div>
                        </div>
                      </div>
                    </template>
                    <el-tabs v-model="active" @tab-click="handleClick" style="margin-left: 20px;">
                      <el-tab-pane label="日志" name="first">
                        <div class="tab-content">{{ item.logInfo }}</div>
                      </el-tab-pane>
                      <el-tab-pane label="断言" name="second">
                        <div class="tab-content">{{ item.assertionJson }}</div>
                      </el-tab-pane>
                      <el-tab-pane label="提取" name="third">
                        <div class="tab-content">{{ item.extractionDataJson }}</div>
                      </el-tab-pane>
                    </el-tabs>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="未执行" name="third">
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <div style="margin-left: 10px;">{{ detailData.name }}</div>
              </template>
              <div class="list-sub-wrap">
                <el-collapse accordion>
                  <el-collapse-item v-for="(item, index) in uiSceneStepsNotReportVOList">
                    <template slot="title">
                      <div class="sub-collapse">
                        <div class="left-collapse">
                          <div class="sub-title">{{ index + 1 }}</div>
                          <div>{{ item.name }}</div>
                        </div>
                        <div class="right-collapse">
                          <div>{{ item.take }}</div>
                          <el-button v-if="item.screenshot" size="mini" type="text" @click.native.stop="clickHandleScreenshot(item.screenshot)">截图</el-button>
                          <div class="collapse-status">
                            <div v-if="item.executionFlag === '1'">成功</div>
                            <div v-if="item.executionFlag === '0'">未执行</div>
                            <div v-if="item.executionFlag === '2'">执行失败</div>
                          </div>
                        </div>
                      </div>
                    </template>
                    <el-tabs v-model="active" @tab-click="handleClick" style="margin-left: 20px;">
                      <el-tab-pane label="日志" name="first">
                        <div class="tab-content">{{ item.logInfo }}</div>
                      </el-tab-pane>
                      <el-tab-pane label="断言" name="second">
                        <div class="tab-content">{{ item.assertionJson }}</div>
                      </el-tab-pane>
                      <el-tab-pane label="提取" name="third">
                        <div class="tab-content">{{ item.extractionDataJson }}</div>
                      </el-tab-pane>
                    </el-tabs>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog :visible.sync="dialogVisible" append-to-body width="80%" :close-on-click-modal="false">
      <div v-loading="imageLoading" style="min-height: 200px;">
        <el-image 
          v-if="previewUrl"
          style="width: 100%" 
          :src="previewUrl" 
          :preview-src-list="[previewUrl]"
          fit="contain"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getTestReportDetail, getScreenshot } from '../../../api/uiTest/testReport';

export default {
  name: "TestReportDetail",
  components: { echarts },
  data() {
    return {
      activeName: 'first',
      uiSceneStepsAllReportVOList: [], // 全部
      uiSceneStepsErrorReportVOList: [], // 失败
      uiSceneStepsNotReportVOList: [], // 未执行
      active: 'first',
      detailData: {}, // 详情内容
      dialogVisible: false, // 图片预览对话框是否显示
      previewUrl: '', // 预览图片的URL
      imageLoading: false, // 图片加载状态
    }
  },
  mounted() {
    this.getDetailDAta()
  },
  methods: {
    handleClick() { },
    // 获取详情
    getDetailDAta() {
      getTestReportDetail(this.$route.query.id).then(res => {
        if (res.code === 200) {
          this.detailData = res.data
          this.uiSceneStepsAllReportVOList = res.data.uiSceneStepsAllReportVOList
          this.uiSceneStepsErrorReportVOList = res.data.uiSceneStepsErrorReportVOList
          this.uiSceneStepsNotReportVOList = res.data.uiSceneStepsNotReportVOList
        }
      })
    },
    // 截图预览
    async clickHandleScreenshot(screenshot) {
      if (screenshot) {
        try {
          this.imageLoading = true;
          this.dialogVisible = true;
          
          // 获取图片数据
          const response = await getScreenshot(screenshot);
          
          // 创建 Blob URL
          const blob = new Blob([response], { type: 'image/png' });
          if (this.previewUrl) {
            URL.revokeObjectURL(this.previewUrl); // 释放之前的 URL
          }
          this.previewUrl = URL.createObjectURL(blob);
        } catch (error) {
          this.$message.error('图片加载失败');
          this.dialogVisible = false;
        } finally {
          this.imageLoading = false;
        }
      }
    },
  },
  beforeDestroy() {
    // 清理 Blob URL
    if (this.previewUrl) {
      URL.revokeObjectURL(this.previewUrl);
    }
  }
}
</script>

<style scoped lang="scss">
.report-detail {
  padding: 20px;

  .header {
    .header-title {
      font-size: 14px;
    }

    .green-wrap {
      width: 10px;
      height: 10px;
      background-color: green;
      border-radius: 5px;
    }

    .red-wrap {
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 5px;
    }

    .gray-wrap {
      width: 10px;
      height: 10px;
      background-color: gray;
      border-radius: 5px;
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      margin-bottom: 20px;
      gap: 10px;

      .content-title {
        font-size: 24px;
        font-weight: 500;
      }

      .error-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
      }

      .show-title {
        font-weight: 700;
        font-size: 16px;
      }

      .show-sub {
        color: gray;
        font-size: 14px;
      }

      .middle-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0px 30px;

        .title {
          font-size: 18px;
          font-weight: 700;
        }

        .wrap-show {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .right-wrap {
        display: flex;
        gap: 50px;
        padding: 0px 50px;
      }

      .left-wrap {
        display: flex;
        gap: 30px;
        align-items: center;

        .left-count {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .left-count-show {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px
          }
        }
      }
    }
  }

  .list {
    .list-title {
      margin-right: 10px;
      color: gray;
      border: solid 1px gray;
      border-radius: 12.5px;
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .list-sub-wrap {
      margin-left: 40px;

      .sub-collapse {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-right: 20px;

        .left-collapse {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .right-collapse {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 10px;

          .collapse-status {
            width: 60px;
            text-align: center;
          }
        }
      }

      .sub-title {
        margin-right: 10px;
        color: green;
        border: solid 1px green;
        border-radius: 10px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .sub-content {
        display: flex;
        align-items: center;
        gap: 30px;
      }
    }

    .tab-content {
      padding: 0px 10px;
    }
  }
}

::v-deep .el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}
</style>
