<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <div id="toolbar">
                    <div class="col-sm-12">
                        <button class="active btn btn-default js-quick-search js-quick-search-1"
                            data-firstChargeLevelId="1">
                            第一档
                        </button>
                        <button class="btn btn-default js-quick-search js-quick-search-7" data-firstChargeLevelId="2">
                            第二档
                        </button>
                        <button class="btn btn-default js-quick-search js-quick-search-30" data-firstChargeLevelId="3">
                            第三档
                        </button>
                        <button class="btn btn-primary" id="updateLevelInfo">
                            编辑档位信息
                        </button>
                    </div>
                    <div class="summary col-sm-12">
                        <div class="col-sm-4">
                            充值数额：<span class="chargeMoney"></span>
                        </div>
                        <div class="col-sm-4">
                            赠礼价格：<span class="giveShowPrice"></span>
                        </div>
                        <div class="col-sm-4">
                            <span>当前档位开关：</span>
                            <span class="firstChargeSwitchStatus"></span>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <!--                    <button class="btn btn-default" id="search">-->
                        <!--                        <i class="glyphicon glyphicon-wrench"></i>查询-->
                        <!--                    </button>-->
                        <button class="btn btn-primary" id="add">
                            <i class="glyphicon glyphicon-plus"></i>新增礼包奖励
                        </button>
                    </div>
                </div>
            </div>

            <!-- .content -->
            <div id="table"></div>
        </div>
    </section>

    <!-- 弹窗 -->
    <div class="modal fade" id="worldTypeModal" rabindex='-1' role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>

                    <div class="modal-title" id="worldTypeModalLabel"></div>
                </div>

                <div class="modal-body">
                    <form action="" id="addForm" class="form-horizontal">
                        <div class="form-group">
                            <label for="modal_rewardType" class="col-sm-3 control-label">赠礼类型：</label>
                            <div class="col-sm-8">
                                <select id="modal_rewardType" name="rewardType" class="form-control validate[required]">
                                    <option value="">请选择...</option>
                                    <option value="1">礼物</option>
                                    <option value="2">铭牌</option>
                                    <option value="3">座驾</option>
                                    <option value="4">头饰</option>
                                    <option value="5">额外金币</option>
                                </select>
                            </div>
                        </div>

                        <input type="hidden" id="modal_id" name="id" />
                        <div class="form-group">
                            <label for="modal_rewardId" class="col-sm-3 control-label">奖励id</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required,maxSize[10]]" name="rewardId"
                                    id="modal_rewardId" placeholder="请奖励对应id">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modal_rewardDay" class="col-sm-3 control-label">奖励天数：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required,custom[integer]]" name="rewardDay"
                                    id="modal_rewardDay" placeholder="头饰、铭牌、座驾输入天数">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modal_rewardNum" class="col-sm-3 control-label">奖励个数：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required,custom[integer]]" name="rewardNum"
                                    id="modal_rewardNum" placeholder="礼物、额外金币输入个数">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modal_showText" class="col-sm-3 control-label">显示文本：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required,maxSize[10]]" name="showText"
                                    id="modal_showText" placeholder="请输入奖励客户端显示文本">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modal_seqNo" class="col-sm-3 control-label">排序：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required,custom[integer]]" name="seqNo"
                                    id="modal_seqNo" placeholder="请输入排序编号，越小越排前">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">显示图片：</label>
                            <div class="col-sm-8">
                                <img src="" alt="" id="modal_showPir" style="width: 50px; height: 50px;">
                                <input type="file" id="uploadTagPic" accept="image/*">
                                <button class="btn btn-success" type="button" id="uploadTagPicBtn">上传</button>
                                <div class="tips">
                                    <i class="glyphicon glyphicon-info-sign"></i>
                                    <font color="red">请上传图片文件</font>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-primary="addSave" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 档位弹窗 -->
    <div class="modal fade" id="firstChargeLevelModal" rabindex='-1' role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>

                    <div class="modal-title" id="firstChargeLevelModalLabel"></div>
                </div>

                <div class="modal-body">
                    <form action="" id="addLevelSave" class="form-horizontal">

                        <div class="form-group">
                            <label for="modal_infoId" class="col-sm-3 control-label">充值数额：</label>
                            <div class="col-sm-8">
                                <select id="modal_infoId" name="infoId" class="form-control validate[required]">
                                    <option value="">请选择...</option>
                                    <option value="1">0.99美元</option>
                                    <option value="2">4.99美元</option>
                                    <option value="3">13.99美元</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modal_showPrice" class="col-sm-3 control-label">赠礼展示价格：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required,custom[integer]]" name="showPrice"
                                    id="modal_showPrice" placeholder="清输入赠礼展示价格">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modal_switchStatus" class="col-sm-3 control-label">档位开关：</label>
                            <div class="col-sm-8">
                                <select id="modal_switchStatus" name="switchStatus" class="form-control validate[required]">
                                    <option value="0">关闭</option>
                                    <option value="1">开启</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-primary="addSave" id="levelSave">保存</button>
                </div>
            </div>
        </div>
    </div>
