<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <div id="toolbar">
                    <div class="col-sm-12">
                        <button id="addBtn" class="btn btn-default">
                            <i class="glyphicon glyphicon-plus"></i>添加
                        </button>
                    </div>
                </div>
            </div>

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

        </div>
    </section>

    <div class="modal fade" id="addGroupModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <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>
                <div class="modal-body">
                    <form class="form-horizontal" id="addForm">
                        <input type="hidden" name="id" id="id" />
                        <div class="form-group">
                            <label for="modal_matchGroupName" class="col-sm-3 control-label">名称<font color="red">*</font>
                                :</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control validate[required]" name="matchGroupName"
                                    id="modal_matchGroupName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="matchGroupType" class="col-sm-3 control-label">游戏分类:</label>
                            <div class="col-sm-9">
                                <select id="matchGroupType" name="matchGroupType" class="input-sm">
                                    <option value="1">和平精英</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="module_seqNo" class="col-sm-3 control-label">排序<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <input type="text" class="input-sm form-control datetime validate[required]" name="seqNo"
                                    id="module_seqNo" placeholder="请输入正整数，数字小在前面">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">入口图片<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <img src="" id="picImage" style="width:250px;height:90px;" alt="">
                                <input type="file" id="picUploadFile" name="file">
                                <button class="btn btn-success" type="button" id="picUploadBtn">上传</button>
                                <input type="hidden" id="matchGroupUrl" name="matchGroupUrl"
                                    class="form-control validate[required]" />
                                <span id="picImgInfo" style="color:red;"></span>
                            </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" id="add">确定</button>
                </div>

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

    <div class="modal fade" id="updateGroupModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <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="updateModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="updateForm">
                        <input type="hidden" name="matchGroupId" id="e_id" />
                        <div class="form-group">
                            <label for="modal_matchGroupName" class="col-sm-3 control-label">名称<font color="red">*</font>
                                :</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control validate[required]" name="matchGroupName"
                                    id="e_modal_matchGroupName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="matchGroupType" class="col-sm-3 control-label">游戏分类:</label>
                            <div class="col-sm-9">
                                <select id="e_matchGroupType" name="matchGroupType" class="input-sm">
                                    <option value="1">和平精英</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="module_seqNo" class="col-sm-3 control-label">排序<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <input type="text" class="input-sm form-control datetime validate[required]" name="seqNo"
                                    id="e_module_seqNo" placeholder="请输入正整数，数字小在前面">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">入口图片<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <img src="" id="e_picImage" style="width:250px;height:90px;" alt="">
                                <input type="file" id="e_picUploadFile" name="file">
                                <button class="btn btn-success" type="button" id="e_picUploadBtn">上传</button>
                                <input type="hidden" id="e_matchGroupUrl" name="matchGroupUrl"
                                    class="form-control validate[required]" />
                                <span id="e_picImgInfo" style="color:red;"></span>
                            </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" id="updateGroup">确定</button>
                </div>

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

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

