<template>
    <section class="content">
        <div class="box box-danger">
            <div class="box-body">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <!-- .content -->
                <section class="content">
                    <div id="table"></div>
                    <div id="toolbar">
                        <div class="col-sm-12">
                            <label for="gameId" class="col-sm-1 control-label">游戏:</label>
                            <div class="col-sm-2">
                                <select id="gameId" class="input-sm form-control"></select>
                            </div>
                            <label for="startTime" class="col-sm-1 control-label">日期:</label>
                            <div class="col-sm-2">
                                <input type="text" name="startTime" id="startTime" class="input-sm form-control" placeholder="开始日期">
                            </div>
                            <label for="startTime" class="col-sm-1 control-label">-</label>
                            <div class="col-sm-2">
                                <input type="text" name="endTime" id="endTime" class="input-sm form-control" placeholder="结束日期">
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <button id="btnSearch" class="btn btn-default">
                                <i class="glyphicon glyphicon-search"></i>查询
                            </button>
                            <button id="btnExportAll" class="btn btn-sm btn-primary">
                                导出
                            </button>
                        </div>
                    </div>
                </section><!-- .content -->
            </div>
        </div>
    </section>

    <div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width: 190%; left: 50%; transform: translateX(-50%);">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modalLabel"></h4>
                </div>
                <input type="hidden" name="dateTime" id="detailTime" />
                <div class="modal-body">
                    <!-- .content -->
                    <div id="detailTable"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="btnExport">导出</button>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { miniGameForBaiShunPage, miniGameForBaiShunDetailPage, miniGameForBaiShunExport, miniGameForBaiShunExportAll } from '@/api/miniGame/miniGameForBaiShun';
import { getConfigValueByKey } from '@/api/system/sysconf';
import { buildSelectOption } from '@/utils/system-helper';

export default {
    name: 'MiniGameForBaiShunView',
    data() {
        return {
            columns: [
                { field: 'dateTime', title: '日期', align: 'center', width: '15%' },
                { field: 'userCount', title: '人数', align: 'center', width: '15%' },
                { field: 'consumeNum', title: '货币消耗', align: 'center', width: '15%' },
                { field: 'settleNum', title: '结算总量', align: 'center', width: '15%' },
                { 
                    field: 'platformNum', 
                    title: '平台收入', 
                    align: 'center', 
                    width: '15%',
                    formatter: function (val, row, index) {
                        return row.consumeNum - row.settleNum;
                    }
                },
                {
                    field: 'dateTime',
                    title: '操作',
                    align: 'center',
                    width: '15%',
                    valign: 'middle',
                    formatter: function (val, row, index) {
                        return '<button class="btn btn-sm btn-default opt-detail" data-index="' + index + '">详情</button>';
                    }
                }
            ],
            detailColumns: [
                { field: 'erbanNo', title: '用户平台ID', align: 'center', width: '15%' },
                { field: 'nick', title: '昵称', align: 'center', width: '15%' },
                { field: 'consumeNum', title: '货币消耗', align: 'center', width: '15%' },
                { field: 'settleNum', title: '结算总量', align: 'center', width: '15%' },
                { 
                    field: 'platformNum', 
                    title: '平台收入', 
                    align: 'center', 
                    width: '15%',
                    formatter: function (val, row, index) {
                        return row.consumeNum - row.settleNum;
                    }
                },
            ],
        };
    },
    created() {
        this.initGame();
        this.init();
    },
    methods: {
        init() {
            this.$nextTick(function () {
                let $this = this;
                var picker1 = $("#startTime").datetimepicker({
                    format: 'yyyy-mm-dd 00:00:00',
                    todayBtn: true,
                    autoclose: true,
                });
                var picker2 = $("#endTime").datetimepicker({
                    format: 'yyyy-mm-dd 00:00:00',
                    todayBtn: true,
                    autoclose: true
                });
                picker1.on('changeDate', function () {
                    var date = $('#startTime').datetimepicker('getDate');
                    picker2.datetimepicker('setStartDate', date);
                });
                picker2.on('changeDate', function () {
                    var date = $('#endTime').datetimepicker('getDate');
                    picker1.datetimepicker('setEndDate', date);
                });
                $this.initTable();
                $('#table').on('click', '.opt-detail', function () {
                    $this.detail(this);
                });
                $('#btnSearch').click(function () {
                    $this.search();
                });
                $('#btnExport').click(function () {
                    $this.export();
                });
                $('#btnExportAll').click(function () {
                    $this.exportForAll();
                });
            });
        },
        initTable() {
            let $this = this;
            TableHelper.destroy('#table');
            $('#table').bootstrapTable({
                columns: $this.columns,
                cache: false,
                striped: true,
                showRefresh: false,
                pageSize: 10,
                pagination: true,
                pageList: [1, 10, 20, 30, 50],
                search: false,
                sidePagination: 'server',
                queryParamsType: 'undefined',
                queryParams: function queryParams(params) {
                    var param = {
                        gameId: $('#gameId').val(),
                        startTime: $('#startTime').val(), 
                        endTime: $('#endTime').val(), 
                        pageNum: params.pageNumber,
                        pageSize: params.pageSize,
                    };
                    return param;
                },
                ajax: function(request) {
                    miniGameForBaiShunPage(request.data).then(res => {
                        let data = res.data;
                        request.success({
                            'rows': data.records,
                            'total': data.total
                        });
                    });
                },
                toolbar: '#toolbar',
            });
        },
        search() {
            TableHelper.doRefresh('#table');
        },
        detail(obj) {
            const currentData = $('#table').bootstrapTable('getData')[$(obj).data('index')];
            let dateTime = currentData.dateTime;
            $('#modalLabel').html('日期:' + dateTime);
            $('#detailTime').val(dateTime);
            TableHelper.destroy('#detailTable');
            $('#detailTable').bootstrapTable({
                columns: this.detailColumns,
                cache: false,
                striped: true,
                showRefresh: false,
                pageSize: 10,
                pagination: true,
                pageList: [1, 10, 20, 30, 50],
                search: false,
                sidePagination: 'server',
                queryParamsType: 'undefined',
                queryParams: function queryParams(params) {
                    var param = {
                        gameId: $('#gameId').val(),
                        dateTime: $('#detailTime').val(), 
                        pageNum: params.pageNumber,
                        pageSize: params.pageSize,
                    };
                    return param;
                },
                ajax: function(request) {
                    miniGameForBaiShunDetailPage(request.data).then(res => {
                        let data = res.data;
                        request.success({
                            'rows': data.records,
                            'total': data.total
                        });
                    });
                },
            });
            $("#detailModal").modal('show');
        },
        export() {
            miniGameForBaiShunExport({
                dateTime: $('#detailTime').val(),
            });
        },
        initGame() {
            getConfigValueByKey({
                configId: 'BAISHUN_GAME'
            }).then(res => {
                if (res.data) {
                    let data = JSON.parse(res.data.configValue);
                    buildSelectOption(
                        "#gameId",
                        data[0],
                        data.map((v) => {
                        return {
                            value: v.gameId,
                            text: v.gameName,
                        };
                        })
                    );
                }
            });
        },
        exportForAll() {
            miniGameForBaiShunExportAll({
                gameId: $('#gameId').val(),
                startTime: $('#startTime').val(), 
                endTime: $('#endTime').val(), 
            });
        },
    },
}
</script>
  
<style scoped></style>