</template>

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

// 按钮参数
var activeButVal = 1;
export default {
    name: "FirstChargeRewardConfigView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {

            $(function () {
                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'id', title: 'ID', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'showText', title: '显示文本', align: 'left', valign: 'middle', width: '10%' },
                        {
                            field: 'showPir', title: '显示图片', align: 'left', valign: 'middle', width: '10%',
                            formatter: function (val, row, index) {
                                if (null != val && val != '') {
                                    return '<img src="' + val + '" alt="" style="width: 30px; height: 30px;">';
                                }
                                return '-';
                            }
                        },
                        { field: 'type', title: '类型', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'rewardId', title: '奖励ID', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'rewardName', title: '奖励名称', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'giftPrice', title: '礼物价格（钻）', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'rewardNum', title: '数量', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'rewardDay', title: '可用天数', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'seqNo', title: '排序', align: 'center', valign: 'middle', width: '10%' },
                        {
                            field: 'tmp', title: '操作', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
                                return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + row.id + '>' +
                                    '<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
                                    '&nbsp;&nbsp;<button class="btn btn-sm btn-danger opt-remove" data-id=' + row.id +
                                    '><i class="glyphicon glyphicon-remove"></i>删除</button>';
                            }
                        }
                    ],
                    cache: false,
                    striped: true,
                    showRefresh: false,
                    pageSize: 10,
                    pagination: true,
                    pageList: [10, 20, 30, 50],
                    sidePagination: 'server',
                    queryParamsType: 'undefined',
                    queryParams: function queryParams(params) {
                        console.log(params)
                        console.log(activeButVal)
                        var param = {
                            // firstChargeLevelId: $("button").data('firstChargeLevelId'),
                            firstChargeLevelId: activeButVal,
                        };
                        return param;
                    },
                    uniqueId: 'id',
                    toolbar: '#toolbar',
                    url: '/admin/first/charge/reward/list',
                    onLoadSuccess: function (res) {
                        console.log(res)
                        $('.giveShowPrice').text(res.giveShowPrice);
                        $('.chargeMoney').text(res.chargeMoney);
                        $('.firstChargeSwitchStatus').text(res.firstChargeSwitchStatus);
                        console.log(res.chargeMoney)
                        console.log('load success');
                    },
                    onLoadError: function () {
                        console.log('load fail');
                    }
                });
                //三个按钮时间
                $('.js-quick-search').click(function () {
                    $(this).addClass("active").siblings().removeClass('active');
                    activeButVal = $(this).attr("data-firstChargeLevelId");
                    console.log(activeButVal);
                    TableHelper.doRefresh('#table');
                })
                $('#btnSearch').on('click', function () {
                    TableHelper.doRefresh('#table');
                })

                // 礼包奖励编辑按钮点击事件
                $('#table').on('click', '.opt-edit', function () {
                    clearModal();
                    var id = $(this).data('id');
                    $.ajax({
                        type: "get",
                        url: "/admin/first/charge/reward/getId",
                        data: { id: id },
                        dataType: "json",
                        success: function (json) {
                            var data = json.rows[0];
                            console.log("编辑时候的++++++++++++" + activeButVal)
                            $('#modal_firstChargeLevelId').val(activeButVal);
                            $('#modal_id').val(data.id);
                            $('#modal_rewardId').val(data.rewardId);
                            $('#modal_rewardType').val(data.rewardType);
                            $('#modal_rewardDay').val(data.rewardDay);
                            $('#modal_rewardNum').val(data.rewardNum);
                            $('#modal_showText').val(data.showText);
                            $('#modal_seqNo').val(data.seqNo);
                            $('#modal_showPir').attr('src', data.showPir);
                        }
                    });
                    $('#worldTypeModalLabel').text('编辑分类');
                    $('#worldTypeModal').modal('show');
                });

                $("#table").on("click", '.opt-remove', function () {
                    var id = $(this).attr("data-id");
                    if (id == 'undefined') {
                        $("#tipMsg").text("id参数有误");
                        $("#tipModal").modal('show');
                        return;
                    }
                    if (confirm("你确认删除该记录吗? \r\n 删除后再也不能找回，请谨慎操作！")) {
                        $.ajax({
                            type: 'post',
                            url: "/admin/first/charge/reward/delete",
                            data: { id: id },
                            dataType: "json",
                            success: function (json) {
                                if (json.success == "true") {
                                    $("#tipMsg").text("删除成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text(json.msg);
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }
                });

                // 添加事件
                $('#add').on('click', function () {
                    clearModal();
                    $('#worldTypeModalLabel').text('新增分类');
                    $('#worldTypeModal').modal('show');
                });

                // 编辑档位事件
                $('#updateLevelInfo').on('click', function () {
                    $.ajax({
                        type: 'get',
                        url: '/admin/first/charge/reward/getLevelInfo',
                        data: { firstChargeLevelId: activeButVal },
                        dataType: 'json',
                        success: function (res) {
                            var data = res.rows[0];
                            $('#modal_firstChargeLevelId').val(activeButVal);
                            $('#modal_switchStatus').val(data.firstChargeStatus);
                            $('#modal_infoId').val(data.firstChargeInfoId);
                            $('#modal_showPrice').val(data.giveShowPrice);
                        }
                    })
                    $('#firstChargeLevelModalLabel').text('编辑档位');
                    $('#firstChargeLevelModal').modal('show');
                });

                // 保存编辑档位信息
                $('#levelSave').on('click', function () {
                    if ($('#addLevelSave').validationEngine('validate')) {
                        var param = {};
                        param.infoId = $('#modal_infoId').val();
                        param.firstChargeLevelId = activeButVal;
                        param.showPrice = $('#modal_showPrice').val();
                        param.switchStatus = $('#modal_switchStatus').val();
                        $.ajax({
                            type: 'post',
                            url: '/admin/first/charge/reward/updateLevelInfo',
                            data: param,
                            dataType: 'json',
                            success: function (res) {
                                if (res.success == "true") {
                                    $('#worldTypeModal').modal('hide');
                                    $('#tipMsg').text('保存成功');
                                    $('#tipModal').modal('show');
                                    TableHelper.doRefresh('#table')
                                } else {
                                    $('#tipMsg').text('保存失败，错误码：' + res.msg);
                                    $('#tipModal').modal('show');
                                }
                            }
                        })
                    }
                });


                // 保存
                $('#save').on('click', function () {
                    if ($('#addForm').validationEngine('validate')) {
                        var param = {};
                        param.id = $('#modal_id').val();
                        //客户端标签
                        var showPir = $('#modal_showPir').attr('src');
                        if (null == showPir || showPir.trim() == '') {
                            $('#tipMsg').text('失败，标签未上传，请上传标签！');
                            $('#tipModal').modal('show');
                            return;
                        }
                        param.firstChargeLevelId = activeButVal;
                        param.showPir = showPir;
                        param.rewardId = $('#modal_rewardId').val();
                        param.rewardDay = $('#modal_rewardDay').val();
                        param.rewardNum = $('#modal_rewardNum').val();
                        param.showText = $('#modal_showText').val();
                        param.seqNo = $('#modal_seqNo').val();
                        param.rewardType = $('#modal_rewardType').val();
                        $.ajax({
                            type: 'post',
                            url: '/admin/first/charge/reward/saveOrUpdate',
                            data: param,
                            dataType: 'json',
                            success: function (res) {
                                if (res.success == "true") {
                                    $('#worldTypeModal').modal('hide');
                                    $('#tipMsg').text('保存成功');
                                    $('#tipModal').modal('show');
                                    TableHelper.doRefresh('#table')
                                } else {
                                    $('#tipMsg').text('保存失败，错误码：' + res.msg);
                                    $('#tipModal').modal('show');
                                }
                            }
                        })
                    }
                });

                $("#search").on('click', function () {
                    TableHelper.doRefresh('#table');
                });

                var chargeStart = $('#createTimeStart').datetimepicker({
                    format: 'yyyy-mm-dd hh:ii:00',
                    autoclose: true
                });

                var chargeEnd = $('#createTimeEnd').datetimepicker({
                    format: 'yyyy-mm-dd hh:ii:00',
                    autoclose: true
                });

                function clearModal() {
                    $('#addForm')[0].reset();
                    $('#addForm').validationEngine('hideAll');
                    $('#modal_id').val('');
                    $('#modal_showPir').attr('src', '');
                }

                // 上传标签
                $('#uploadTagPicBtn').on('click', function () {
                    if ($('#uploadTagPic').val() == '') {
                        $('#tipMsg').text('上传图片为空');
                        $('#tipModal').modal('show');
                        return;
                    }
                    var options = {
                        type: 'post',
                        url: '/admin/upload/img',
                        dataType: 'json',
                        success: function (res) {
                            if (res.path) {
                                $('#modal_showPir').attr('src', res.path);
                            } else {
                                $('#tipMsg').text(res.msg);
                                $('#tipModal').modal('show');
                            }
                        }
                    }
                    $('#uploadTagPic').attr('name', 'uploadFile');
                    $('#uploadPict').attr('name', '');
                    $('#addForm').ajaxSubmit(options);
                });

            });
        }
    },

};
</script>

<style scoped></style>