/*
 * @Description: 
 * @Author: Era Chen
 * @Email: chenjiyun@corp.netease.com
 * @Date: 2019-08-08 17:41:44
 * @LastEditors  : Era Chen
 * @LastEditTime : 2020-01-09 16:53:46
 */
function StepPannel(data, root){
  this.data = data
  this.original_steps = data.steps
  this.steps = [].concat(data.steps)
  this.static = data.static_root
  this.currentStep = 0
  this.currentWrong = -1
  this.pagesize = 20
  this.currentPage = 1
  this.stepLeft = $('#step-left .step-list')
  this.stepRight = $('#step-right')
  this.magnifyContainer = $('#magnify .content')
  this.magnifyPic = $('#magnify')
  this.scale = 0
  this.order = 'acc' // or dec
  this.duration = 'acc' // or dec
  this.status = 'acc' // or dec

  this.init = function(){
    // 初始化
    this.initStepData()
    this.bindEvents()
    this.init_gallery()
    this.init_pagenation()
    var steps = [].concat(this.original_steps)
    if(steps.length >0){
      this.steps = steps
      this.filterSteps($('.filter#all'))
    } else{
      this.setSteps()
    }
    this.init_video()
    if ($('#console pre.trace').length > 0) {
      setTimeout(function(){
        // 当log超过2w行，转换成高亮模式会导致卡顿
        if ($('#console pre.trace').text().length < 20000) {
          hljs.highlightBlock($('#console pre.trace')[0], null, false)
          }
      }, 0)
    }
    this.highlightBlock()
  }

  this.bindEvents = function(){
    // 绑定事件
    var that = this
    this.stepLeft.delegate('.step', 'click',function(e){
      if(e.target.className.indexOf("step-context") >=0 )
        that.jumpToCurrStep(Number(e.target.getAttribute('index')))
      else
        that.setStepRight(e.currentTarget.getAttribute('index'))
    })
    $('.gallery .content').delegate('.thumbnail', 'click', function(e){
      that.jumpToCurrStep(Number(this.getAttribute('index')))
    })
    this.stepRight.delegate('.fancybox', "click", function(e) {
      that.showMagnifyPic(this.outerHTML)
    })
    this.stepRight.delegate('.crop_image', "click", function(e) {
      that.showMagnifyPic(this.outerHTML)
    })
    this.magnifyPic.click(function(e) {
      if (e.target.tagName.toLowerCase() != 'img'){
        that.hideMagnifyPic()
      }
    })
    $('.filter#all').click(function(){
      that.steps = [].concat(that.original_steps)
      that.filterSteps(this)
    })
    $('.filter#success').click(function(){
      that.steps = that.filterSuccessSteps()
      that.filterSteps(this)
    })
    $('.filter#fail').click(function(){
      that.steps = that.filterFailSteps()
      that.filterSteps(this)
    })
    $('.filter#assert').click(function(){
      that.steps = that.filterAssertSteps()
      that.filterSteps(this)
    })
    $('#jump-wrong').click(function(){
      that.steps = [].concat(that.original_steps)
      that.currentWrong = that.findCurrentWrongStep()
      if(that.currentWrong>=0){
        that.currentStep = that.currentWrong
        that.currentPage = Math.ceil(that.currentStep / that.pagesize)
        that.setSteps(that.currentStep)
      }
    })
    $('.order#order').click(function(){
      that.order = that.order == 'acc' ? 'dec' : 'acc'
      that.steps.sort(that.sortSteps('index', that.order == 'acc'))
      that.currentPage = 1
      that.setSteps()
    })
    $('.order#duration').click(function(){
      that.steps.sort(that.sortSteps('duration_ms', that.duration == 'acc'))
      that.duration = that.duration == 'acc' ? 'dec' : 'acc'
      that.currentPage = 1
      that.setSteps()
    })
    $('.order#status').click(function(){
      that.steps.sort(that.sortSteps('status', that.status == 'acc'))
      that.status = that.status == 'acc' ? 'dec' : 'acc'
      that.currentPage = 1
      that.setSteps()
    })
    $("#close-console").click(function(){
      $('#console').fadeOut(300)
    })
    $("#show-console").click(function(){
      $('#console').fadeIn(300)
    })
  }

  this.sortSteps = function(attr, rev){
    //第二个参数没有传递 默认升序排列
    if(rev ==  undefined){
        rev = 1;
    }else{
        rev = (rev) ? 1 : -1;
    }
    return function(a,b){
        a = a[attr];
        b = b[attr];
        if(a < b){
            return rev * -1;
        }
        if(a > b){
            return rev * 1;
        }
        return 0;
    }
  }

  this.initStepRight = function(){
    // 设置高亮
    this.highlightBlock()
    var that = this
    if($(".step-args .fancybox").length>0){
      $('#step-right .fancybox .screen').load(function(e){
        // 存在截屏，并加载成功
        that.resetScale(this)
        that.convertSize($('.step-args .crop_image'), 80, 35)
        that.resetScreenshot($('#step-right .fancybox'))
      })
    }
  }

  this.highlightBlock = function(){
    if($('#step-right pre.trace').length>0){
      hljs.highlightBlock($('#step-right pre.trace')[0], null, false);
    }
  }

  this.filterSteps = function(dom){
    $('.steps .filter').removeClass('active')
    $(dom).addClass('active')
    this.currentPage = 1
    this.setSteps()
  }

  this.setSteps = function(step){
    // 重设步骤页面内容
    step = step || (this.steps.length > 0 ? this.steps[0].index : 0)
    this.setPagenation()
    this.setStepRight(step)
  }

  this.initStepData = function(){
    for(var i = 0; i< this.steps.length; i++){
      step = this.steps[i]
      if(i == 0){
        step.duration_ms = getDelta(step.time, this.data.run_start)
      } else{
        step.duration_ms = getDelta(step.time, this.steps[i-1].time)
      }
      step.duration = getFormatDuration(step.duration_ms)
      step.index =  i
      step.status =  step.traceback ? 'fail' : 'success'
    }
  }

  this.init_gallery = function(){
    var that = this
    var fragment = this.original_steps.map(function(step){
      if(step.screen && step.screen.thumbnail) {
        return '<div class="thumbnail" index="%s">'.format(step.index) + 
                  '<img src="%s" alt="%s"/>'.format(step.screen.thumbnail, step.screen.thumbnail) +
                  '<div class="time">%s</div>'.format(getFormatDuration2(getDelta(step.time, that.data.run_start))) +
                '</div>'
      } else{
        return ""
      }
    })
    fragment = fragment.join('')
    if(fragment == ''){
      $('.gallery').hide()
    }else{
      $('.gallery .content').html(fragment)
    }
  }

  this.jumpToCurrStep = function(step) {
    // 跳至指定步骤
    step = step || (this.steps.length > 0 ? this.steps[0].index : 0)
    this.steps = [].concat(this.original_steps)
    this.currentPage = Math.floor(step / this.pagesize) +1
    this.setPagenation()
    this.setStepRight(step)
    $('.steps .filter').removeClass('active')
  }

  this.showMagnifyPic = function(fragment) {
    this.magnifyContainer.html(fragment)
    this.magnifyContainer.children().removeAttr('style')
    var fancybox = this.magnifyContainer.find('.fancybox')
    if (fancybox.length > 0){
      var that = this
      $('#magnify .fancybox .screen').load(function(e){
        // 存在截屏，并加载成功
        if (this.height > this.parentNode.offsetHeight){
          this.style.height = this.parentNode.offsetHeight + 'px'
        }
        that.resetScale(this)
        that.resetScreenshot($('#magnify .fancybox'))
      })
    }
    this.magnifyPic.fadeIn(300)
  }

  this.hideMagnifyPic = function() {
    this.magnifyPic.fadeOut(300)
  }

  this.setStepsLeft = function(){
    html = this.steps.length>0 ? '' : '<h4 class="no-steps"><span lang="en">Warning: No steps</span></h3>'
    var start = (this.currentPage-1)* this.pagesize
    start = start < 0 ? 0 : start
    var end = (this.currentPage)*this.pagesize
    end =  end>this.steps.length ? this.steps.length : end
    for(var i = start; i< end; i++){
      var step = this.steps[i]
      var title = step.assert ? '<span lang="en">Assert: </span>' + step.assert : step.title
      html += step.scene_name ? '<div class="step-scenario"> '+'<span class="step_title_scenario" lang="en">%s</span>'.format(step.scene_name) : '' +'</div>' +
                '<div class="step" index="%s">'.format(step.index) +
                '<img src="%simage/step_%s.svg" alt="%s.svg"/>'.format(this.static, step.status, step.status) +
                '<span class="order"># %s</span>'.format(step.index +1) +
                '<span class="step_title" lang="en">%s</span>'.format(title) +
                '<span class="step-time">%s</span>'.format(step.duration) +
                '<img class="step-context" src="%simage/eye.svg" alt="eye.svg" index="%s"/>'.format(this.static, step.index) +
              '</div>'
    }
    this.stepLeft.html(html)
  }
  this.setStepRight = function(index){
    index = parseInt(index)
    if(!isNaN(index) && index>= 0 && index<this.original_steps.length){
      $('.gallery .thumbnail.active').removeClass('active')
      $('.gallery .thumbnail[index="%s"]'.format(index)).addClass('active')
      this.setStepRightHtml(index)
      this.initStepRight()
    }
  }

  this.setStepRightHtml = function(index){
    this.stepLeft.find('.step.active').removeClass('active')
    this.stepLeft.find(".step[index='%s']".format(index)).addClass('active')
    step = this.original_steps[index]
    this.currentStep = index
    success = step.traceback ? "fail" : "success"
    pass = step.traceback ? "Failed" : "Passed"
    title = step.code ? step.desc||step.code.name : step.desc
    title = title || step.title
    var head = "<div class='step-head'><span class='step-status %s'>%s</span><span>Step %s: %s</span></div>"
                  .format(success, pass , step.index+1, title)
    var infos = this.getStepRightInfo(step)
    var args = this.getStepRightArgs(step)
    this.stepRight.html(head + infos + args)
  }

  this.getStepRightInfo = function(step){
    // HTML 本步骤成功与否、耗时 
    try{
      return ("<div class='step-infos'>"+
                "<div class='infos-li'>" +
                  "<span lang='en'>Status: </span>" +
                  "<span class='content-val %s'>%s</span>" +
                  "<img src='%simage/step_%s.svg'>" +
                "</div>" +
                "<div class='infos-li'>" +
                  "<span lang='en'>Start: </span>" +
                  "<span class='content-val'>%s</span>" +
                "</div>" +
                "<div class='infos-li'>" +
                  "<span lang='en'>Duration: </span>" +
                  "<img src='%simage/time.svg'>" +
                  "<span class='content-val'>%s</span>" +
                "</div>" +
                "<div class='infos-li step-behavior'>" +
                  "<span lang='en'>Behavior: </span>" +
                  "<span class='content-val bold'>%s</span>" +
                "</div>" +
              "</div>").format(success, pass, this.static, success,
                              step.time ? getFormatDateTime(step.time): '--',
                              this.static, step.duration,
                              step.code ? step.code.name:"null")
    } catch (err) {
      console.log(err)
      return ""
    }
  }

  this.getStepRightArgs = function(step){
    // 操作的参数
    try{
      argHtml = ''
      if(step.code){
        for(var i=0; i < step.code.args.length; i++){
          arg = step.code.args[i]
          if(arg.image){
            argHtml += ('<img class="crop_image desc" data-width="%s" data-height="%s" src="%s" title="%s">' +
                    '<p class="desc">resolution: %s</p>')
                    .format(arg.resolution[0], arg.resolution[1], arg.image, arg.image, arg.value.resolution)
          }else{
            val = typeof arg.value == 'object' ? JSON.stringify(arg.value) : arg.value
            argHtml += '<p class="desc">%s: %s</p>'.format(arg.key,val)
          }
        }
      }
    } catch(e) {
      console.error(e)
    }

    // 相似度
    if(step.screen && step.screen.confidence){
      argHtml += '<p class="desc"><span class="point glyphicon glyphicon-play"></span><span lang="en">Confidence: </span>%s</p>'.format(step.screen.confidence)
    }

    argHtml =  argHtml || '<p class="desc">None</p>'
    argHtml = "<div class='fluid infos'>" + argHtml + "</div>"
    argHtml += "<div class='fluid screens'>" + this.getStepRightScrren(step) + "</div>"
    argHtml += "<div class='fluid traces'>" + this.getStepRightTrace(step) + "</div>"
    return "<div class='step-args'><div class='bold'>Args:</div>" + argHtml + "</div>"
  }

  this.getStepRightScrren = function(step){
    if(step.screen && step.screen.src){
      var src = step.screen.src
      // 截屏
      var img = '<img class="screen" data-src="%s" src="%s" title="%s">'.format(src, src, src)

      // 点击位置
      var targets = ''
      for(var i=0; i < step.screen.pos.length; i++){
        var pos = step.screen.pos[i]
        var rect = JSON.stringify({'left': pos[0], "top": pos[1]})
        targets += "<img class='target' src='%simage/target.png' rect=%s>"
                  .format(this.static, rect)
      }

      // 线
      var vectors = ''
      for(var i=0; i < step.screen.vector.length; i++){
        var v = step.screen.vector[i]
        var rect = JSON.stringify({'left': v[0], "top": v[1]})
        vectors += ("<div class='arrow' data-index='%s' rect=%s>" +
                    '<div class="start"></div>' +
                    '<div class="line"></div>' +
                    '<div class="end"></div>' +
                  '</div>').format(this.currentStep, rect)
      }
      
      // 还有个rect <!-- rect area -->
      var rectors = ''
      for(var i=0;i<step.screen.rect.length; i++){
        var rect = step.screen.rect[i]
        rectors += "<div class='rect' rect='%s' ></div>"
                   .format(JSON.stringify(rect))
      }
      var res = step.screen.resolution
      res = res ? 'w=%s h=%s'.format(res[0], res[1]): ""

      return '<div class="fancybox" %s >%s</div>'.format(res, img + targets + vectors + rectors)
    } else{
      return ""
    }
  }

  this.getStepRightTrace = function(step){
    if(step.traceback){
      return '<div class="desc"><pre class="trace"><code class="python">%s</code></pre></div>'.format(step.traceback)
    } else{
      return ""
    }
  }

  this.resetScale = function(dom){
    /**
     * @description: 重新计算截屏缩放的比例
     * @param {dom} dom img对象
     */
    imgWidth = dom.parentNode.getAttribute('w') || dom.naturalWidth
    dwidth = dom.width
    this.scale = dwidth / imgWidth
  }

  this.resetScreenshot = function(fancybox){
    // 重新设置targt、方框、连接线位置
    var screen = fancybox.find('.screen')
    this.convertPos(fancybox.find('.target'), screen, true)
    this.convertSize(fancybox.find('.rect'))
    this.convertPos(fancybox.find('.rect'), screen)
    this.showArrow(fancybox.find(".arrow"), screen)
    fancybox.css({
      'width': screen.width()
    })
  }

  this.convertPos = function(domList, screen,  withSize){
    for(var i=0; i<domList.length; i++){
      var rect = JSON.parse(domList[i].getAttribute('rect'))
      x = rect.left * this.scale
      y = rect.top * this.scale
      if(withSize){
        x -= domList[i].offsetWidth/2
        y -= domList[i].offsetHeight/2
      }
      domList[i].style.left = this.convertPosPersentage(x, screen , 'horizontal')
      domList[i].style.top = this.convertPosPersentage(y, screen, 'vertical')
    }
  }

  this.convertSize = function(domList, minWidth, minHeight) {
    for(var i=0;i<domList.length; i++){
      if (domList[i].tagName.toLowerCase() == 'img'){
        w = domList[i].clientWidth
        h = domList[i].clientHeight
      } else{
        var rect = JSON.parse(domList[i].getAttribute('rect'))
        w = rect.width
        h = rect.height
      }
      var scale = Math.max(this.scale, (minWidth || 0)/w, (minHeight || 0)/h)
      domList[i].style.width = (w * scale) + 'px'
      domList[i].style.height = (h * scale) + 'px'
    }
  }

  this.showArrow = function(dom, screen){
    var start = this.original_steps[this.currentStep].screen.pos[0]
    var vector = this.original_steps[this.currentStep].screen.vector[0]
    if(vector && start){
      var vt_x = vector[0] * this.scale;
      var vt_y = - vector[1] * this.scale;
      var vt_width = Math.sqrt(vt_x * vt_x + vt_y * vt_y)
      var rotation = 360*Math.atan2(vt_y, vt_x)/(2*Math.PI)
      var rt =  'rotate(' + -rotation + 'deg)';
      var rotate_css = {
        '-ms-transform': rt,
        '-webkit-transform': rt,
        '-moz-transform': rt,
        'transform': rt,
        'transform-origin': '6px 15px',
      };
      dom.css(rotate_css);
      dom.css({
        'top': this.convertPosPersentage(start[1]* this.scale, screen, 'vertical'),
        'left': this.convertPosPersentage(start[0]*this.scale, screen, 'horizontal'),
        'width': vt_width
      });
    }
  }

  this.filterSuccessSteps = function(){
    // 筛选成功步骤
    arr = []
    for(var i=0; i<this.original_steps.length; i++){
      step = this.original_steps[i]
      if(step.traceback)
        continue
      else
        arr.push(step)
    }
    return arr
  }

  this.filterFailSteps = function(){
    // 筛选失败步骤
    arr = []
    for(var i=0; i<this.original_steps.length; i++){
      step = this.original_steps[i]
      if(step.traceback)
        arr.push(step)
      else
        continue
    }
    return arr
  }

  this.filterAssertSteps = function(){
    // 筛选断言步骤
    arr = []
    for(var i=0; i<this.original_steps.length; i++){
      step = this.original_steps[i]
      if(step.assert)
        arr.push(step)
      else
        continue
    }
    return arr
  }

  this.findCurrentWrongStep = function(){
    // 跳至错误步骤
    arr = this.filterFailSteps()
    if(arr.length>0){
      if(this.currentWrong == arr[arr.length-1].index)
        return arr[0].index
      for(var i=0; i<arr.length; i++){
        if(arr[i].index > this.currentWrong)
          return arr[i].index
      }
    }
    return -1
  }

  this.init_pagenation = function(){
    //生成分页控件  
    this.paging = new Paging();
    var that = this
    var list_len = this.steps.length
    this.paging.init({
      target:'#pageTool',
      pagesize: this.pagesize,
      count: this.steps.length,
      prevTpl: "<",
      nextTpl: ">",
      toolbar:true,
      pageSizeList: list_len>100 ? [10, 20, 50, 100, list_len] : [10, 20, 50, 100],
      changePagesize:function(ps){
        that.pagesize = parseInt(ps)
        that.currentPage = 1
        that.setStepsLeft()
      },
      callback:function(p){
        that.currentPage = parseInt(p)
        that.setStepsLeft()
      }
    });
    $('#pageTool').prepend('<span class="steps-total"><span lang="en">Total </span><span class="steps-account"></span></span>')
  }

  this.setPagenation = function(){
    if(this.steps.length > this.pagesize)
      $('#pageTool').show()
    else
      $('#pageTool').hide()
    this.paging.render({
      'count': this.steps.length
    })
    $('#pageTool .steps-account').html(this.steps.length)
    this.paging.go(this.currentPage)
  }

  this.init_video = function(){
    var container = $('.gif-wrap')
    if($('.gif-wrap .embed-responsive').length>0) {
      $('.gif-wrap .minimize').click(function(){
        container.removeClass('show')
      })
      $('.gif-wrap .maximize').click(function(){
        container.addClass('show')
      })
      $('.gif-wrap .close').click(function(){
        container.hide()
      })
    }else {
      container.hide()
    }
  }

  this.convertPosPersentage = function(pixcel, screen, key){
    ret = ''
    if(key == 'horizontal'){
      ret = pixcel / screen.width() * 100 + '%'
    }
    else if (key == 'vertical'){
      ret = pixcel / screen.height() * 100 + '%'
    }
    return ret
  }
}


