<template>
  <section class="content">
    <div class="box box-primary">
      <section class="content-header">
        <h1 id="itemTitle"></h1>
      </section>

      <section class="content">

        <div id="toolbar">
          <form action=""
                id="searchForm"
                method="POST">
            <div class="col-sm-12">
              <label for="partitionId"
                     class="qry_col control-label">分区：</label>
              <div class="col-sm-2">
                <select id="partitionId"
                        class="input-sm"></select>
              </div>
              <div class="col-sm-4">
                <label for="timeBegin"
                       class="qry_col control-label">日期：</label>
                <input type="text"
                       name="timeBegin"
                       id="timeBegin"
                       class="input-sm"
                       placeholder="起始时间">
                - <input type="text"
                       name="timeEnd"
                       id="timeEnd"
                       class="input-sm"
                       placeholder="结束时间">
              </div>
              <label for="erbanNo"
                     class="qry_col control-label">平台号：</label>
              <div class="col-sm-2">
                <input type="text"
                       name="erbanNo"
                       id="erbanNo"
                       class="input-sm"
                       placeholder="">
              </div>
            </div>
            <div class="col-sm-12">
              <label for="boxType"
                     class="qry_col control-label">许愿池类型:</label>
              <div class="col-sm-2">
                <select name="boxType"
                        id="boxType"
                        class="col-sm-2 form-control"
                        data-btn-class="btn-warning">
                  <option value=""
                          selected="selected">全部</option>
                  <option value="1">幸运许愿池</option>
                  <option value="2">梦幻许愿池</option>
                </select>
              </div>
              <label for="poolType"
                     class="qry_col control-label">奖池类型:</label>
              <div class="col-sm-2">
                <select name="poolType"
                        id="poolType"
                        class="col-sm-2 form-control"
                        data-btn-class="btn-warning">
                  <option value=""
                          selected="selected">全部</option>
                  <option value="1">幸运新人奖池</option>
                  <option value="2">幸运普通奖池</option>
                  <option value="3">幸运白名单奖池</option>
                  <option value="4">幸运偏差奖池</option>
                  <option value="12">幸运次数奖池</option>
                  <option value="7">梦幻普通奖池</option>
                  <option value="9">梦幻偏差奖池</option>
                  <option value="10">梦幻新人奖池</option>
                  <option value="11">梦幻白名单奖池</option>
                </select>
              </div>
              <label for="dataType"
                     class="qry_col control-label">数据类型:</label>
              <div class="col-sm-2">
                <select name="dataType"
                        id="dataType"
                        class="col-sm-2 form-control"
                        data-btn-class="btn-warning">
                  <option value="1"
                          selected="selected">普通用户数据</option>
                  <option value="2">被排除用户的数据</option>
                </select>
              </div>
            </div>
          </form>
          <button class="btn btn-primary"
                  id="searchBtn">筛选</button>
          <div class="tips">因数据量庞大，默认不会显示每天的结果，默认只展示平台总收益情况，请先选择时间范围再搜索</div>
          <div class="dataCount">
            <p>
              <span>抽奖记录总数：</span>
              <span id="countNum"></span>
            </p>
            <p>
              <span>用户投入钻石总数：</span>
              <span id="userPay"></span>
            </p>
            <p>
              <span>总平台总价值：</span>
              <span id="platformNum"></span>
            </p>
            <p>
              <span>总实际总价值：</span>
              <span id="actualNum"></span>
            </p>
            <p>
              <span>用户获得礼物中钻石数：</span>
              <span id="giftNum"></span>
            </p>
            <p>
              <span>用户获得非礼物总钻石数：</span>
              <span id="notGiftNum"></span>
            </p>
            <p>
              <span>用户获得实物总数：</span>
              <span id="realGiftNum"></span>
            </p>
          </div>
        </div>

        <div id="table"></div>
      </section>
    </div>
  </section>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';

