<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="format-detection"content="telephone=no">
    <title>浏览记录详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" href="../../css/projeck.css">
    <style media="screen">
      body,html{
        margin: 0;
        background: #fff;
      }
      *{
          box-sizing: border-box;
          outline: none;
      }
      .note{
          border-bottom: 20px solid #ECF0F1;
          padding-bottom: 20px;
      }
      .note:last-child{
        border-bottom: 0 solid #ECF0F1;
        padding-bottom: 0;
      }
      .noneMargin:last-child{
          margin-bottom: 20px
      }
      /*header*/
      .top {
          text-align: center;
          margin: 20px;
      }
      .top .icon {
          text-align: center;
      }
      .note-name, .note-time {
          font-size: 18px;
          line-height: 30px;
          color: #2c3e50;
      }
      .top .name {
          font-size: 18px;
          color: #7f8c8d;
      }
      /*状态*/
      .m-card{
        padding: 0 15px;
      }
      .m-card .header {
          margin: 0 -15px;
          line-height: 40px;
          border-bottom: 1px solid #ECF0F1;
          background-color: #ECF0F1;
          font-size: 18px;
          position: relative;
      }
      .m-card .header span {
          margin-left: 15px;
          color: #2980B9;
          padding: 2px 0 2px 10px;
      }
      .m-card .header:after{
          content: '';
          position: absolute;
          top:8px;
          left: 14px;
          width: 3px;
          height: 60%;
          background: #3498DB;
      }
      .cell-item {
          display: -webkit-flex;
          display: flex;
          justify-content: flex-start;
          position: relative;
          overflow: hidden;
          margin: 15px 0;
      }
      .m-cell {
          background-color: #FFF;
          position: relative;
          z-index: 1;
      }
      /*.m-cell:after {*/
      /*    content: '';*/
      /*    position: absolute;*/
      /*    z-index: 0;*/
      /*    bottom: 0;*/
      /*    left: 0;*/
      /*    width: 100%;*/
      /*    height: 1px;*/
      /*    border-bottom: 1px solid #B2B2B2;*/
      /*    -webkit-transform: scaleY(0.5);*/
      /*    transform: scaleY(0.5);*/
      /*    -webkit-transform-origin: 0 100%;*/
      /*    transform-origin: 0 100%;*/
      /*}*/
      /*记录项*/
      .cell-left {
          width: 30%;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: wrap;
          color: #333;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
      }
      .cell-right{
        display: flex;
        font-weight: bold;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left;
        width: 70%;
        min-height: 1rem;
        color: #525252;
        font-size: 16px;
        padding-right: 0.24rem;
        padding-left: 10px;
      }
      .m-card .m-cell .cell-title {
          width: 30%;
          color: #333;
          font-size: 16px;
          margin: 10px 0;
      }
      .m-card .m-cell .cell-content {
          color: #525252;
          font-size:16px;
          font-weight: bold;
          margin: 10px 0;
          padding: 0 5px;
          width: 70%;
      }
      .call-centers{
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .m-card .card-box .title {
          font-size: 16px;
          margin: 10px 0;
      }.m-card .card-box .content {
          padding: 10px;
          border-width: 2px;
          border-style: dashed;
          border-color: #ECF0F1;
          margin-bottom: 5px;
      }
      /*file*/
      .card-box{
          margin-bottom: 15px;
      }
     .card-box .content .file-item {
          display: inline-block;
          padding: 10px;
          width: 32%;
          vertical-align: top;
          text-align: center;
          height: 100px;
      }
      .card-box .content .file-item img {
          margin: 0 auto;
          width: 40px;
      }
      .card-box .content .file-item p {
          margin-top: 10px;
          width: 100%;
          font-size: 14px;
          color: #7f8c8d;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
      }
      /*img*/
      .m-card .card-box .img-list> .img-item {
          display: inline-block;
          width: 32%;
      }
     .card-box .img-list .img-item {
          position: relative;
          display: inline-block;
      }
      .card-box .img-list .img-item img {
          z-index: 0;
          height: 27vw;
          width: 27vw;
          object-fit: cover;
          border-radius: 5px;
      }
      /*检查项*/
      /*提交按钮*/
      .submitBtn{
        width:100%;
        color:#fff;
        position: fixed;bottom: 0;left:0;
        z-index:100;
        margin: 0;
        height: 55px;
        line-height: 55px;
        font-size: 18px;
        background: #009fe8
      }
       /*浏览记录*/
      .browse-item{
        padding: 15px;
        position: relative;
      }
      .browse-item:after{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background: #ECF0F1;
      }
     .header-ico{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        line-height: 40px;
        text-align: center;
        object-fit: cover;
         margin-right: 10px;
         font-size: 13px;
     }
     .browse-time{
        font-size: 13px;
        color: #BDC3C7;
        line-height: 1.5;
     }
     .personal-info,.browse-num{
        color: #2C3E50;
        font-size: 13px;
        font-style: normal;
     }
     .browse-title{
       color: #333;
       font-size: 16px;
       padding: 15px 0 ;
       position: relative;
       width: 100%;
       padding-left: 25px;
     }
     .browse-title:before{
       content: '';
       position: absolute;
       top: 13px;
       left: 14px;
       width: 3px;
       height: 26px;
       background: #009fe8;
     }
     .browse-title:after{
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 1px;
       background: #ECF0F1;
     }
     /*返回当前二维码*/
     .backQrcode{
       width: 45px;
       height: 45px;
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
       border: 1px solid #f2f2f2;
       position: fixed;
       bottom: 50px;
       right: 20px;
       z-index: 9999;
       background: #fff;
       opacity: 1;
       transition: .5s;
       text-align: center;
       padding: 5px;
      }
      .backQrcode img{
        width: 100%;
        height: 100%;
      }
      /*position*/
      .flex-starts{
          display: flex;
          justify-content: space-between;
          white-space: nowrap;
          align-items: center;
      }
      .flex-spaces{
          display: flex;
          justify-content: space-between;
          white-space: nowrap;
          align-items: center;
      }
      .ico-map{
          width: 25px;
          height: 25px;
          background: url("../../icon/position.png") no-repeat;
          background-position: center;
          background-size: cover;
      }
      .more-icon{
        width: 20px;
        height: 20px;
        background: url("../../image/more.png") no-repeat;
        background-position: center;
        background-size: cover;
      }
      .position{
          padding: 5px 15px;
          border-radius: 50px;
          background: #F0F0F0;
          font-size: 14px;
          margin-top:10px;
      }
      .map1{
          color: #009FE8;
          margin-bottom: 5px;
          text-align: left;
      }
      .map-name {
        width: 78%;
      }
      .names{
        width: 85%;
        white-space: normal;
      }
    </style>
</head>
<body>
  <div class="g-flexview" id="g_flexview"></div>
</body>
</html>
<script type="text/template" id="recordTemplate">
  {{?it.recordInstanceList !=null}}
    {{ for (var i = 0;i<it.recordInstanceList.length;i++) { }}
      <div class="note" id="note${recordInstanceList[r].id}">
          <div class="top recordInfo">
              <div class="icon"><img src="../../icon/0001.png"></div>
              <div class="note-name">{{=it.recordInstanceList[i].templateName}}</div>
              <div class="note-time">{{=it.recordInstanceList[i].createDate}}</div>
              <div class="name">{{=it.recordInstanceList[i].createName}}</div>
              {{?it.recordInstanceList[i].spName}}
              <div class="position flex-spaces" onclick="openMaps('{{=it.recordInstanceList[i].lng}}','{{=it.recordInstanceList[i].lat}}')">
                  <div class="map-name flex-starts">
                    <i class="ico-map"></i>
                    <div class="names">
                      <p class="map1">{{=it.recordInstanceList[i].spName}}</p>
                    </div>
                  </div>
                  <p class="more-icon"></p>
              </div>
              {{?}}
          </div>
          <!--状态-->
          {{? it.recordInstanceList[i].recordStatusInstanceList != null && it.recordInstanceList[i].recordStatusInstanceList != ""}}
            <div class="m-card">
                <div class="header"><span>状态</span></div>
                <div class="content">
                    <div class="m-cell statusItem">
                        {{ for (var j = 0;j<it.recordInstanceList[i].recordStatusInstanceList.length;j++) { }}
                        <div class="cell-item">
                            <div class="cell-left">{{=it.recordInstanceList[i].recordStatusInstanceList[j].statusName}}</div>
                            <div class="cell-right" id="statusP${recordInstanceList[r].id+u}">
                                {{ for (var u = 0;u<it.recordInstanceList[i].recordStatusInstanceList[j].recordStatusInstanceItemList.length;u++) { }}
                                <span style="color:{{=it.recordInstanceList[i].recordStatusInstanceList[j].recordStatusInstanceItemList[u].statusColor}};">
                                    {{=it.recordInstanceList[i].recordStatusInstanceList[j].recordStatusInstanceItemList[u].statusContent}}
                                </span>
                                {{ } }}
                            </div>
                        </div>
                        {{ } }}
                    </div>
                </div>
            </div>
          {{?}}
          {{?it.recordInstanceList[i].statusName != ""}}
            <div class="m-card">
                <div class="header"><span>状态</span></div>
                <div class="content">
                    <div class="m-cell">
                        <div class="cell-item">
                            <div class="cell-left">{{=it.recordInstanceList[i].statusName}}</div>
                            <div class="cell-right"><span class="blue">{{=it.recordInstanceList[i].statusContent}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
          {{?}}
          <!--记录项-->
          {{?it.recordInstanceList[i].inputList != null && it.recordInstanceList[i].inputList != ""}}
            {{ for(var prop in it.recordInstanceList[i].inputList) { }}
              <div class="m-card">
                <div class="header">
                    <span>{{=prop==""?'记录项':prop}}</span>
                </div>
              <div class="content contents">
              {{ for (var t = 0;t<it.recordInstanceList[i].inputList[prop].length;t++) { }}
                {{? it.recordInstanceList[i].inputList[prop][t].inputType === 'photo' && it.recordInstanceList[i].inputList[prop][t].values !=""}}
                    <div class="card-box">
                        <div class="title">{{=it.recordInstanceList[i].inputList[prop][t].inputName}}：</div>
                        <div class="content">
                            <div class="my-gallery img-list" data-pswp-uid="1">
                                {{ for (var s = 0;s<it.recordInstanceList[i].inputList[prop][t].values.length;s++) { }}
                                <div class="img-dv img-item" onclick="browseImg('{{=i}}','{{=it.recordInstanceList[i].inputList[prop][t].values}}')">
                                    <a href="javascript:;">
                                       <img src="{{=it.recordInstanceList[i].inputList[prop][t].values[s]}}?x-oss-process=style/img-200">
                                    </a>
                                </div>
                                {{ } }}
                            </div>
                        </div>
                    </div>
                {{?? it.recordInstanceList[i].inputList[prop][t].inputType === 'file' && it.recordInstanceList[i].inputList[prop][t].values !=""}}
                    <div class="card-box">
                      <div class="title">{{=it.recordInstanceList[i].inputList[prop][t].inputName}}：</div>
                      <div class="content">
                        <div class="file-list">
                            {{ for (var f = 0;f<it.recordInstanceList[i].inputList[prop][t].values.length;f++) { }}
                              <div class="file-item" onclick="browseFile('{{=it.recordInstanceList[i].inputList[prop][t].values[f].substr(0,it.recordInstanceList[i].inputList[prop][t].values[f].lastIndexOf('-'))}}')">
                                <a href="javascript:;">
                                    <img src="../../icon/{{=it.recordInstanceList[i].inputList[prop][t].values[f].substr(it.recordInstanceList[i].inputList[prop][t].values[f].lastIndexOf(".")+1)}}.png">
                                    <p>{{=it.recordInstanceList[i].inputList[prop][t].values[f].substr(it.recordInstanceList[i].inputList[prop][t].values[f].lastIndexOf('-')+1)}}</p>
                                </a>
                              </div>
                            {{ } }}
                        </div>
                      </div>
                  </div>
                {{?? it.recordInstanceList[i].inputList[prop][t].inputType === 'video' && it.recordInstanceList[i].inputList[prop][t].values !=""}}
                    <div class="card-box">
                        <div class="title">{{=it.recordInstanceList[i].inputList[prop][t].inputName}}：</div>
                        <div class="content vedios">
                            <video controls webkit-playsinline="true" class="video" style="width: 100%;height: 200px;">
                                <source src="{{=it.recordInstanceList[i].inputList[prop][t].values[0]}}">
                            </video>
                        </div>
                    </div>
                {{?? it.recordInstanceList[i].inputList[prop][t].inputType === 'mp3' && it.recordInstanceList[i].inputList[prop][t].values !=""}}
                      <div class="card-box" style="margin-bottom: 15px;">
                          <div class="title titleAudio">{{=it.recordInstanceList[i].inputList[prop][t].inputName}}：</div>
                          <div class="audio_a" style="position: relative;">
                              <audio id="audio_src" controls style="width:100%;">
                                  <source src="{{=it.recordInstanceList[i].inputList[prop][t].values[0]}}">
                              </audio>
                          </div>
                      </div>
                    </div>
                {{?? it.recordInstanceList[i].inputList[prop][t].values !=""}}
                    <div class="m-cell recordItem">
                        <div class="cell-item">
                            <div class="cell-title">{{=it.recordInstanceList[i].inputList[prop][t].inputName}}：</div>
                            <div class="cell-content">
                              <span class="normal">{{=it.recordInstanceList[i].inputList[prop][t].values.join(',')}}</span>
                            </div>
                        </div>
                    </div>
                {{?}}
              {{ } }}
          </div>
        </div>
       {{ } }}
       {{?}}
      <!--检查项-->
      {{?it.recordInstanceList[i].checkItemMap != null && it.recordInstanceList[i].checkItemMap != ""}}
      <div class="m-card inspectItems">
          <div class="header">
              <span>检查项</span>
          </div>
          <div class="content">
              {{ for(var key in it.recordInstanceList[i].checkItemMap) { }}
              <div class="m-cell inspectItem">
                  <div class="cell-item">
                      <div class="cell-title" style="width: 80%">{{=it.recordInstanceList[i].checkItemMap[key][0].groupName}}</div>
                      <div class="cell-content call-centers" style="width:20%;">
                        {{ for (var c = 0;c<it.recordInstanceList[i].checkItemMap[key].length;c++) { }}
                          <span class="normal">{{=it.recordInstanceList[i].checkItemMap[key][c].itemValue ===""?"暂无内容":it.recordInstanceList[i].checkItemMap[key][c].itemValue}}</span>
                        {{ } }}
                      </div>
                  </div>
              </div>
              {{ } }}
          </div>
      </div>
      {{?}}
      </div>
    {{ } }}
    {{?}}
    <div class="browse-wrap" id="browse_items"></div>
    {{?it.pageRecord != null}}
        <button type="button" class="btn-block btn-primary submitBtn" onclick="nextStep('{{=it.pageRecord.templateName}}','{{=it.pageId}}','{{=it.pageRecord.id}}','{{=it.recordParentId}}')">{{=it.pageRecord.templateName}}</button>
        {{=bottom()}}
    {{?}}
    <!--返回当前二维码-->
    <div class="backQrcode" onclick="backQrcode('{{=it.pageId}}','{{=it.pageName}}')">
        <img src="../../icon/qrcode.png" alt="">
    </div>
</script>
<script type="text/template" id="browseTl">
  <label class="browse-title">浏览记录</label>
  <ul class="browse-items" style="margin-bottom:35px;">
    {{~it:value}}
      <li class="browse-item flex-space">
          <div class="flex-start">
            {{?value.img == null}}
              <p class="header-ico" style="background:#{{=Math.random().toString(16).slice(2,8)}}">
                  {{=value.name.substr(value.name.length-1)}}
              </p>
            {{??}}
               <img src="{{=value.img.substr(value.img, 4) == 'http'?value.img:urlImgUrl+value.img}}" class="header-ico" alt="">
            {{?}}
            <div class="browse-time" style="margin-right:10px">
              <p class="personal-info">{{=value.name}}</p>
              <p class="personal-info">{{=value.department}}</p>
            </div>
            <div class="browse-time">
                <p>最近：{{=value.lastDate.substr(5)}}</p>
                <p>首次：{{=value.createDate.substr(5)}}</p>
            </div>
          </div>
          <i class="browse-num">{{=value.count}}次</i>
        </li>
    {{~}}
  </ul>
</script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script src="../../script/zepto.js" charset="utf-8"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript">
    var name= "",uuid="",organizationIds="";
    apiready = function () {
      var info = $api.getStorage('data');
      name = JSON.parse(info).data.user.name;
      uuid = JSON.parse(info).data.user.staff_num;
      organizationIds = JSON.parse(info).data.user.section_id;
      recodeDetails(api.pageParam.recordParentId);
      // 返回二维码
      scrollBottom()
    };
    function recodeDetails(id) {
      var params = {
        recordParentId:id,
        departmentId:organizationIds
      }

      $http.requestShowProgress(UrlRouter.getRecordInstanceDetailList,'get',params)
      .then(ret=>{
          if (ret.code == '200') {
            $apis.html(g_flexview,'#recordTemplate',ret.data)
            // 添加浏览记录
            var param={
              recordParentId:id,
              userId:uuid
            }
            return $http.requestData(UrlRouter.addRecordUser,'post',param)
          }
      })
      .then(ret=>{
        // console.log(JSON.stringify(ret));
        browseNum(id)
      })
      .catch(err=>{})
    }
    function bottom() {
      $api.css($api.dom('.g-flexview'), 'padding-bottom: 30px;');
      return "";
    }
    // 文件浏览
    function browseFile(paths) {
      var flag = true;
      if (paths.substr(paths.lastIndexOf(".")+1) == 'zip'&& paths.substr(paths.lastIndexOf(".")+1) == 'rar') {
        flag = false;
      }else {
        api.showProgress({
          title: '提示',
          text: '打开文件中...',
        });
      }
      api.download({
          url: paths,
          report: true,
          cache: true,
          allowResume: true
      }, function(ret, err) {
          if (ret.state == 1) {
             api.hideProgress();
              if (flag) {
                var superFile = api.require('superFile');
                superFile.open({path:ret.savePath});
              }
              setTimeout(function () {
                api.toast({
                    msg: '下载成功',
                    duration: 2000,
                    location: 'top'
                });
              },100)
          }
      });
    }
    // 图片浏览
    function browseImg(i,value) {
      var imageBrowser = api.require('imageBrowser');
        imageBrowser.openImages({
            imageUrls: value.split(','),
            activeIndex:i,
            showList:false
        });
    }
    // 如果有下一步执行次方法
    function nextStep(title,pageId,pageRecordId,recordTrueID) {
      var param= {
          pageId: pageId,
          pageRecordId: pageRecordId,
          createBy: uuid,
          createName: name,
          recordTrueID: recordTrueID,
          organizationIds:organizationIds
      }
      $event.openTabLayout('addRecode','addRecode',title,param);
    }
    // 浏览人数
    function browseNum(recordParentId) {
      $http.fnReuestDataNologing(UrlRouter.getRecordUserById+recordParentId,'','get','',function (ret, err) {
        if (ret.code === '200') {
          $apis.html(browse_items,'#browseTl',ret.data);
        }
      })
    }
    // 返回二维码js
    function scrollBottom() {
        var window1 = $(window).height();
        var documents = $(document).height();
        if (window1 == documents) {
            $(".backQrcode").css({bottom:'50px',opacity:'1'})
            return false;
        }
        $(window).on('scroll',function(){
            if($(window).scrollTop()>=10){
                $(".backQrcode").css({bottom:'50px',opacity:'1'})
            }
            else if ($(window).scrollTop() <= 50) {
                $(".backQrcode").css({bottom:'0',opacity:'0'})
            }
        });
    }
    // 返回二维码
    function backQrcode(id,title) {
      var param={
        pageId:id,
        title:title
      }
      $event.openWin('browseQrcode_win'+Math.random(),'browseQrcode_win',param,'');
    }
    // 打开地图
    function openMaps(lon,lat) {
      $event.openTabLayout('map','map','',{lon:lon,lat:lat})
    }
</script>
