<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title lang="en">
    {{script_name}}script running report
    </title>
    
    <!--[if lt IE 9]>
    <script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    

    <link href="{{static_root}}css/bootstrap.min.css" rel="stylesheet">
    <link href="{{static_root}}css/main.css" rel="stylesheet">

    <link href="{{static_root}}css/report.css" rel="stylesheet">
    <link href="{{static_root}}css/jquery.fancybox.css" rel="stylesheet">
    <link href="{{static_root}}css/animate.css" rel="stylesheet">

    <script src="{{static_root}}js/jquery-1.10.2.min.js"></script>
    <script src="{{ static_root }}js/echarts/echarts.common.min.js"></script>
    <script src="{{ static_root }}js/echarts/shine.js"></script>
    <script src="{{ static_root }}js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
    <script src="{{ static_root }}js/langpack/zh_CN.js" charset="utf-8" type="text/javascript"></script>
    <script src="{{ static_root }}js/lazyload.js" charset="utf-8" type="text/javascript"></script>"
    <script type="text/javascript">
        var lang = new Lang();
        lang.init({
            defaultLang: 'en',
            currentLang: '{{ lang }}'
        });
    </script>
    <style>
    h2.header {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin-bottom: 10px;
    }

    h2 {
      font-size: 25px;
    }

    body {
      overflow-x: hidden;
    }

    div.screen_holder {
      /*position: relative;*/
      position: absolute;
      margin-top: 10px;
    }

    div.screen_holder img {
      /*max-height: 600px;*/
    }

    img.crop_image {
      display: block;
    }

    img.spot {
      position: absolute;
      width:50px;
      height:50px;
      margin-left: -25px;
      margin-top: -25px;
    }

    img#gif{
      max-width: 100%;
      min-height: 50px;
      max-height: 380px;
    }
    
    div.rect {
      position: absolute;
      border:2px solid red;
      border-radius: 5px;
      z-index: 99;
    }

    p.desc {
      font-weight: bold;
      font-size: 16px;
    }

    .moa label {
      font-size: 16px;
    }

    .moa .point {
      font-size: 20px;
      padding: 10px;
      display: inline-block;
    }

    pre {
      background-color: #23241f;
    }

    img.error-img {
      max-width: 70px !important;
    }

    .ztree span.glyphicon {
      color: red;
    }

    .scale {
      transform-origin:top left;
    }

    #main {
      padding-top: 10px;
      min-height: 600px;
    }

    .fast-nav-step {
      position: fixed;
      right: 30px;
      bottom: 10px;
      z-index: 10;
      padding: 10px 20px;
      margin-left: 30px;
      background: rgba(222,222,222,0.8);
    }

    .fast-nav-step label {
      display: block;
      border-bottom: 1px solid #7f8c8d;
      padding-bottom: 6px;
      margin-bottom: 12px;
      color: #34495e;
    }

    .a-circle {
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 25px;

      padding-top: 4px;

      text-align: center;
      color: white; 
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }
    
    .fast-nav-step .a-circle:hover {
      opacity: 0.9;
      box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);    
    }

    #nav_steps {
      max-height: 600px;
      transition: max-height 0.25s ease-in;
    }

    #nav_steps.collapsed {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.15s ease-out;
    }

    div.assert {
      padding-left: 20px;
    }
    .gif-wrap {
        max-height: 400px;
        text-align: center;
    }

    </style>
  </head>

  <body>

    <div class="container-fluid" style="max-width:1400px;">
      <div class="row">
        <div id="main" class="main col-md-12">

          {% if not all_steps %}
          <h2 lang="en">I am sorry, this log file is empty! </h2>
          {% endif %}

          <div class="material moa" >
              <h2><span lang="en">Test Case</span> {{script_name}}
              {% if test_result %}
              <label class="green" lang="en">[Passed]</label>
              {% else %}
              <label class="red" lang="en">[Failed]</label>
              {% endif %}
            </h2>
            {% if author %}
                <h4><span lang="en">Author:</span> {{author}}</h4>
            {% else %}
            <h4 lang="en">Author: Anonymous</h4>
            {% endif %}
            <h4>{{run_start}} -- {{run_end}}</h4>

            <h2 class="header" lang="en">Assert: Test Steps Summary</h2>
            <hr>
            <div class="row">
            {% for step in all_steps['main_script'] %}
              {% if step.assert %}
                <div class="col-xs-4 assert">
                    <span lang="en">Test step</span>
                  {% if step.trace %}
                  <a class="a-circle bg-red" href="#main_script_{{loop.index}}">{{loop.index}}</a>
                  {% else %}
                  <a class="a-circle bg-green" href="#main_script_{{loop.index}}">{{loop.index}}</a>
                  {% endif %}
                    <span lang="en">Expected result:</span>{{step.assert}}
                </div>
              {% endif %}
            {% endfor %}
            </div>
          </div>

        <!-- 录屏 -->
         <div class="row gif-wrap">
          <div class="col-md-6">
            {% if records %}
              {% for r in records %}
                <div align="center" class="embed-responsive embed-responsive-16by9">
                    <video class="embed-responsive-item" controls>
                        <source src="{{ r }}" type="video/mp4">
                    </video>
                </div>
              {% endfor %}
            {% else %}
              <p lang="en">No record information found.</p>
            {% endif %}
          </div>
         </div>

        <!--单步-->
        {% set step_type = ['main_script'] %}
        {% for t in step_type %}
          {% for step in all_steps[t] %}
          <div class="material moa {{ t }}" data-trace="{{step.trace}}" id="{{ t }}_{{loop.index}}">

            <h2 class="header">[{{ t[:-7] }}]Step {{loop.index}} <span class="step_title" lang="en">{{step.title}}</span> <span class="step_title">[{{step.start_time}}]</span></h2>
            <hr>
            <div class="step_content">
              <!--单步操作-->
              <!--带图片的操作-->
              {% if step.screenshot %}

                {% if step.image_to_find %}
                <div class="row">
                  <div class="col-xs-3">
                    <div class="point">
                      <span class="glyphicon glyphicon-play"></span>
                    </div>
                      <label><span lang="en">Target object</span></label>
                  </div>
                  <div class="col-xs-9">
                    <img class="crop_image" src="{{step.image_to_find}}" title="{{step.image_to_find}}">
                    <!-- 显示截图相关的参数 (供后续的图像识别的调试使用) -->
                    <p class="desc">record_pos: {{step.record_pos}}, resolution: {{step.resolution}}</p>
                  </div>

                </div>
                {% endif %}

                <div class="row">
                  <div class="col-xs-3">
                    <div class="point">
                      <span class="glyphicon glyphicon-play"></span>
                    </div>
                      <label><span lang="en">Runtime screenshot</span></label>
                  </div>
                  <!-- scale移除文档流， 使用js对screen_place赋值高度来占位 -->
                  <div class="col-xs-9" style="overflow-x:auto; overflow-y:hidden;">
                    <div class="screen_holder">
                      <img class="fancybox scale lazyload" data-src="{{step.screenshot}}" url="" title="{{step.screenshot}}">
                      {% if not step.trace and step.target_pos %}
                      <img class="spot animated infinite rubberBand" src="{{static_root}}image/target.png" data-top="{{step.top}}" data-left="{{step.left}}" style="top:{{step.top}}px;left:{{step.left}}px;">
                        <!-- rect area -->
                        {% if step.rect %}
                        <div class="rect" {% for k,v in step.rect.items() %}data-{{k}}="{{v}}"{% endfor %}></div>
                        {% endif %}
                      {% endif %}
                    </div>
                    <br />
                    <div class="screen_place"></div>
                  </div>
                </div>

                {% if step.confidence %}
                    <p class="desc"><span class="point glyphicon glyphicon-play"></span><span lang="en">Matching confidence:</span> {{step.confidence}}%</p>
                {% endif %}

              <p class="desc"><span class="point glyphicon glyphicon-play"></span>{{step.desc}}</p>
              {% else %}
              <!--不带图片的操作-->
              <p class="desc"><span class="point glyphicon glyphicon-play"></span>{{step.desc}}</p>
              {% endif %}

              <!--单步结果-->
              {% if not step.trace %}
              <div class="alert alert-success">
                <span class="glyphicon glyphicon-ok"></span>
                  <span lang="en">Execution finished successfully</span>
              </div>
              {% else %}
              <div class="alert alert-danger">
                <span class="glyphicon glyphicon-alert"></span>
                  <span lang="en">Execution failed</span>
              </div>
              <div>
                <pre><code class="python">{{step.traceback}}</code></pre>
              </div>
              {% endif %}

            </div>
          </div>
          {% endfor %}
        {% endfor %}

          <!-- 导航栏 -->
          <div class="fast-nav-step">
              <label><span lang="en">Steps navigation</span>
              <button class="btn btn-info btn-sm" id="collapse_nav_step"><i class="glyphicon glyphicon-chevron-down"></i></button>
              <button class="btn btn-info btn-sm" id="expand_nav_step"><i class="glyphicon glyphicon-chevron-up"></i></button>
            </label>
            <div id="nav_steps">
            {% for t in step_type %}
              {% for step in all_steps[t] %}
                {% if step.trace %}
                <a class="a-circle bg-red" href="#{{ t }}_{{loop.index}}">{{loop.index}}</a>
                {% else %}
                <a class="a-circle bg-green nav_{{ t }}" href="#{{ t }}_{{loop.index}}">{{loop.index}}</a>
                {% endif %}
              {% endfor %}
            {% endfor %}
              <a class="a-circle bg-green" href="#">Top</a>
            </div>
          </div>


        </div>
      </div>  
    </div>
  
    {% block footer %}
    <div class="footer">
        <span lang="en">Related information</span>
    </div> 
    {% endblock %}
  
  
  <script src="{{static_root}}js/bootstrap.min.js"></script>

  <!-- hightlight js -->
  <link href="{{static_root}}css/monokai_sublime.min.css" rel="stylesheet">  
  <script src="{{static_root}}js/highlight.min.js"></script>  
  <script >hljs.initHighlightingOnLoad();</script>

  <script>
  $(function() {
      iframe = window.frameElement;
      if (iframe) {
          window.frameElement.setAttribute("allowfullscreen", "allowfullscreen")
      }
    $("#collapse_nav_step").click(function() {
      $("#nav_steps").addClass('collapsed');
      $(this).hide();
      $("#expand_nav_step").show();
    });

    $("#expand_nav_step").click(function() {
      $("#nav_steps").removeClass('collapsed');
      $(this).hide();
      $("#collapse_nav_step").show();
    });
    $("#collapse_nav_step").click();
    $("#collapse_nav_step").hide(); // init
  });

  $(function(){
    var scale = {{scale}};
    var imgWidth = 0;
    var imgPercent = 0.7; 

    $("img").error(function () {
      var orsrc = $(this).attr("src")
      if(!orsrc){ return }
      if(orsrc.indexOf("report.gif") > -1){
        setTimeout(function(){
          //console.log($(this).attr("src"));
          $(this).attr("src", 'report.gif?timestamp=' + new Date().getTime());
          //console.log($(this).attr("src"));
        }.bind(this), 5000)
        return
      }

      $(this).unbind("error")
      .addClass('error-img')
      .attr("src", "{{static_root}}image/broken.png")
      .attr("orgin-src", orsrc);
    });
    
    //to trigger error event manual 
    $("#gif").attr("src", "report.gif?timestamp=" + new Date().getTime());

    $(".screen_holder").find("img.fancybox").load(function(e){

      imgWidth = Math.max($(this).width(), imgWidth);
      var dwidth = $("div.material.moa").width()
      //图片最大宽度
      var s = (dwidth*imgPercent)/imgWidth
      s = Math.round(s * 100) / 100
      scale_img(s);
    })

    function scale_img(i){
      $(".screen_holder").find("img.fancybox").each(function(e){
        var h = $(this).height();
        var sc = 'scale('+ i +','+ i +')';
        
        var scale_css = {
          '-ms-transform': sc,
          '-webkit-transform': sc,
          '-moz-transform': sc,
          'transform': sc,
        }
        
        $(this).css(scale_css)

        var sp = $(this).siblings('img.spot');
        var rect = $(this).siblings('div.rect');
        
        rect.css({
          'top':rect.data('top') * i ,
          'left':rect.data('left') * i ,
          'width':rect.data('width') * i,
          'height':rect.data('height') * i,
        });
        
        var top = sp.data('top');
        var left = sp.data('left');
        sp.css({
          'top':top*i,
          'left':left*i,
        })
        
        $(this).parents('.screen_holder').siblings('.screen_place').height(h*i);
      });
    }
    //resize img
    scale_img(scale);

    $(window).resize(function() {
      var ww = $('body').width();
      if (ww < 900){
        scale = 0.25;
      }
      else if (ww < 1100 ){
        scale = 0.3;
      }
      else if( ww < 1300){
        scale = 0.4;  
      }else{
        scale = 0.5;
      }

      if(imgWidth != 0){
        //实时计算
        var dwidth = $("div.material.moa").width()
        //图片最大宽度
        scale = (dwidth*imgPercent)/imgWidth
        scale = Math.round(scale * 100) / 100          
      }

      scale_img(scale)
    });
    $(window).resize();
    // 延迟加载图片
    lazyload();
  });
  </script>

  <script>
  $(window).resize();
  </script>
  </body>
</html>
