<!DOCTYPE html>
<html class="mask">
  <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"
    />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/projeck.css" />
    <style>
      body {
        background: #fff;
      }

      .hidden {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .api_layout {
        padding: 15px;
      }

      .column {
        margin-bottom: 10px;
      }

      .aui-row {
        border: 1px dashed #c8d2de;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 10px;
      }

      .technological-process {
        margin-top: 10px;
      }
      /*****/
      /*审批进度条*/

      .layui-timeline {
        padding-left: 5px;
      }

      .layui-timeline-item {
        position: relative;
        padding-bottom: 20px;
      }

      .layui-timeline-item:first-child:before {
        display: block;
      }

      .layui-timeline-item:before {
        content: '';
        position: absolute;
        left: 5px;
        top: 0;
        z-index: 0;
        width: 1px;
        height: 100%;
      }

      .layui-timeline-item:before {
        background-color: #e6e6e6;
      }
      .layui-timeline-item img{
        position: absolute;
        left: -5px;
        top: 0;
        z-index: 10;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background-color: #fff;
        color: #5fb878;
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
        border: 1px solid #5fb878;
      }

      .layui-timeline-content {
        padding-left: 25px;
      }

      .layui-text {
        line-height: 22px;
        font-size: 14px;
        color: #666;
      }

      .layui-timeline-title {
          display: flex;
          align-items: center;
          justify-content: flex-start;
      }
      /******/

      .aui-list-item-input label {
        font-size: 14px;
        height: 21px;
        display: inline-block;
        line-height: 22px;
        margin-right: 5px;
      }

      .aui-list-item-input label:last-child {
        margin-right: 0;
      }

      .itmes li {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding: 10px 0;
        position: relative;
      }

      .itmes li:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        background: #ebeef3;
        width: 100%;
      }

      .itmes p {
        width: 40%;
        color: #2c3e50;
        font-size: 15px;
      }

      .itmes p:last-child {
        width: 60%;
        color: #3498db;
      }

      .column {
        margin-top: 15px;
      }

      .column-title {
        font-size: 15px;
        color: #2c3e50;
        margin-bottom: 5px;
        display: block;
      }

      .header-img {
        width: 50px;
        height: 50px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
      }

      .img-title {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
      }

      .personalInfo {
        margin-bottom: 20px;
      }

      .personalInfo span {
        display: block;
        font-size: 14px;
        color: #6c6f74;
      }

      .personalInfo span:first-child {
        font-size: 18px;
        color: #002257;
      }

      .examine-success {
        background: #1abc9c;
        margin-left: 20px;
      }

      .examine-red {
        background: #e74c3c;
      }

      .staff_name {
        width: 50px;
        height: 50px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-right: 10px;
        line-height: 50px;
        text-align: center;
        color: #fff;
      }

      .aui-col-xs-4 img {
        object-fit: cover;
        border-radius: 3px;
        margin: auto;
      }

      .aui-col-xs-4 span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding: 0 3px;
        height: 48px;
        text-align: center;
        margin: 5px 0;
        font-size: 15px;
      }

      .fileList img {
        width: 35px;
        height: 35px;
      }

      .name-column span {
        background: #009fe8;
        padding: 4px 4px 2px 4px;
        color: #fff;
        border-radius: 2px;
        font-size: 13px;
      }
      /*抄送人部分*/

      .addNode-name {
        padding: 5px 5px;
        background: #009fe8;
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        display: inline-block;
        border-radius: 2px;
        margin-left: 5px;
      }

      .aui-list-item-input label {
        font-size: 14px;
        height: 21px;
        display: inline-block;
        line-height: 22px;
        margin-right: 5px;
      }

      .aui-list-item-input label:last-child {
        margin-right: 0;
      }

      .column {
        margin-bottom: 10px;
      }

      .node-personal {
        width: 65%;
        display: -webkit-box;
        justify-items: flex-start;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        line-height: normal;
      }

      .personal-name {
        display: inline-block;
        font-size: 13px;
        padding: 4px 3px;
        background: #009fe8;
        color: #fff;
        border-radius: 2px;
        margin-left: 5px;
        margin-bottom: 5px;
        position: relative;
      }

      .ico-loading {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 35px;
        height: 35px;
        background: url('../../icon/loading.gif') no-repeat;
        background-size: cover;
        background-position: center;
      }

      .loading {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
        top: 0;
        left: 0;
      }
      /*#personal_List {
          background: red;
          overflow: scroll;
        }*/

      .api_layout_box {
        z-index: 10000;
      }

      .forward-content {
        margin-top: 10px;
      }

      .column-textarea {
        /*border: 1px solid #97a3b4;*/
        border: 1px solid #ccc;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 10px;
        height: 160px;
      }

      .column-textarea::placeholder {
        font-size: 14px;
        color: #333;
      }

      .aui-btn-danger-reject,
      .aui-btn-success-adopt {
        width: 60px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        color: #ffffff;
        font-size: 14px;
      }

      .column-select {
        -webkit-appearance: none;
        /* google */
        -moz-appearance: none;
        /* firefox */
        appearance: none;
        /* IE */
      }
      /* .sureCircle,
      .rejectCircle,
      .waitCircle {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      } */
      .sureCircle {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        background-size: cover;
        background: url('../../image/sureCircle.png') no-repeat;
      }
      .rejectCircle {
        background: url('../../image/rejectCircle.png') no-repeat;
      }
      .waitCircle {
        background: url('../../image/waitCircle.png') no-repeat;
      }
    </style>
  </head>

  <body>
    <div class="api_layout" id="wordOrder_details">
      <!-- <div class="sureCircle"></div> -->
      <!-- <div class="technologicals" style="margin-top:10px">
        <label class="column-title">固定审批流程：</label>
        <div class="technological-process">
          <ul class="layui-timeline">
            <li class="layui-timeline-item">

              <i class="aui-iconfont aui-icon-correct Correct layui-timeline-axis" ></i>
              <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">
                  <span>部门负责人：</span>
                  <div class="name-column">
                    <span>章三</span>
                  </div>
                </div>
              </div>
            </li>
            <li class="layui-timeline-item">

              <i class="aui-iconfont aui-icon-correct Correct layui-timeline-axis" ></i>
              <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">
                  <span>部门负责人：</span>
                  <div class="name-column">
                    <span>章三</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div> -->
    </div>
    <!--添加抄送人员-->
    <div class="api_layout_box hide">
      <div class="box_m">
        <div class="api_box">
          <div class="selectTitle after-border relative">
            <h3 class="h3">选择抄送人</h3>
            <i
              class="aui-iconfont aui-icon-close api-icon-close"
              onclick="closesss()"
            ></i>
          </div>
          <div class="aui-list-item-input relative">
            <select
              class="column-select input-s font-s"
              style="height:40px;-webkit-appearance:none;appearance:none;border:none;font-size:18px;padding:0px 10px;display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFFF;color:#333333;border-radius:4px;"
              onchange="getApproList($api.val(this))"
            >
              <option value="0">请选择部门</option>
            </select>
          </div>
        </div>
        <ul class="column" id="personal_List" style="margin-bottom: 0"></ul>
        <div class="loading hide">
          <i class="ico-loading"></i>
        </div>
      </div>
    </div>
  </body>

  <!-- 部门人员 -->
  <script type="text/template" id="getApproList">
    {{ for (var i = 0;i
    <it.length;i++) { }} <li class="after-border relative">
        <label class="remember-me-label flex-space">
          <div class="flex-start">
              <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="api_leader_head">
              <div>
                  <p class="name font-s">{{=it[i].name}}</p>
                  <p class="del font-s">{{=it[i].section_fullname}}</p>
              </div>
          </div>
          <div class="remember-password-container">
              <div class="remember-password-content">
                  <input type="checkbox" class='checkbox' onchange="addApproValPesonal(this)" {{=personals.length>0?(it[i].staff_num == personals[i]?'checked':''):''}} value="{{=it[i].staff_num}}" name="{{=it[i].name}}">
                  <span></span>
              </div>
          </div>
      </label>
        </li>
        {{ } }}
  </script>

  <!-- 审批流程 -->
  <script type="text/template" id="templateApply">
    <label class="column-title">固定审批流程：</label>
    <div class="technological-process">
        {{ for(var i=0;i
        <it.length;i++) { }} <div class="node-content">
            <span class="node-name">{{=it[i]}}：</span>
            <div class="node-personal" flowName='{{=it[i]}}' jobIDs="">
                <i class="aui-iconfont aui-icon-plus addNode-name" onclick="approValPesonal(this)"></i>
            </div>
    </div>
    {{ } }}
    </div>
  </script>

  <!-- 工单编号 分类 名称等  -->
  <script type="text/template" id="template">
    <div class="personalInfo">
        <div class="img-title">
            {{?it.staff_avatar === null}}
            <p class="staff_name" style="background:#{{=Math.random().toString(16).slice(2,8)}}">{{=it.staff.substr(it.staff.length-1,1)}}</p>
            {{??}}
            <img src="{{=it.staff_avatar}}" alt="" class="header-img"> {{?}}
            <div>
                <span>{{=it.staff}}</span>
                <span>{{=it.section}}</span>
            </div>
        </div>
    </div>
    <ul class="itmes ">

        <li>
            <p>流程名称：</p>
            <p>{{=it.title}}</p>
        </li>
    </ul>
    <ul class="itmes ">
        {{ for (var i = 0;i
        <it.form.length;i++) { }} {{?it.form[i].type !='images' && it.form[i].type !='files' }} <li>
            <p>{{=it.form[i].label}}：</p>
            <p>{{=it.form[i].value}}</p>
            </li>
            {{?}} {{ } }}
    </ul>
    <div class="column-row">
        {{ for (var i = 0;i
        <it.form.length;i++) { }} {{?it.form[i].type=='images' && it.form[i].value.length > 0 }} <div class="column">
            <label class="column-title">{{=it.form[i].label}}：</label>
            <div class="aui-row aui-row-padded">
                {{ for (var j = 0;j
                <it.form[i].value.length;j++) { }} <div class="aui-col-xs-4">
                    <img src="{{=it.form[i].value[j]}}" class="colsImg" onload="setUpHeight(this)" onclick="browseImg('{{=it.form[i].value}}','{{=j}}')" />
            </div>
            {{ } }}
    </div>
    </div>
    {{??it.form[i].type == 'files' && it.form[i].value.length > 0}}
    <div class="column">
        <label class="column-title">{{=it.form[i].label}}：</label>
        <div class="aui-row aui-row-padded fileList">
            {{ for (var j = 0;j
            <it.form[i].value.length;j++) { }} {{?it.form[i].value[j].path.endsWith( 'docx') || it.form[i].value[j].path.endsWith( 'doc')}} <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}')">
                <img src="../../icon/{{=it.form[i].value[j].path.substr(it.form[i].value[j].path.length-3,3)}}.png" />
                <span>{{=it.form[i].value[j].name}}</span>
        </div>
        {{??it.form[i].value[j].path.endsWith('pdf')}}
        <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}')">
            <img src="../../icon/{{=it.form[i].value[j].path.substr(it.form[i].value[j].path.length-3,3)}}.png" />
            <span>{{=it.form[i].value[j].name}}</span>
        </div>
        {{??it.form[i].value[j].path.endsWith('ppt') || it.form[i].value[j].path.endsWith('ptx')}}
        <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}')">
            <img src="../../icon/{{=it.form[i].value[j].path.substr(it.form[i].value[j].path.length-3,3)}}.png" />
            <span>{{=it.form[i].value[j].name}}</span>
        </div>
        {{??it.form[i].value[j].path.endsWith('zip') || it.form[i].value[j].path.endsWith('rar')}}
        <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}',true)">
            <img src="../../icon/{{=it.form[i].value[j].path.substr(it.form[i].value[j].path.length-3,3)}}.png" />
            <span>{{=it.form[i].value[j].name}}</span>
        </div>
        {{??it.form[i].value[j].path.endsWith('xlsx')}}
        <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}')">
            <img src="../../icon/{{=it.form[i].value[j].path.substr(it.form[i].value[j].path.length-3,3)}}.png" />
            <span>{{=it.form[i].value[j].name}}</span>
        </div>
        {{??}}
        <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}')">
            <img src="../../icon/OTHER.png" />
            <span>{{=it.form[i].value[j].name}}</span>
        </div>
        {{?}} {{ } }}
    </div>
    </div>
    {{?}} {{ } }}
    </div>
    <div class="technologicals" style="margin-top:10px">
        <label class="column-title">固定审批流程：</label>
        <div class="technological-process">
            {{ for(var prop in it.flows) { }}
            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <img src="{{=it.flows[prop].status == 2 ? '../../image/sureCircle.png' : (it.flows[prop].status == 3 ? '../../image/rejectCircle.png':'../../image/waitCircle.png')}} "></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">
                            <span>{{=it.flows[prop].flow_name}}：</span>
                            <div class="name-column">
                                {{ for (var j = 0;j
                                <it.flows[prop].flow.length;j++) { }} <span>{{=it.flows[prop].flow[j]}}</span>
                                    {{ } }}
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            {{ } }}
        </div>
    </div>
    <!-- 抄送人 根据is- -->
    {{?it.is_forward == 1}}
    <div class="is-cpoy-module">
        <label class="column-title">抄送人：</label>
        <div class="chioce-copy-person">
            <div class="node-personal" jobIDs="">
                <i class="aui-iconfont aui-icon-plus addNode-name" onclick="approValPesonal(this)"></i>
            </div>
        </div>
        <div class="forward-content">
            <textarea rows="4" cols="40" class="column-textarea font-s column-textarea1" placeholder="请输入抄送原因"></textarea>
        </div>
    </div>
    {{?}}
    <div style="text-align: center;margin-top: 15px">
        <div class="aui-btn aui-btn-danger-reject examine-red" onclick="openReject('{{=it.id}}')">驳回</div>
        <div class="aui-btn aui-btn-success-adopt examine-success" onclick="openAdopt('{{=it.id}}')">通过</div>
    </div>
  </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 type="text/javascript" src="../../script/config.js"></script>
  <script type="text/javascript">
    var toast = new auiToast(),
      personals = '',
      addNodeThis = '';
    apiready = function() {
      var info = $api.getStorage('data');
      token = JSON.parse(info).data.access_token;
      getApplyDe(api.pageParam.ID, token);
      getApplyDeTwo(api.pageParam.id, token);
    };

    function getApplyDe(id, token) {
      var headers = {
        Authorization: 'Bearer ' + token,
      };
      $http.fnReuestData(
        UrlRouter.getExamineDe + id,
        headers,
        'get',
        '',
        function(ret, err) {
          // console.log(JSON.stringify(ret.data));
          if (ret.code === 0) {
            $apis.html(wordOrder_details, '#template', ret.data);
            toast.hide();
          } else if (ret.code == 1) {
            $apis.ToastType(ret.message, 'bottom');
            toast.hide();
          }
        }
      );
    }
    //
    function getApplyDeTwo(id, token) {
      var headers = {
        Authorization: 'Bearer ' + token,
      };
      $http.fnReuestDataNologing(
        UrlRouter.getApplyD + id,
        headers,
        'get',
        '',
        function(ret, err) {
          if (ret.code === 0) {
            toast.hide();
            $apis.append(column_row, '#template', ret.data.form);
            $apis.append(technologicals, '#templateApply', ret.data.flow);
          }
        }
      );
    }

    // 通过
    function openAdopt(id) {
      var node_personal = $('.node-personal');
      var hadFlows = {};
      var hadFlows1 = [];
      node_personal.each(function(index) {
        var personal_names = $(this).find('.personal-name');
        //  + '-' + index
        var key = $(this).attr('flowName');
        for (var i = 0; i < personal_names.length; i++) {
          hadFlows1.push($(personal_names[i]).attr('jobId'));
        }
        hadFlows[key] = hadFlows1.join(',');
      });
      api.openFrame({
        name: 'adopt',
        bounces: false,
        url: 'adopt.html',
        bgColor: 'rgba(0,0,0,.6)',
        animation: {
          type: 'fade',
          subType: 'from_right',
          duration: 300,
        },
        rect: {
          x: 0,
          y: 0,
          w: api.winWidth,
          h: 'auto',
        },
        pageParam: {
          ID: id,
          forward_content: $api.val($api.dom('.column-textarea')),
          forward_staff: hadFlows1,
        },
      });
    }
    // 驳回
    function openReject(id) {
      api.openFrame({
        name: 'reject',
        bounces: false,
        url: 'reject.html',
        bgColor: 'rgba(0,0,0,.6)',
        rect: {
          x: 0,
          y: 0,
          w: api.winWidth,
          h: 'auto',
        },
        animation: {
          type: 'fade',
          subType: 'from_right',
          duration: 300,
        },
        pageParam: {
          ID: id,
        },
      });
    }
    // 获取部门
    function getDep() {
      var headers = {
        Authorization: 'Bearer ' + token,
      };
      $http.fnReuestDataNologing(
        UrlRouter.getAlllist,
        headers,
        'get',
        '',
        function(ret, err) {
          var html = '';
          for (var i = 0; i < ret.data.length; i++) {
            if (i == 0) {
              html += `<option value="0">请选择部门</option>`;
            }
            html += `<option value="${ret.data[i].id}">${ret.data[i].title}</option>`;
          }
          $api.html($api.dom('.column-select'), html);
        }
      );
    }
    // 获取人员列表
    function getApproList(id) {
      $api.removeCls($api.dom('.loading'), 'hide');
      $apis.html(personal_List, '#getApproList', '');
      var headers = {
        Authorization: 'Bearer ' + token,
      };
      $http.fnReuestDataNologing(
        UrlRouter.getPersonalList,
        headers,
        'post',
        {
          id: id,
        },
        function(ret, err) {
          if (ret.code === 0) {
            $api.addCls($api.dom('.loading'), 'hide');
            $apis.html(personal_List, '#getApproList', ret.data);
          }
        }
      );
    }
    // 添加抄送人员
    function addApproValPesonal(that) {
      var personal_name = $(addNodeThis)
        .parent()
        .find('.personal-name');
      var name = $api.attr(that, 'name'),
        ID = $api.val(that),
        IDS = [];
      let addSdtaffNum = [];
      if (that.checked) {
        $api.prepend(
          addNodeThis.parentNode,
          `<sapn class="personal-name" jobId="${ID}" ondblclick="this.remove()">${name}</span>`
        );
        $(addNodeThis)
          .parent()
          .attr('jobIDs', IDS.push(ID));
        // console.log(JSON.stringify($('.personal-name').attr('jobId')));
      } else {
        $(addNodeThis)
          .parent()
          .find('[jobid*="' + ID + '"]')
          .remove();
        // console.log(JSON.stringify($('.personal-name').attr('jobId')));
      }
    }
    // 打开抄送人
    var ruleTop = '';

    function approValPesonal(that) {
      addNodeThis = that;
      $('.api_layout_box').show();
      $('.mask').addClass('hidden');
      ruleTop = $(addNodeThis).offset().top;
      $apis.html(personal_List, '#getApproList', '');
      getDep(); //调用部门接口
    }
    // 关闭
    function closesss() {
      $('.api_layout_box').hide();
      $('.mask').removeClass('hidden');
      $('body,html').scrollTop(ruleTop);
    }
    // 上传图片的高度
    function setUpHeight(that) {
      that.style.width = that.offsetWidth + 'px';
      that.style.height = that.offsetWidth + 'px';
    }
    //  上传图浏览
    function browseImg(data, i) {
      var imageBrowser = api.require('imageBrowser');
      imageBrowser.openImages({
        imageUrls: data.split(','),
        activeIndex: i,
        showList: false,
      });
    }
    // 上传文件在线浏览
    function browseFile(paths, flag) {
      api.download(
        {
          url: paths,
          report: true,
          cache: true,
          allowResume: true,
        },
        function(ret, err) {
          if (ret.state == 1) {
            if (!flag) {
              var superFile = api.require('superFile');
              superFile.open({
                path: ret.savePath,
              });
            }
            setTimeout(function() {
              api.toast({
                msg: '下载成功',
                duration: 2000,
                location: 'top',
              });
            }, 100);
          } else {
          }
        }
      );
    }
  </script>
</html>
