<!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">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" href="../../css/projeck.css">
	<style>
        .aui-card-list {
            margin-bottom: 0;
        }
        .column{
          border: 1px solid #eaeff3;
          background: #fff;
          padding: 10px;
          border-radius: 5px;
          margin-bottom:10px;
        }
        .column:last-child{
          margin-bottom: 0;
        }
        .small_title{
          font-size:12px;
          color: #74b9e7;
          display: block;
          font-style: normal;
        }
        .content{
          position: relative;
          padding-bottom: 5px;
          line-height: 1.6;
        }
        .content:after{
          width: 100%;
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          height: 1px;
          background: #eaeff3;
        }
        .large_title{
            margin: 10px 0;
        }
        .technological-process{
            margin-top: 10px;
            display: flex;
            justify-content: flex-start;
            /* flex-wrap: wrap; */
            white-space: nowrap;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
        }
        .col{
            color: red;
            font-size: 12px;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
            padding-right: 10px;
            margin-bottom: 10px;
            /*width: 25%;*/
        }
        .name{
            border: 1px solid red;
            display: block;
            padding: 3px 6px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            margin-bottom: 5px;
        }
        .name:last-child{
            margin-bottom: 0;
        }
        .ico-j{
            display: block;
            width: 15px;
            height: 15px;
            background: url("../../image/Arrow.png") no-repeat;
            background-size: contain;
            margin-left: 10px;
        }
        .col:last-child{
            padding-right: 0;
        }
        .col:last-child .ico-j{
            display: none;
        }
        .aui-padded-t-5{
          padding-top: 10px!important;
        }
	</style>
</head>
<body>
    <section class="aui-content aui-padded-l-5 aui-padded-r-10 aui-padded-t-5" id="seeApply">

    </section>
    <div class="noText hide">
      <img src="../../image/noText.png" alt="">
    </div>
</body>
<script type="text/template" id="templateApply">
    {{ for (var i = 0;i<it.length;i++) { }}
        <div class="column" onclick="openChangeFill('{{=it[i].id}}','{{=it[i].title}}')">
              <i class="small_title">{{=it[i].classify_name}}</i>
              <h2 class="large_title">{{=it[i].title}}</h2>
              <p class="content">{{=it[i].introduce}}</p>
              <div class="technological-process">
                {{ for(var prop in it[i].flow) { }}
                    <div class="col">
                        <div class="name_list">
                          {{ for (var j = 0;j<it[i].flow[prop].length;j++) { }}
                            <span class="name">{{=it[i].flow[prop][j]}}</span>
                          {{ } }}
                        </div>
                        <i class="ico-j"></i>
                    </div>
                {{ } }}
              </div>
        </div>
    {{ } }}
</script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript">
var toast = new auiToast()
    apiready = function(){
      applyList(api.pageParam.token, api.pageParam.id)
    };
    // 可申请工单列表
    function applyList(token,ids) {
      var headers = {
          "Authorization": "Bearer " + token
      };
      $http.fnReuestData(UrlRouter.applyList,headers,'post',{id:ids},function (ret,err) {
        toast.hide()
        if (ret && ret.code == 0) {
            if (ret.data.length>0) {
                $apis.html(seeApply,'#templateApply',ret.data);
                $api.addCls($api.dom('.noText'), 'hide')
            }else {
                $apis.html(seeApply,'#templateApply',ret.data);
                $api.removeCls($api.dom('.noText'), 'hide');
            }
          }else {
           api.toast({
               msg: '加载超时，请检查网络',
               duration: 2000,
               location: 'bottom'
           });
        }
      })
    }
    // 填写工单
    function openChangeFill(ids,title) {
      var pageParam = {
        id:ids,
        title:title
      }
      $event.openWin('changeFill_win','changefillword_win',pageParam,'')
    }
</script>
</html>