export default {
  name: "PrizeDataAdminNewView",
  setup () {
    return {};
  },
  created () {
    this.$nextTick(function () {
      this.initData();
    });
  },
  methods: {
    initData () {
      $(function () {
        $.ajax({
          type: 'get',
          url: '/partition/listPartitionInfo',
          dataType: 'json',
          success: function (json) {
            if (json.code == 200) {
              //var deviatePartitionId = $("#deviatePartitionId");
              //deviatePartitionId.empty();

              var partitionId = $("#partitionId");
              partitionId.empty();

              var defaultOption = $('<option></option>').attr('value', '').text("全部");
              partitionId.append(defaultOption);

              // 遍历数据并添加 option
              $.each(json.data, function (index, item) {
                // 创建新的 option 元素
                var option = $('<option></option>')
                  .attr('value', item.id)  // 设置 value 属性
                  .text(item.desc);           // 设置文本内容

                // 追加到 select 元素
                partitionId.append(option.clone());

                //deviatePartitionId.append(option.clone());
              });
            }
          }
        });

        var picker1 = $('#timeBegin').datetimepicker({
          format: 'yyyy-mm-dd',
          todayBtn: true,
          autoclose: true,
          minView: 'month',
          endDate: new Date()
        });

        var picker2 = $('#timeEnd').datetimepicker({
          format: 'yyyy-mm-dd',
          todayBtn: true,
          autoclose: true,
          minView: 'month',
          endDate: new Date()
        });

        var $timeBegin = '', $timeEnd = '';
        var main = {
          init: function () {
            this.eventRegister();
            this.valueChange();
          },

          eventRegister: function () {
            picker1.on('changeDate', function () {
              var date = $('#timeBegin').datetimepicker('getDate');
              picker2.datetimepicker('setStartDate', date);
            });
            picker2.on('changeDate', function () {
              var date = $('#timeEnd').datetimepicker('getDate');
              picker1.datetimepicker('setEndDate', date);
            });

            $('#searchBtn').on('click', function () {
              var $dataCount = $('.dataCount');
              // var $startDate = $('#timeBegin').val().replace(/\//g,'-');
              var $startDate;
              if ($('#timeBegin').val() == "" || $('#timeBegin').val() == 'undefined') {
                $startDate = '';
              } else {
                /*var arr = $('#timeBegin').val().split('/');
                var length = arr.length;
                var $startDate = arr[length-1] +'-' + arr[0] + '-' + arr[length - 2];*/
                $startDate = $('#timeBegin').val();
              }
              var $endDate;
              if ($('#timeEnd').val() == '' || $('#timeEnd').val() == 'undefined') {
                $endDate = $startDate;
              } else {
                /*var arr2 = $('#timeEnd').val().split('/');
                var length2 = arr2.length;
                var $endDate = arr2[length2-1] + '-' + arr2[0]  + '-' + arr2[length2-2];*/
                $endDate = $('#timeEnd').val();
              }

              if ($startDate == '') {
                $timeBegin = '';
                $timeEnd = '';
              } else {
                $timeBegin = $startDate + ' 00:00:00';
                $timeEnd = $endDate + ' 23:59:59';
              }

              $.post('/admin/drawlottery/record/totalNew', {
                erbanNo: $('#erbanNo').val(),
                startDate: $timeBegin,
                endDate: $timeEnd,
                boxType: $('#boxType').val(),
                poolType: $('#poolType').val(),
                dataType: $('#dataType').val(),
                partitionId: $("#partitionId").val(),
              }, function (res) {
                console.log(res);

                if (res.code == 200) {
                  var data = res.data;
                  $dataCount.find('#countNum').html(data.countNum);
                  $dataCount.find('#userPay').html(data.userTotalPay);
                  $dataCount.find('#platformNum').html(data.totalPlatformValue);
                  $dataCount.find('#actualNum').html(data.totalActualValue);
                  $dataCount.find('#giftNum').html(data.totalGiftActualValue);
                  $dataCount.find('#notGiftNum').html(data.totalNotGiftActualValue);
                  $dataCount.find('#realGiftNum').html(data.totalRealGiftActualValue);
                  //                            TableHelper.doRefresh('#table');
                  tableRefresh();
                } else {
                  console.log('数据错误,导致加载失败,' + res.code);
                }
              })
            });

            $('#table').on('click', '#details', function () {
              console.log($(this).data('id'));
            });


          },

          valueChange: function () {
            var $dataCount = $('.dataCount');
            $.post('/admin/drawlottery/record/totalNew', {
              erbanNo: $('#erbanNo').val(),
              startDate: $timeBegin,
              endDate: $timeEnd,
              boxType: $('#boxType').val(),
              poolType: $('#poolType').val(),
              dataType: $('#dataType').val()
            }, function (res) {
              console.log(res);

              if (res.code == 200) {
                var data = res.data;
                $dataCount.find('#countNum').html(data.countNum);
                $dataCount.find('#userPay').html(data.userTotalPay);
                $dataCount.find('#platformNum').html(data.totalPlatformValue);
                $dataCount.find('#actualNum').html(data.totalActualValue);
                $dataCount.find('#giftNum').html(data.totalGiftActualValue);
                $dataCount.find('#notGiftNum').html(data.totalNotGiftActualValue);
                $dataCount.find('#realGiftNum').html(data.totalRealGiftActualValue);
                TableHelper.doRefresh('#table');
              } else {
                console.log('数据错误,导致加载失败,' + res.code);
              }
            })
          }
        };
        main.init();

        function tableRefresh () {
          $('#table').bootstrapTable('destroy');
          $('#table').bootstrapTable({
            columns: [
              {
                field: 'createTime', title: '日期', align: 'center', valign: 'middle', width: '20%', formatter: function (val, rows, index) {
                  if (val) {
                    var date = new Date(val);
                    return date.format('yyyy-MM-dd')
                  } else {
                    return '-';
                  }
                }
              },
              { field: 'countNum', title: '抽奖记录数', align: 'center', valign: 'middle', width: '10%' },
              { field: 'userTotalPay', title: '用户投入钻石数', align: 'center', valign: 'middle', width: '10%' },
              { field: 'totalPlatformValue', title: '总平台价值', align: 'center', valign: 'middle', width: '10%' },
              { field: 'totalActualValue', title: '总实际价值', align: 'center', valign: 'middle', width: '10%' },
              { field: 'totalGiftActualValue', title: '用户获得礼物钻石数', align: 'center', valign: 'middle', width: '10%' },
              { field: 'totalNotGiftActualValue', title: '用户获得非礼物钻石数', align: 'center', valign: 'middle', width: '10%' },
              { field: 'totalRealGiftActualValue', title: '用户获得实物', align: 'center', valign: 'middle', width: '10%' },
              // {field: '', title: '操作', align: 'center', valign: 'middle', width: '10%',formatter: function(val,row,index) {
              //     var key = row.createTime;
              //     return '<button class="btn btn-primary btn-sm" id="details" data-id="' + key + '">查看详情</button>';
              // }}
            ],
            cache: false,
            striped: true,
            showRefresh: false,
            pageSize: 10,
            pagination: true,
            pageList: [10, 20, 30, 50],
            sidePagination: 'server',
            queryParamsType: 'undefined',
            queryParams: function queryParams (params) {
              var param = {
                pageSize: params.pageSize,
                pageNumber: params.pageNumber,
                startDate: $timeBegin,
                endDate: $timeEnd,
                boxType: $('#boxType').val(),
                poolType: $('#poolType').val(),
                erbanNo: $('#erbanNo').val(),
                dataType: $('#dataType').val(),
                partitionId: $('#partitionId').val(),
              };
              return param;
            },
            uniqueId: 'id',
            toolbar: '#toolbar',
            url: '/admin/drawlottery/record/listNew',
            onLoadSuccess: function () {
              console.log('load success');
            },
            onLOadError: function () {
              console.log('load fail');
            }
          });
        }


      })
    }
  },

};
</script>

<style scoped>
.dataCount {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}

.dataCount > p {
  padding: 5px;
  border-radius: 5px;
  background: #ccc;
  margin-right: 10px;
}

.tips {
  color: red;
  font-size: 14px;
}

.qry_col {
  float: left;
}
</style>