<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 class="form-horizontal" role="form">
                        <div class="form-group col-sm-4">
                            <label for="timeBegin" class="control-label">开始时间：</label>
                            <input type="text" class="input-sm" id="timeBegin" placeholder="开始时间">
                        </div>

                        <div class="form-group col-sm-4">
                            <label for="timeEnd" class="control-label">结束时间：</label>
                            <input type="text" class="input-sm" id="timeEnd" placeholder="结束时间">
                        </div>

                        <div class="form-group col-sm-4">
                            <label for="erbanNo" class="control-label">用户ID：</label>
                            <input type="text" class="input-sm" name="erbanNo" id="erbanNo" placeholder="">
                        </div>
                    </form>
                    <div class="row"></div>
                    <button class="btn btn-primary" id="searchBtn">查询</button>
                    <div class="row"></div>
                    <div class="dataCount">
                        <p>
                            <span>抽奖用户总数：</span>
                            <span id="peopleNum"></span>
                        </p>
                        <p>
                            <span>抽奖记录总数：</span>
                            <span id="countNum"></span>
                        </p>
                        <p>
                            <span>用户投入钻石总数：</span>
                            <span id="userInputDiamonds"></span>
                        </p>
                        <p>
                            <span>平台产出总价值：</span>
                            <span id="giftOutputDiamonds"></span>
                        </p>
                    </div>
                </div>

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

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

export default {
    name: "PlatformPrizeDataAdminView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                var picker1 = $('#timeBegin').datetimepicker({
                    language: 'zh-CN',
                    format: 'yyyy-mm-dd',
                    todayBtn: true,
                    autoclose: true,
                    minView: 'month',
                    endDate: new Date()
                });

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

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

                    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';
                            }

                            $.get('/admin/findLove/data/platform/total', {
                                erbanNo: $('#erbanNo').val(),
                                startDate: $timeBegin,
                                endDate: $timeEnd,
                            }, function (res) {
                                console.log(res);

                                if (res.code == 200) {
                                    var data = res.data;
                                    console.info(data)
                                    $dataCount.find('#peopleNum').html(data.peopleNum);
                                    $dataCount.find('#countNum').html(data.countNum);
                                    $dataCount.find('#userInputDiamonds').html(data.userInputDiamonds);
                                    $dataCount.find('#giftOutputDiamonds').html(data.giftOutputDiamonds);
                                    main.tableRefresh();
                                } else {
                                    console.log('数据错误,导致加载失败,' + res.code);
                                }
                            })
                        });

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


                    },

                    valueChange: function () {
                        var $dataCount = $('.dataCount');
                        $.get('/admin/findLove/data/platform/total', {
                            erbanNo: $('#erbanNo').val(),
                            startDate: $timeBegin,
                            endDate: $timeEnd,
                        }, function (res) {
                            console.log(res);

                            if (res.code == 200) {
                                var data = res.data;
                                $dataCount.find('#peopleNum').html(data.peopleNum);
                                $dataCount.find('#countNum').html(data.countNum);
                                $dataCount.find('#userInputDiamonds').html(data.userInputDiamonds);
                                $dataCount.find('#giftOutputDiamonds').html(data.giftOutputDiamonds);

                                TableHelper.doRefresh('#table');
                            } else {
                                console.log('数据错误,导致加载失败,' + res.code);
                            }
                        })
                    },

                    tableRefresh: function () {
                        $('#table').bootstrapTable('destroy');
                        $('#table').bootstrapTable({
                            columns: [
                                { field: 'date', title: '日期', align: 'center', valign: 'middle', width: '20%' },
                                { field: 'peopleNum', title: '抽奖人数', align: 'center', valign: 'middle', width: '10%' },
                                { field: 'countNum', title: '抽奖记录数', align: 'center', valign: 'middle', width: '10%' },
                                { field: 'userInputDiamonds', title: '用户投入钻石数', align: 'center', valign: 'middle', width: '10%' },
                                { field: 'giftOutputDiamonds', title: '平台产出价值数', align: 'center', valign: 'middle', width: '10%' }
                            ],
                            cache: false,
                            striped: true,
                            showRefresh: false,
                            pagination: false,
                            sidePagination: "none", //表示服务端请求
                            queryParamsType: 'undefined',
                            queryParams: function queryParams(params) {
                                var param = {
                                    startDate: $timeBegin,
                                    endDate: $timeEnd,
                                    erbanNo: $('#erbanNo').val(),
                                };
                                return param;
                            },
                            uniqueId: 'date',
                            toolbar: '#toolbar',
                            url: '/admin/findLove/data/platform/list',
                            onLoadSuccess: function () {
                                console.log('load success');
                            },
                            onLoadError: function () {
                                console.log('load fail');
                            }
                        });
                    }
                };

                main.init();

            })
        }
    },
};
</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;
}

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