<extend name="Public/promote_base"/>
<block name="css">
  <link href="__CSS__/20180207/data.css" rel="stylesheet">
  <link href="__CSS__/20180207/manager.css" rel="stylesheet">
  <link href="__CSS__/20180207/finance.css" rel="stylesheet">
  <link href="__STATIC__/icons_alibaba/iconfont.css?v=1.3" rel="stylesheet">
  <link href="__CSS__/game_detailed.css" rel="stylesheet">
</block>

<block name="body">
  <style>
    @media screen and (max-width: 1500px) {
      .normal_form {
        padding-top: 45px;
      }

      .trunk-search .normal_txt {
        width: 100px
      }

      .select2-container--default .select2-selection--single {
        width: 125px;
      }

      .trunk-search .select-time .txt {
        width: 100px;
      }

      .form-group .submit {
        width: 55px;
      }
    }

    .selected-color {
      color: #2bd8ed;
    }

    .pointer-hand {
      cursor: pointer;
    }

    .icon-spend {
      position: relative;
      font-size: 1.2rem;
      top: 3px;
      float: right;
      right: 10px;
    }

    .th-hide {
      display: none;
    }

    .btn {
      width: auto;
      padding-left: 15px;
      padding-right: 15px;
      position: relative;
      z-index: 1;
    }

    .btn-role-border {
      border-left: 0;
    }

    .form-group {
      float: left;
      margin-bottom: 10px;
    }
    .form-group label {
      line-height: 34px;
      height: 34px;
    }
    .form-group .txt {
      width: 180px;
      height: 34px;
    }
  </style>
  <div class="page-search normal_list query-recharge-search jssearch">
    <div class="trunk-title">
      <div class="location">
        <div class="location-container">当前位置：<span>数据管理></span><span>{$meta_title}</span></div>
      </div>
      <img src="__IMG__/20180207/icon_chongzhi.png">
      <span class="title_main">{$meta_title}</span>
      <span class="details">说明：默认展示旗下各子渠道的全部数据</span>
    </div>
    <div class="trunk-content article">
      <div class="trunk-search clearfix">
        <div class="tab normal_tab">

        </div>
        <!--  <form action="{:U('Query/summary')}" method="get" enctype="multipart/form-data" class="normal_form"> -->
        <include file="Public/promote_select" />

        <div class="form-group normal_space">
          <select id="relation_game_id" name="relation_game_id" class="reselect select_gallery">
            <option value="">请选择游戏</option>
            <volist name=":get_promote_serach_game()" id="vo">
              <option value="{$vo.relation_game_id}" title="{$vo.relation_game_name}">{$vo.relation_game_name}</option>
            </volist>
          </select>
        </div>

        <div class="form-group normal_space">
          <select id="sdk_version" name="sdk_version" class="reselect select_gallery" style="width:215px;">
            <option value="0">请选择设备类型</option>
            <volist name=":getSDKType()" id="vo" key="k">
              <option value="{$k}">{$vo}</option>
            </volist>
          </select>
        </div>

        <div class="form-group normal_space">
          <select id="server_id" name="server_id" class=" reselect select_gallery">
            <option value="">请选择区服</option>
            <volist name="serverData" id="vo">
              <option value="{$vo.server_id}">{$vo.server_name}</option>
            </volist>
          </select>
        </div>

        <div class="form-group normal_space">
          <label class="form-title select-title" style="position: relative;">起止时间：</label>
          <div class="select-time">
            <input type="text" readonly id="sdate" class="txt" name="begtime" placeholder="开始时间" value="{$initBegTime}">
          </div>
          <label class="form-title select-title zhi_color">&nbsp;—&nbsp;</label>
          <div class="select-time">
            <input type="text" readonly id="edate" class="txt" name="endtime" placeholder="结束时间" value="{$initEndTime}">
          </div>
        </div>

        <div class="form-group normal_space">
          <input type="submit" class="submit" id='submit' url="{:U('Query/dailySummary','model='.$model['name'],false)}"
                 value="查询">
        </div>

        <div class="form-group normal_space" style="margin-left: 46px;">
          <label style="line-height: 34px;cursor: pointer;" id="own">
            <i class="iconfont {:empty($ownId)?'iconfangxingweixuanzhong':'iconfangxingxuanzhongfill selected-color'}"
               style="font-size: 1.5rem;position: relative;top: 3px;margin-right: 2px;"></i>本账号
            <input type="checkbox" name="own_id" id="own_id" style="display: none;" value="1"
            <if condition="$ownId eq 1"> checked="checked" </if> />
          </label>
        </div>
        <!-- <input type="hidden" name="version" value="{:I('version',1)}"> -->
        <!--  </form> -->
      </div>

      <div class="tab marg_top20" style="clear:both;display: flex;">
        <div style="display: flex;">
          <div class="btn btn-role highlight" data-type="1">
            <p>创角数|创角用户</p>
          </div>

          <div class="btn btn-role btn-role-border" data-type="2">
            <p>新创角用户|设备</p>
          </div>

          <?php if ($canViewUserRecharge) :?>
          <div class="btn btn-role btn-role-border" data-type="3">
            <p>充值人数|充值总额</p>
          </div>
          <?php endif ;?>
        </div>
      </div>
    </div>

    <div id="chart_box" class="trunk-content" style="width: calc(100% - 40px);height: 400px;"></div>

    <div class="page-list apply-app_apply-list query-recharge-list" style="margin-top: 20px;">
      <div class="trunk-content article">
        <div class="tabcon trunk-list">
          <table class="table normal_table">
            <tr class="odd">
              <th>日期</th>
              <th class="pointer-hand" title="创角数：统计时间范围内，成功创建角色数量（唯一）">创角数</th>
              <th class="pointer-hand" title="创角用户：统计时间范围内，成功创角的用户数（去重）">创角用户</th>
              <th class="pointer-hand" title="新创角用户：当日（24小时），首次创建角色的用户数；新创角设备：当日（24小时），首次创建角色设备总数（去重）">新创角用户|新创角设备
              </th>
              <th class="pointer-hand" title="新增创角IP：统计时间范围内，首次创建角色IP总数（去重）">新增创角IP</th>
              <th class="pointer-hand" title="登录用户数：统计时间范围内，登录的用户数（去重）">登录用户数</th>
              <?php if ($canViewUserRecharge) :?>
              <th class="pointer-hand" title="充值人数：当日（24小时），在游戏内充值成功的订单的用户数（去重）">充值人数</th>
              <th class="pointer-hand" title="充值次数：当日（24小时），在游戏内充值成功的订单数量">充值次数</th>
              <th class="pointer-hand spend-btn" title="充值总额：当日（24小时），在游戏内充值成功的订单金额总和" style="width: 200px;">充值总额<i
                      class="iconfont iconplus-square icon-spend"></i></th>
              <th class="pointer-hand spend-element th-hide" title="现金充值：统计时间范围内，在游戏内充值成功的订单，使用现金支付金额总和">现金充值</th>
              <th class="pointer-hand spend-element th-hide" title="通用币充值：统计时间范围内，在游戏内充值成功的订单，使用通用币支付金额总和">通用币充值</th>
              <th class="pointer-hand spend-element th-hide" title="绑定币充值：统计时间范围内，在游戏内充值成功的订单，使用绑定币支付金额总和">绑定币充值</th>
              <th class="pointer-hand spend-element th-hide" title="折扣币充值：统计时间范围内，在游戏内充值成功的订单，使用折扣币支付金额总和，该部分不参与结算">
                折扣币充值
              </th>
              <th class="pointer-hand spend-element th-hide" title="代金券使用：统计时间范围内，在游戏内充值成功的订单，使用代金券总和，该部分不参与结算">
                代金劵使用
              </th>
              <?php endif ;?>
            </tr>
            <empty name="listData">
              <tr class="num2">
                <td colspan="15" style="text-align: center;height: 45vh;">
                  <img src="__IMG__/20180207/icon_wushujv2.png"/>
                  <p style="line-height: 40px;color: #A5A5A5;">暂无数据</p>
                </td>
              </tr>
              <else/>
              <tr class="num2">
                <td>合计</td>
                <td>{$allData.role_num}</td>
                <td>{$allData.user_num}</td>
                <td>{$allData.new_user_num}|{$allData.new_device_num}</td>
                <td>{$allData.new_ip_num}</td>
                <td>{$allData.login_user_num}</td>
                <?php if ($canViewUserRecharge) :?>
                <td>{$allData.spend_user_num}</td>
                <td>{$allData.spend_num}</td>
                <td>{$allData.spend_all_amount}</td>
                <td class="spend-element th-hide">{$allData.spend_cash}</td>
                <td class="spend-element th-hide">{$allData.spend_generic}</td>
                <td class="spend-element th-hide">{$allData.spend_binding}</td>
                <td class="spend-element th-hide">{$allData.spend_discount}</td>
                <td class="spend-element th-hide">{$allData.spend_voucher}</td>
                <?php endif ;?>
              </tr>
              <volist name="listData" id="vo">
                <tr class="num2">
                  <td>{$vo.day}</td>
                  <td>{$vo.role_num}</td>
                  <td>{$vo.user_num}</td>
                  <td>{$vo.new_user_num}|{$vo.new_device_num}</td>
                  <td>{$vo.new_ip_num}</td>
                  <td>{$vo.login_user_num}</td>
                  <?php if ($canViewUserRecharge) :?>
                  <td>{$vo.spend_user_num}</td>
                  <td>{$vo.spend_num}</td>
                  <td>{$vo.spend_all_amount}</td>
                  <td class="spend-element th-hide">{$vo.spend_cash}</td>
                  <td class="spend-element th-hide">{$vo.spend_generic}</td>
                  <td class="spend-element th-hide">{$vo.spend_binding}</td>
                  <td class="spend-element th-hide">{$vo.spend_discount}</td>
                  <td class="spend-element th-hide">{$vo.spend_voucher}</td>
                  <?php endif ;?>
                </tr>
              </volist>
            </empty>
          </table>
        </div>
           <div class="pagenation clearfix">
               <?php if ($loginer['level'] !== 4) :?>
              <p  id="sch-btn" data-href="{:U('download/dailysummary_data_export',array_merge(['xlsname'=>'ceshi'],I('get.')))}" class="ajax-get">导出</p>
              <?php endif ;?>
        </div>
        <div style="margin-bottom: 150px;">

        </div>
      </div>
    </div>
  </div>


