<!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/api.css"/>
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        html,body{
            background: #F0F0F0;
        }
        .hide{
          display: none;
        }
        .date-lists{
            width: 100%;
            padding: 10px 0;
            overflow-x: scroll;
            white-space: nowrap;
            box-sizing: border-box;
        }
        .date-lists::-webkit-scrollbar{
          display: none;
        }
        .date-wrap{
            padding: 0 10px;
            background: #F0F0F0;
        }
        .date-lists li{
            margin-right: 10px;
            border: 1px solid #009FE8;
            background: #f0f0f0;
            padding: 4px 10px;
            border-radius: 5px;
            color: #009FE8;
        }
        .date-lists .active{
            background: #009FE8;
            color: #fff;
        }
        /*list*/
        .duty-wrap{
            background: #fff;
        }
        .title-wrap{
            position: relative;
        }
        .title-wrap li{
            width: 70%;
            text-align: center;
            font-size: 14px;
            color: #009FE8;
            padding: 14px 0;
        }
        .title-wrap li:first-child{
            width: 30%;
        }
        .title-wrap:after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: #009FE8;
        }
        /*list*/
        .duty-list li{
            font-size: 14px;
            color: #232627;
            padding: 10px 0;
            position: relative;
        }
        .duty-list li:after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: #F0F0F0;
        }
        .duty-list .date-week{
            width: 35%;
            text-align: center;
        }
        .duty-list .duty-personal{
            width: 65%;
            padding:0 15px 0 10px;
            line-height: 1.7;
        }
        .date-week span{
            color: #6C6F74;
            margin-top: 3px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="api_layout">
        <div class="date-wrap">
           <ul class="date-lists flex-start" id="date_list">

           </ul>
        </div>
<!--        list-->
        <div class="duty-wrap" id="my_duty">

        </div>
    </div>
    <div class="noText hide">
      <img src="../../image/noText.png" alt="">
    </div>
</body>
</html>
<script type="text/template" id="monthTemplate">
  {{~it:value:index}}
      {{?index == 0}}
        <li class="active" onclick="randomSwitchBtn(this,'{{=value.month}}')">{{=value.month}}({{=value.days}}天)</li>
      {{??}}
        <li onclick="randomSwitchBtn(this,'{{=value.month}}')">{{=value.month}}({{=value.days}}天)</li>
      {{?}}
  {{~}}
</script>
<script type="text/template" id="myTemplate">
  <div class="duty-title">
      <ul class="flex-start title-wrap">
          <li>时间</li>
          <li>值班人</li>
      </ul>
  </div>
  <ul class="duty-list">
      {{~it:value:index}}
        <li class="flex-start">
            <div class="date-week">
                <label>{{=value.date}}</label>
                <span>{{=value.week}}</span>
            </div>
            <p class="duty-personal">{{=value.content}}</p>
        </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/config.js" charset="utf-8"></script>
<script type="text/javascript">
  var username ='';
  apiready = function () {
        var info = $api.getStorage('data');
        username = JSON.parse(info).data.user.name;
        getDutyDate(username)
  };
  function getDutyDate(name) {
    $http.fnReuestDataNologing(UrlRouter.getMymonth,'','get',{name:name},function (ret, err) {
      if (ret.code === 0 && ret.data.length>0) {
        $apis.html(date_list,'#monthTemplate',ret.data);
        getDutyList(ret.data[0].month,name);
        $api.addCls($api.dom('.noText'), 'hide');
      }else {
        $apis.html(date_list,'#monthTemplate',ret.data);
        $api.removeCls($api.dom('.noText'), 'hide');
      }
    })
  }
  function getDutyList(month,name) {
    api.showProgress({
      title: '',
      text: '加载中...',
      modal: true
    });
    $http.fnReuestDataNologing(UrlRouter.getDutyMylist,'','post',{month:month,name:name},function (ret, err) {
      if (ret.code === 0) {
        $apis.html(my_duty,'#myTemplate',ret.data);
        api.hideProgress()
      }
    })
  }
  // 点击日期
  function randomSwitchBtn( tag ,month) {
      if( tag == $api.dom('.date-lists li.active') )return;
      var eFootLis = $api.domAll('.date-lists li');
      index = 0;
      for (var i = 0,len = eFootLis.length; i < len; i++) {
          if( tag == eFootLis[i] ){
              index = i;
          }else{
              $api.removeCls(eFootLis[i], 'active');
          }
      }
      $api.addCls( eFootLis[index], 'active');
      getDutyList(month,username)
  }

</script>