export default {
    name: "GameManageGroupAdminView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'matchGroupId', title: '集合id', align: 'center', width: '5%' },
                        { field: 'matchGroupName', title: '名称', align: 'center', width: '5%' },
                        {
                            field: 'matchGroupType', title: '游戏分类', align: 'center', width: '5%',
                            formatter: function (val) {
                                if (val == 1) {
                                    return '和平精英'
                                }
                            }
                        },
                        { field: 'seqNo', title: '排序', align: 'center', width: '5%' },
                        {
                            field: 'matchGroupUrl', title: '图片', align: 'center', width: '5%',
                            formatter: function (val) {
                                return "<img src='" + val + "' width='40' height='40'>";
                            }
                        },
                        {
                            field: 'clanId',
                            title: '操作',
                            align: 'center',
                            width: '10%',
                            formatter: function (val, row, index) {
                                const matchGroupId = row.matchGroupId;
                                return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" matchGroupId=' + matchGroupId + '>' +
                                    '<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
                                    '<button class="btn btn-sm btn-danger opt-remove" matchGroupId=' + matchGroupId +
                                    '><i class="glyphicon glyphicon-remove"></i>删除</button>';
                            }
                        }
                    ],
                    undefinedText: 0,
                    cache: false,
                    striped: true,
                    showRefresh: false,
                    pageSize: 20,
                    pagination: true,
                    pageList: [20, 50, 100, 200, 300, 500],
                    search: false,
                    sidePagination: "server", //表示服务端请求
                    queryParamsType: "undefined",
                    queryParams: function queryParams(params) {   //设置查询参数
                        var param = {
                            page: params.pageNumber,
                            pageSize: params.pageSize,
                        };
                        return param;
                    },
                    toolbar: '#toolbar',
                    uniqueId: 'matchGroupId',
                    url: '/admin/gameManage/listGroupByPage.action',
                    onLoadSuccess: function () {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                });

                // 查询刷新
                $('#btnSearch').on('click', function () {
                    TableHelper.doRefresh('#table');
                });


                //新建标签
                $("#addBtn").click(function () {
                    $("#modal_matchGroupName").val(""),
                        $("#matchGroupType").val(""),
                        $("#module_seqNo").val(""),
                        $("#matchGroupUrl").val(""),
                        $('#picImage').attr("src", '');
                    $("#picImgInfo").html('');
                    $("#picUploadFile").val('');
                    $("#addGroupModal").modal('show');
                });


                //编辑
                $('#table').on('click', '.opt-edit', function () {
                    const matchGroupId = $(this).attr('matchGroupId');
                    console.log("param======", matchGroupId)
                    var data = $('#table').bootstrapTable('getRowByUniqueId', matchGroupId);
                    console.log("data======", data)
                    $("#e_id").val(matchGroupId);
                    $("#e_modal_matchGroupName").val(data.matchGroupName);
                    $("#e_matchGroupType").val(data.matchGroupType);
                    $("#e_module_seqNo").val(data.seqNo);
                    // 设置图片
                    $("#e_picUploadFile").val('');
                    $('#e_matchGroupUrl').val(data.matchGroupUrl);
                    $('#e_picImage').attr("src", data.matchGroupUrl);
                    if (data.matchGroupUrl != '') {
                        $("#e_picImgInfo").html('已上传');
                    } else {
                        $("#e_picImgInfo").html('未上传');
                    }
                    $("#updateGroupModal").modal('show');
                });

                // 删除
                $('#table').on('click', '.opt-remove', function () {
                    if (confirm("确定删除?")) {
                        const matchGroupId = $(this).attr('matchGroupId');
                        console.log("param======", matchGroupId)
                        $.ajax({
                            type: 'get',
                            url: '/admin/gameManage/del',
                            data: {
                                matchGroupId: matchGroupId
                            },
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 200) {
                                    $("#tipMsg").text("删除成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("删除失败." + res.msg);
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }
                });


                // 编辑
                $("#updateGroup").click(function () {
                    console.log("updateId", $("#updateId").val());
                    $.ajax({
                        type: "get",
                        url: "/admin/gameManage/saveOrUpdateGroup.action",
                        data: $("#updateForm").serialize(),
                        dataType: "json",
                        success: function (json) {
                            if (json.success) {
                                $("#tipMsg").text("保存成功");
                                $("#tipModal").modal('show');
                                TableHelper.doRefresh("#table");
                                $("#roomTagEditModal").modal('hide');
                            } else {
                                $("#tipMsg").text("保存失败." + json.message);
                                $("#tipModal").modal('show');
                            }
                        }
                    });
                });

                // 新增
                $("#add").click(function () {
                    $.ajax({
                        type: "get",
                        url: "/admin/gameManage/saveOrUpdateGroup.action",
                        data: $("#addForm").serialize(),
                        dataType: "json",
                        success: function (json) {
                            if (json.success) {
                                $("#tipMsg").text("保存成功");
                                $("#tipModal").modal('show');
                                TableHelper.doRefresh("#table");
                            } else {
                                $("#tipMsg").text("保存失败." + json.message);
                                $("#tipModal").modal('show');
                            }
                        }
                    });
                });


                $('#picUploadBtn').on('click', function () {
                    $.ajaxFileUpload({
                        fileElementId: 'picUploadFile',    //需要上传的文件域的ID，即<input type="file">的ID。
                        url: '/admin/luckySea/upload', //后台方法的路径
                        type: 'post',   //当要提交自定义参数时，这个参数要设置成post
                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                        secureuri: false,   //是否启用安全提交，默认为false。
                        async: true,   //是否是异步
                        success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                            if (json.path) {
                                $('#matchGroupUrl').val(json.path);
                                $('#picImage').attr("src", json.path);
                                if (json.path != '') {
                                    $("#picImgInfo").html('已上传成功');
                                } else {
                                    $("#picImgInfo").html('未上传成功');
                                }
                                console.log(json.path);

                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                            }
                        },
                        error: function (data, status, e) {  //提交失败自动执行的处理函数。
                            console.error(e);
                        }
                    });
                })

                $('#e_picUploadBtn').on('click', function () {
                    $.ajaxFileUpload({
                        fileElementId: 'e_picUploadFile',    //需要上传的文件域的ID，即<input type="file">的ID。
                        url: '/admin/luckySea/upload', //后台方法的路径
                        type: 'post',   //当要提交自定义参数时，这个参数要设置成post
                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                        secureuri: false,   //是否启用安全提交，默认为false。
                        async: true,   //是否是异步
                        success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                            if (json.path) {
                                $('#e_matchGroupUrl').val(json.path);
                                $('#e_picImage').attr("src", json.path);
                                if (json.path != '') {
                                    $("#e_picImgInfo").html('已上传成功');
                                } else {
                                    $("#e_picImgInfo").html('未上传成功');
                                }
                                console.log(json.path);

                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                            }
                        },
                        error: function (data, status, e) {  //提交失败自动执行的处理函数。
                            console.error(e);
                        }
                    });
                })


            });

        }
    },

};
</script>

<style scoped></style>