</block>
<block name="script">
  <link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
  <link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
          charset="UTF-8"></script>
  <script type="text/javascript" src="__JS__/20170831/select2.min.js"></script>
  <script src="__STATIC__/layer/layer.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
  <script type="text/javascript" src="__JS__/common.js"></script>

  <script type="text/javascript">
      var dateData = [];
      var roleNum = [];
      var userNum = [];
      var newUserNum = [];
      var newDeviceNum = [];
      var spendUserNum = [];
      var spendAllAmount = [];
      <?php foreach($summaryData['date'] as $value) {?>
          dateData.push('<?=$value?>');
      <?php }?>
      <?php foreach($summaryData['role_num'] as $value) {?>
          roleNum.push(<?=$value?>);
      <?php }?>
      <?php foreach($summaryData['user_num'] as $value) {?>
          userNum.push(<?=$value?>);
      <?php }?>
      <?php foreach($summaryData['new_user_num'] as $value) {?>
          newUserNum.push(<?=$value?>);
      <?php }?>
      <?php foreach($summaryData['new_device_num'] as $value) {?>
          newDeviceNum.push(<?=$value?>);
      <?php }?>
      <?php foreach($summaryData['spend_user_num'] as $value) {?>
          spendUserNum.push(<?=$value?>);
      <?php }?>
      <?php foreach($summaryData['spend_all_amount'] as $value) {?>
          spendAllAmount.push(<?=$value?>);
      <?php }?>

      setChart(1);

      function setChart(dataType) {
          var data1 = [];
          var data2 = [];
          var dataName1 = '';
          var dataName2 = '';
          var xLabelInterval = 0;
          var sdate = Date.parse($('#sdate').val()) / 1000;
          var edate = Date.parse($('#edate').val()) / 1000;
          var chartBox = echarts.init(document.getElementById('chart_box'));

          if ((edate - sdate) > 1555200) {
              xLabelInterval = 1;
          }

          switch (dataType) {
              case 1:
                  data1 = roleNum;
                  data2 = userNum;
                  dataName1 = '创角数';
                  dataName2 = '创角用户';
                  break;
              case 2:
                  data1 = newUserNum;
                  data2 = newDeviceNum;
                  dataName1 = '新创角用户';
                  dataName2 = '新创角设备';
                  break;
              case 3:
                  <?php if ($canViewUserRecharge) :?>
                  data1 = spendUserNum;
                  data2 = spendAllAmount;
                  dataName1 = '充值人数';
                  dataName2 = '充值总额';
                  <?php endif ;?>
                  break;
          }

          option = {
              title: {
                  text: "",
                  x: 'center',
                  y: 'top',
                  textStyle:
                      {
                          color: '#fff',
                          fontSize: 13
                      }
              },
              tooltip: {
                  trigger: 'axis'
              },
              grid: {
                  left: '3%',
                  right: '8%',
                  bottom: '5%',
                  top: "13%",
                  containLabel: true
              },
              color: ["#b32106", '#143f53'],
              legend: {
                  data: [dataName1, dataName2],
                  show: true,

                  right: '46%',
                  y: "0",
                  textStyle: {
                      color: "#999",
                      fontSize: '13'
                  },
              },
              toolbox: {
                  show: false,
                  feature: {
                      mark: {show: true},
                      dataView: {show: true, readOnly: false},
                      magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                      restore: {show: true},
                      saveAsImage: {show: true}
                  }
              },
              calculable: true,
              xAxis: [
                  {
                      type: 'category',
                      boundaryGap: true,
                      data: dateData,
                      splitLine: {
                          show: false,
                          lineStyle: {
                              color: '#2eb383'
                          }
                      },
                      axisLabel: {
                          textStyle: {
                              color: "#808080"
                          },
                          alignWithLabel: true,
                          interval: xLabelInterval,
                      },
                      axisLine: {
                          lineStyle: {
                              color: '#2eb383',
                          }
                      },
                      axisTick: {
                          alignWithLabel: true
                      }
                  }
              ],
              yAxis: [
                  {
                      type: 'value',
                      splitLine: {
                          show: false,
                          lineStyle: {
                              color: '#2eb383'
                          }
                      },
                      axisLabel: {
                          textStyle: {
                              color: "#808080"
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: '#fff',
                          }
                      },
                      min: 0,
                      minInterval:1,
                  }
              ],
              series: [
                  {
                      name: dataName1,
                      type: 'line',
                      smooth: true,
                      data: data1
                  },
                  {
                      name: dataName2,
                      type: 'line',
                      smooth: true,
                      data: data2
                  }
              ],
          };
          chartBox.setOption(option);
      }

      $().ready(function () {
          setValue('relation_game_id', {$Think.request.relation_game_id |default = '""'});
          setValue('sdk_version', {$Think.request.sdk_version |default = '""'});
          setValue('server_id', {$Think.request.server_id |default = '""'});
          setValue('row', '{:I("get.row",10)}');

          var promoteUrl = "{:U('Query/getSubPromotes')}"
          initPromoteSelect(promoteUrl);

          $('#own').on('click',function () {
              var own = $('#own_id');
              var checkBox = $(this).children('i');

              if (own.is(':checked')) {
                  checkBox.removeClass('iconfangxingxuanzhongfill');
                  checkBox.removeClass('selected-color');
                  checkBox.addClass('iconfangxingweixuanzhong');

                  own.prop('checked', false);
              } else {
                  checkBox.removeClass('iconfangxingweixuanzhong');
                  checkBox.addClass('iconfangxingxuanzhongfill');
                  checkBox.addClass('selected-color');

                  own.prop('checked', true);
              }
          });

          $('.spend-btn').on('click', function () {
              var element = $(this).find('i');

              if (element.hasClass('iconplus-square')) {
                  element.removeClass('iconplus-square');
                  element.addClass('iconminus-square');

                  $('.spend-element').removeClass('th-hide');
              } else {
                  element.removeClass('iconminus-square');
                  element.addClass('iconplus-square');

                  $('.spend-element').addClass('th-hide');
              }
          });

          $("#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();
          });
          var date = "{$setdate}";
          $('#sdate').datetimepicker({
              format: 'yyyy-mm-dd',
              language: "zh-CN",
              minView: 2,
              autoclose: true,
              scrollMonth: false,
              scrollTime: false,
              scrollInput: false,
              endDate: date
          });

          $('#edate').datetimepicker({
              format: 'yyyy-mm-dd',
              language: "zh-CN",
              minView: 2,
              autoclose: true,
              pickerPosition: 'bottom-left',
              scrollMonth: false,
              scrollTime: false,
              scrollInput: false,
              endDate: date
          });

          $('.btn-role').on('click', function () {
              var thisElement = $(this);

              if (!thisElement.hasClass('highlight')) {
                  var dataType = thisElement.attr('data-type');

                  $('.btn-role').removeClass('highlight');
                  thisElement.addClass('highlight');

                  setChart(parseInt(dataType));
              }
          });

          $('#submit').click(function () {
              var sdate = Date.parse($('#sdate').val()) / 1000;
              var edate = Date.parse($('#edate').val()) / 1000;

              if (sdate > edate) {
                  layer.msg('开始时间必须小于等于结束时间');
                  return false;
              }

              if ((edate - sdate) > 2592000) {
                  layer.msg('时间间隔不能超过31天，请重新选择日期');
                  return false;
              }

              var url = $(this).attr('url');
              console.log(url);
              var query = $('.jssearch').find('input').serialize();
              query += "&" + $('.jssearch').find('select').serialize();
              query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g, '');
              query = query.replace(/^&/g, '');
              if (url.indexOf('?') > 0) {
                  url += '&' + query;
              } else {
                  url += '?' + query;
              }
              window.location.href = url;

          });

          $('#relation_game_id').change(function () {
              var relationGameId = $(this).val();
              var sdkVersion = $('#sdk_version').val();

              getServerList(relationGameId, sdkVersion);
          });

          $('#sdk_version').change(function () {
              var sdkVersion = $(this).val();
              var relationGameId = $('#relation_game_id').val();

              if (relationGameId > 0) {
                  getServerList(relationGameId, sdkVersion);
              }
          });

          function getServerList(relationGameId, sdkVersion) {
              $.ajax({
                  url: "{:U('getServerAjax')}",
                  type: "post",
                  data: {relation_game_id: relationGameId, sdk_version: sdkVersion},
                  dataType: 'json',
                  success: function (data) {
                      var html = "<option value='' selected>请选择区服</option>";

                      if (data.status == 1) {
                          var serverData = data.data;

                          if (serverData.length > 0) {
                              for (var i in serverData) {
                                  html += "<option value='" + serverData[i]['server_id'] + "'>" + serverData[i]['server_name'] + "</option>";
                              }
                          }
                      }

                      $("#server_id").empty();
                      $('#server_id').html(html);
                      $("#server_id").select2();
                  }
              })
          }

          $(".select_gallery").select2();
      });
  </script>

</block>