<extend name="Public/promote_base"/>
<block name="css">
<link href="__CSS__/20180207/data.css" rel="stylesheet">
<link href="__CSS__/20180207/finance.css" rel="stylesheet">
<style type="text/css">
 .keywords_information {margin-left:15px;cursor:pointer;}
.keywords_information .keywords_mark {height:35px;line-height:35px;color:#4A90F0;}
.keywords_information .keywords_mark span{border-bottom:1px solid transparent;}
.keywords_information .keywords_mark:hover span {border-bottom-color:#4A90F0;}
.keywords_information .keywords_content {transition:opacity 1.2s,visibility 1.5s;}
.keywords_information .keywords_content:before {margin-left:41px;}
.keywords_information .keywords_content .keywords_close {position:absolute;right:0;top:0;width:25px;height:40px;line-height:35px;color:#515974;}
.keywords_information .keywords_list span:first-child {width:160px;}
.keywords_information .keywords_list span:last-child {width:228px;}
.keywords_information {position:relative;display:inline-block;}
.keywords_information .keywords_mark {display:block;font-size:12px;font-style:normal;font-weight:normal; }
.keywords_information .keywords_content.active {visibility:visible;opacity:1;transition:visibility 1.5s,opacity 1s;}
.keywords_information .keywords_content {visibility:hidden;opacity:0;
    position:absolute;width:435px;z-index:10;background:#fff;border-radius:5px;
    border: 1px solid #E7ECEF;
    box-shadow: 1px 1px 15px rgba(0,0,0,.1);
    top:10px;left:72px;
}

.keywords_information .keywords_title {
    height:40px;line-height:40px;background-color:#FAFAFA;
    border-top-left-radius:5px;border-top-right-radius:5px;color:#515974;
    padding-left:10px;font-size:12px;
}
.keywords_information .keywords_list {overflow:hidden;clear:both;padding:5px;margin:0 8px;font-size:10px;border-bottom:1px solid #EBEEF5;}
.keywords_information .keywords_list:last-child {border-bottom:none;}
.keywords_information .keywords_list span {display:inline-block;display: block;font-weight: normal;color: #515974;
    float: left;
    line-height: 30px;
    width: 420px;}
    .keywords_information .keywords_list span:last-child{color: #a5a6bb;}
.keywords_information .keywords_list span:first-child {width:160px;margin-right:20px;}
.chakan{
      font-size: 14px;
      font-weight: normal;
      color: #26C7DB;
      cursor: pointer;
      display: inline-block;
      text-align: center;
  }
.chakan:hover{color: #2bd8ed;}
.trunk-list{position: relative;min-height: 66vh;}

.form-group {
  float: left;
  margin-bottom: 10px;
}
.form-group label {
  line-height: 34px;
  height: 34px;
}
.form-group .txt {
  width: 180px;
    height: 34px;
}
</style>
</block>

<block name="body">
    <div class="page-search normal_list query-recharge-search">
      <div class="trunk-title">
      	<div class="location">
		<div class="location-container">当前位置：<span>数据管理></span><span>ARPU统计</span></div>
		</div>
      	<img src="__IMG__/20180207/icon_normal_ARPU.png">
      	<span class="title_main">ARPU统计</span>
      	<span class="details">根据日期，游戏，推广员分析ARPU等相关数据信息（排除绑币）</span>
      	<div class="keywords_information" style="clear: both;">
        <i class="keywords_mark"><span>关键词说明</span></i>
        <ul class="keywords_content">
            <li class="keywords_title">关键词说明<a href="javascript:;" class="keywords_close"><img src="__IMG__/20180207/btn_normal_close.png"/></a></li>
            <li class="keywords_list">
                <span class="">活跃用户</span>
                <span class="">当天登录的用户总数</span>
            </li>
            <li class="keywords_list">
                <span class="">付费用户</span>
                <span class="">当天付费的用户数量</span>
            </li>
            <li class="keywords_list">
                <span class="">新增付费用户</span>
                <span class="">当天付费用户中第一次付费的用户数</span>
            </li>
            <li class="keywords_list">
                <span class="">新增付费额</span>
                <span class="">第一次付费的玩家当天充值总额</span>
            </li>
            <li class="keywords_list">
                <span class="">付费率</span>
                <span class="">付费用户/活跃用户</span>
            </li>
            <li class="keywords_list">
                <span class="">ARPU(每用户平均付费)</span>
                <span class="">当日总充值/活跃用户数</span>
            </li>
            <li class="keywords_list">
                <span class="">ARPPU(付费用户的平均付费)</span>
                <span class="">当日总充值/付费用户数</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="trunk-content article">
          <div class="trunk-search clearfix">
            <form action="{:U('Query/arpu_analysis',array('row'=>I('get.row')))}" method="post" enctype="multipart/form-data">
              <div class="form-group normal_space">
                <select id="game-select" name="game_id" class="reselect select_gallery" style="width: 220px;" >
                  <option value="0">请选择游戏</option>
                  <volist name="games" id="game">
                  <option value="{$game.game_id}" <if condition="I('game_id') eq $game['game_id']">selected</if>>{$game.game_name}</option>
                  </volist>
                </select>
              </div>
              <div class="form-group normal_space">
                <select id="server-select" name="server_id" class="reselect select_gallery" style="width: 220px;" >
                  <option value="0">请选择区服</option>
                </select>
              </div>
              <div class="form-group normal_space">
                <select name="sdk_version" class="reselect select_gallery" style="width: 220px;" >
                  <option value="0">请选择设备类型</option>
                  <option value="1" <if condition="I('sdk_version') === '1'">selected</if>>Andriod</option>
                  <option value="2" <if condition="I('sdk_version') === '2'">selected</if>>IOS</option>
                </select>
              </div>
              <div class="form-group normal_space">
                  <select name="status" class="reselect select_gallery" style="width: 220px;" >
                    <option value="0">帐号状态</option>
                    <option value="1" <if condition="I('status') === '1'">selected</if>>正常</option>
                    <option value="2" <if condition="I('status') === '2'">selected</if>>冻结</option>
                  </select>
              </div>
              <if condition="$parent_id eq 0">
              <div class="form-group normal_space">
                <select name="promote_id" class="reselect select_gallery" style="width: 220px;" >
                  <option value="0">请选择组长</option>
                  <volist name="subPromotes" id="promote">
                  <option ba-id="{$promote.id}" value="{$promote.id}" <if condition="I('promote_id') == $promote['id']">selected</if>>{$promote.account}</option>
                  </volist>
                </select>
              </div>
              </if>
              <if condition="$parent_id gt 0 and $grand_id eq 0">
              <div class="form-group normal_space">
                <select name="promote_id" class="reselect select_gallery" style="width: 220px;" >
                  <option value="0">请选择推广员</option>
                  <volist name="subPromotes" id="promote">
                  <option ba-id="{$promote.id}" value="{$promote.id}" <if condition="I('promote_id') == $promote['id']">selected</if>>{$promote.account}</option>
                  </volist>
                </select>
              </div>
              </if>
              <div class="form-group normal_space">
                <label>起止时间：</label>
                <input type="text" class="txt range-date" name="time" placeholder="起止时间" value="{:I('time')}" >
              </div>
              <div class="form-group">
                <input type="submit" class="submit normal_space" value="查询">
              </div>
            </form>
          </div>
      </div>
    <div class="page-list query-recharge-list">

      <div class="trunk-content article">
          <div class="trunk-list">
            <table class="table normal_table" id="datacontent">
            <table class="table normal_table" id="datatable" style="<notempty name='list_data'>display:none;</notempty>"><thead>
                <tr class="odd">
                  <th>日期</th>
                  <if condition='empty(I("game_id")) != true'>
                    <th>游戏名称</th>
                  <else/>
                    <th>付费游戏数</th>
                  </if>
                  <if condition='empty(I("promote_id")) != true'>
                    <th>所属渠道</th>
                  </if>
                  <th>活跃用户</th>
                  <th>新增用户</th>
                  <th>付费用户</th>
                  <th>新增付费用户</th>
                  <th>付费总额</th>
                  <th>付费率</th>
                  <th>新增付费额</th>
                  <th>累计付费用户</th>
                  <th>1日留存</th>
                  <th>ARPU</th>
                  <th>ARPPU</th>
                    <if condition='empty(I("game_id")) == true'>
                  <th>详情</th>
                    </if>
                </tr></thead><tbody>
                <empty name="list_data">
                <tr><td colspan="12" style="text-align: center;height: 45vh;"><img src="__IMG__/20180207/icon_wushujv2.png"/><p style="line-height: 40px;color: #A5A5A5;">暂无数据</p></td></tr>
                <else />
                <volist name="list_data" id="vo" mod="2">
                <tr name="rows" class="<eq name='mod' value='1'>odd</eq>">
                  <td>{$key}</td>
                  <if condition='empty(I("game_id")) != true'>
                    <th>{:I("game_name")}</th>
                  <else/>
                    <td>{$vo.payGame}</th>
                  </if>
                  <if condition='empty(I("promote_id")) != true'>
                    <th>{:I("promote_account")}</th>
                  </if>
                  <td>{$vo.activeUsers}</td>
                  <td>{$vo.newUsers}</td>
                  <td>{$vo.payUsers}</td>
                  <td>{$vo.newPayUsers}</td>
                  <td>{:number_format($vo['usersIncome'],2)}</td><!-- {:number_format(round($vo['usersIncome']),2)} -->
                  <td>{$vo.usersPayRate}</td>
                  <td>{:number_format($vo['newPaySum'],2)}</td>
                  <td>{$vo.totalPayUsers}</td>
                  <td>{$vo.ratentionRate1}</td>
                  <td>{:number_format(round($vo['usersArpu'],2),2)}</td>
                  <td>{:number_format(round($vo['usersArppu'],2),2)}</td>
                    <if condition='empty(I("game_id")) == true'>
                  <td>
                      <a onclick="chakan('{$key}')" style="cursor: pointer" class="chakan">查看</a>
                  </td>
                    </if>
                </tr>
                </volist>
                </empty></tbody>
            </table>
            </table>
            <notempty name="list_data">
            <div class="pagenation clearfix">
							<div>
							<select id="pagechange" name="row" onchange="pagechange(this)">
								<option value="10">每页10条</option><option value="25">每页25条</option><option value="50">每页50条</option><option value="100">每页100条</option></select>
							<span id="pagenation">

							</span>
							</div>
						</div>
            </notempty>
          </div>
      </div>
    </div>
    </div>
</block>
<block name="script">
<link rel="stylesheet" href="__STATIC__/flatpickr/flatpickr.min.css">
<script src="__STATIC__/flatpickr/flatpickr.min.js"></script>
<script src="__STATIC__/flatpickr/l10n/zh.js"></script>
<script type="text/javascript" src="__JS__/20170831/select2.min.js"></script>
<script type="text/javascript" src="__JS__/20170831/pagination.js"></script>
<script type="text/javascript" src="__JS__/20170831/string.js"></script>
<script type="text/javascript" src="__JS__/20170831/tabpage.js"></script>
<eq name='timeout' value='1'>
<script>
  layer.msg('时间间隔不能超过90天');
</script>
</eq>
<script>
    $('.range-date').flatpickr({
      mode: 'range',
      locale: 'zh',
    })
		layer.config({
			  extend: 'skin/myskin/style.css', //同样需要加载新皮肤
			});
    function chakan(key) {
        var bangbi = $('#bangbi').val();
        var promote_id = $('#promote_arpu').val();
        url = "/index.php?s=/Home/Query/cha_userarpu/time/"+key+"/bangbi/"+bangbi+"/promote_id/"+promote_id;
        timetitle = key;
        console.log(url);
        layer.open({
            type: 2,
            title: false,
            closeBtn: 0, //不显示关闭按钮
            shade: [0],
            area: ['1px', '1px'],
            offset: 'rb', //右下角弹出
            time: 1, // 秒后自动关闭   这里设置成1ms 不显示过度页面
            anim: 2,
            content: ['', 'no'], //iframe的url，no代表不显示滚动条
            end: function () { //
                layer.open({
                    type: 2,
                    title: timetitle + '游戏数据',
                    skin: 'myskin', //只对该层采用myskin皮肤
                    shadeClose: true,
                    shade: [0.3,'#273142'],
                    scrollbar :false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['70%', '50%'],
                    content: url//iframe的url
                });
            }
        });
    }

</script>
<script type="text/javascript">
setValue('promote_id',{$Think.request.promote_id|default=0});
setValue('game_id','{$Think.request.game_id|default=0}');

function pagechange(that){
	tablePage('datatable', 'datacontent', 'pagenation', [1, 2, 4, 5, 6, 10], false,that.value);
	var export_data = $('#export_data');
	var url = export_data.attr('href');

	url = url.replace('.html','').replace(/(&|\/)row(=|\/)\d*/gi,'').replace(/\/p\/\d*/gi,'');

	export_data.attr('href',url+'/row/'+that.value);

}

function pagenation_click() {

		$('#pagenation a').click(function() {
			var that = $(this),p = that.text();console.log(p);
			var export_data = $('#export_data');
			var url = export_data.attr('href');

			url = url.replace('.html','').replace(/(&|\/)row(=|\/)\d*/gi,'').replace(/\/p\/\d*/gi,'');

			export_data.attr('href',url+'/p/'+p+'/row/'+that.value);

			return false;
	 });

}

$().ready(function(){
   $("#pagehtml a").on("click",function(event){
    event.preventDefault();//使a自带的方法失效，即无法调整到href中的URL(http://www.baidu.com)
    var geturl = $(this).attr('href');
    $('#data_form').attr('action',geturl);
    $('#data_form').submit();
   });

	 pagenation_click();

   $(".submit").click(function(){
      var sdate =$('#sdate').val();
      var edate =$('#edate').val();
      if(Date.parse(sdate) > Date.parse(edate)){
        layer.msg('开始时间必须小于等于结束时间');
        return false;
      }
   })

  $(".select_gallery").select2();



  tablePage('datatable', 'datacontent', 'pagenation', [1, 2, 4, 5, 6, 10], false);

  $('.keywords_information .keywords_mark').click(function() {
      var that = $(this).siblings().addClass('active');
      console.log(that);
      $(document).click(function(event) {
        var e = event || window.event;
        var target= $(e.target);
        if (!target.hasClass('keywords_information') && target.closest('.keywords_information').length<1) {
          that.removeClass('active');
        }

      });

      that.find('.keywords_close').click(function() {
        that.removeClass('active');

        return false;
      });

      return false;
    });

  $("#game_id").change(function(){
    var game_name = $('#game_id option:selected').text();
    $("#game_name").val(game_name);
  });

  $("#promote_id").change(function(){
    var account = $('#promote_id option:selected').text();
    $("#promote_account").val(account);
  })
});
</script>

</block>