String.prototype.format= function(){
  var args = Array.prototype.slice.call(arguments);
  var count=0;
  return this.replace(/%s/g,function(s,i){
    return args[count++];
  });
}

Date.prototype.Format = function (fmt) { //author: meizz 
  var o = {
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日 
    "h+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds() //毫秒 
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}

function getFormatDateTime(timestamp){
  timestamp = getTimestamp(timestamp)
  return (new Date(timestamp)).Format("yyyy-MM-dd hh:mm:ss")
}

function getFormatDate(timestamp){
  timestamp = getTimestamp(timestamp)
  return (new Date(timestamp)).Format("yyyy / MM / dd")
}

function getFormatTime(timestamp){
  timestamp = getTimestamp(timestamp)
  return (new Date(timestamp)).Format("hh:mm:ss")
}

function getFormatDuration(delta) {
  // 格式化耗时， 格式为 0hr1min6s22ms
  console.log(delta)
  ms = parseInt(delta % 1000)
  delta = parseInt(delta / 1000)
  s = delta % 60
  delta = parseInt(delta/ 60)
  m = delta % 60
  h = parseInt(delta/ 60)

  if(h == 0)
    if(m == 0)
      if(s==0)
        msg =  ms + "ms"
      else
        msg = s + "s " + ms + "ms"
    else
      msg = m + 'min ' + s + "s " + ms + "ms"
  else
    msg = h + 'hr ' + m + 'min ' + s + "s " + ms + "ms"
  return msg
}

function getFormatDuration2(delta) {
  // 返回耗时，格式为 00:00:19
  var midnight = (new Date(new Date().setHours(0, 0, 0, 0))).getTime()
  return (new Date(midnight + delta)).Format("hh:mm:ss")
}

function getDelta(end, start) {
  // 返回耗时 单位为毫秒, end 和 start 可能是timestamp，也可能是化数据
  return getTimestamp(end) - getTimestamp(start)
}

function getTimestamp(time) {
  // time有可能是时间戳，也可能是格式化的，返回为毫秒
  if(Number(time)){
    return Number(time) * 1000
  } else{
    return (new Date(time).getTime())
  }
}

function toggleCollapse(dom){
  if(dom.hasClass('collapse')){
    dom.removeClass('collapse')
  } else{
    dom.addClass('collapse')
  }
}

function urlArgs(){
  var args = {};
  var query = location.search.substring(1);
  var pairs = query.split(/&|\?/);
  for(var i = 0;i < pairs.length; i++){
      var pos = pairs[i].indexOf("=");
      if(pos == -1) continue;
      var name = pairs[i].substring(0, pos);
      var value = pairs[i].substring(pos + 1);
      value = decodeURIComponent(value);
      args[name] = value;
  }
  // Connect :Android:///04157df490cb0b3f?cap_method=JAVACAP&&ori_method=ADBORI&&touch_method=ADBTOUCH
  // && 也会被分割
  if(args['connect']){
    var methods = []
    if(args['cap_method'])
      methods.push("cap_method=JAVACAP")
    if(args['ori_method'])
      methods.push("ori_method=ADBORI")
    if(args['touch_method'])
      methods.push("touch_method=ADBTOUCH")
    if(methods.length>0)
      args['connect'] = args['connect'] + '?' + methods.join('&&')
  }
  return args;
}


var formatStr = function(str) {
  return (str.charAt(0).toUpperCase()+str.slice(1)).replace(/_/g, ' ') + ':'
};

function loadUrlInfo(){
  // 根据search信息，在summary下面插入设备信息，仅限多机运行的时候使用
  args = urlArgs()
  result = data.test_result ? 'Passed' : 'Failed'
  if(args.type) {
    var container = $('#device')
    container.addClass('show')
    var keys = ["device", "connect", "accomplished", "rate", "succeed", 'failed', "no_of_device", "no_of_script", "type"]
    args.rate = (args.succeed / args.accomplished * 100).toFixed(2) + '%'
    args.failed = args.accomplished - args.succeed
    args['no_of_device'] = args.device_no
    args['no_of_script'] = args.script_no
    var fragment  = keys.map(function(k){
      return '<div class="info %s" title="%s"><span lang="en">%s</span>%s</div>'.format(k,args[k], formatStr(k), args[k])
    })
    back = '<a href="%s#detail" class="back" title="Back to multi-device report"><img src="%simage/back.svg"></a>'.format(args.back, data.static_root)
    $('#back_multi').html(back)
    container.html(fragment)
    result = args.status ? args.status : result
    $(".footer").hide()
  }
  set_task_status(result)
  $('.info.connect').append("<div class='copy_device'></div>")
  $(".info .copy_device").click(function(){
    copyToClipboard(this.parentNode.getAttribute('title'))
  })
}

function copyToClipboard(msg){
  const input = document.createElement('input')
  input.setAttribute('readonly', 'readonly');
  input.setAttribute('value', msg);
  document.body.appendChild(input);
  if (document.execCommand('copy')) {
    input.select();
    document.execCommand('copy');
    console.log('复制成功');
  } else{
    alert('Copy is not supported by the current browser, please change to chrome')
  }
  document.body.removeChild(input);
}

function set_task_status(result){
  src = "%simage/%s.svg".format(data.static_root, result=='Passed' ? 'success' : 'fail')
  $('.summary #result-img').attr('src', src)
  $('.summary #result-img').attr('alt', result)
  $('.summary #result-desc').addClass(result=='Passed' ? 'green' : 'red')
  $('.summary #result-desc').html("[%s]".format(result))
}

function init_page(){
  $('.summary .info-sub.start').html(getFormatDate(data.run_start))
  $('.summary .info-sub.time').html(getFormatTime(data.run_start) + '-' + getFormatTime(data.run_end))
  $('.summary .info-value.duration').html(getFormatDuration(getDelta(data.run_end, data.run_start)))
}

$(function(){
  init_page()
  stepPanel = new StepPannel(data)
  stepPanel.init()
  $("img").error(function () {
    var orsrc = $(this).attr("src")
    if(!orsrc){ return }
    if(orsrc.indexOf("report.gif") > -1){
      setTimeout(function(){
        $(this).attr("src", 'report.gif?timestamp=' + new Date().getTime());
      }.bind(this), 5000)
      return
    }
    $(this).unbind("error")
    .addClass('error-img')
    .attr("src", data.static_root + "image/broken.png")
    .attr("orgin-src", orsrc);
  });

  // 延迟加载图片
  lazyload();

  // 自动收缩过长的脚本描述
  var descHeight = 100;
  descWrap = $('.summary .airdesc')
  if($('.summary .desc-content').height()>descHeight) {
    descWrap.addClass('long collapse')
    $(".summary .show-more").click(function(){
      toggleCollapse(descWrap)
    })
  }

  // 复制脚本地址到粘贴版
  $('#copy_path').click(function(){
    copyToClipboard(this.getAttribute('path'))
  })

  // 从地址search部分加载设备信息等
  loadUrlInfo()
})