<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <section class="content">
                    <div id="table"></div>
                    <div id="toolbar">
                        封禁类型：<select id="blockTypeSearch" name="blockType" class="input-sm">
                            <option value="0">全部</option>
                            <option value="1">平台号</option>
                            <option value="2">手机号</option>
                            <option value="3">设备号</option>
                            <option value="4">IP地址</option>
                        </select>
                        搜索内容：<input type="text" class="input-sm" name="blockValue" id="blockValueSearch"
                            placeholder="平台号、手机号、设备号、IP地址">

                        <button id="btnSearch" class="btn btn-default">
                            <i class="glyphicon glyphicon-search"></i>搜索
                        </button>
                        <button id="add" class="btn btn-default">
                            <i class="glyphicon glyphicon-plus"></i>增加
                        </button>
                    </div>
                </section>
            </div>
        </div>
    </section>

    <div class="modal fade" id="addAccountBlocked" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
        <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">x</span></button>
                    <h4 class="modal-title" id="addModalLabel">新增封禁账户</h4>
                </div>
                <div class="modal-body">
                    <form id="addBlockForm" class="form-horizontal">
                        <div class="form-group">
                            <label for="blockType" class="col-sm-3 control-label">封禁类型：</label>
                            <div class="col-sm-8">
                                <select name="blockTypeList" id="blockType" class="col-sm-4">
                                    <option value="1">封禁平台号</option>
                                    <option value="2">封禁手机号</option>
                                    <option value="3">封禁设备</option>
                                    <option value="4">封禁ip</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="blockValue" class="col-sm-3 control-label">封禁号码：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="blockValue" id="blockValue"
                                    placeholder='多个号码请用,隔开'>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="blockDesc" class="col-sm-3 control-label">封禁原因：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="blockDesc" id="blockDesc">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="wallStatus" class="col-sm-3 control-label">是否上墙：</label>
                            <div class="col-sm-8">
                                <select name="wallStatus" id="wallStatus" class="col-sm-4">
                                    <option value="1">上墙</option>
                                    <option value="0">不上墙</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="addStartDate" class="col-sm-3 control-label">起始时间：</label>
                            <div class="col-sm-8">
                                <input id="addStartDate" type="text" name="startTime" disabled="disabled"
                                    class="form-control validate[required]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addEndDate" class="col-sm-3 control-label">结束时间：</label>
                            <div class="col-sm-8">
                                <input id="addEndDate" type="text" name="endTime"
                                    class="form-control validate[required]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="remark" class="col-sm-3 control-label">备注：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="remark" id="remark">
                            </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="addSave">封禁</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModel" 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">x</span></button>
                    <h4 class="modal-title" id="modalLabel"> 修改封禁信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="updateBlock">
                        <input type="hidden" name="row" id="rowId" />
                        <div class="form-group">
                            <label for="updateReason" class="col-sm-3 control-label">封禁原因:</label>
                            <div class="col-sm-8">
                                <input type="text" id="updateReason" name="updateReason" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="blockStatus1" class="col-sm-3 control-label">封禁状态:</label>
                            <div class="col-sm-8">
                                <select name="blockStatus1" id="blockStatus1" class="col-sm-4">
                                    <option value="1">封禁中</option>
                                    <option value="2">封禁结束</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="wallStatus1" class="col-sm-3 control-label">是否上墙：</label>
                            <div class="col-sm-8">
                                <select name="wallStatus1" id="wallStatus1" class="col-sm-4">
                                    <option value="1">上墙</option>
                                    <option value="0">不上墙</option>
                                </select>
                            </div>
                        </div>

                        <form class="form-horizontal" id="updateFormTime">
                            <div class="form-group">
                                <label for="startDate" class="col-sm-3 control-label">起始时间:</label>
                                <div class="col-sm-8">
                                    <input type="text" id="startDate" name="startValidTime" disabled="disabled"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="endDate" class="col-sm-3 control-label">结束时间:</label>
                                <div class="col-sm-8">
                                    <input type="text" id="endDate" name="endValidTime" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark1" class="col-sm-3 control-label">备注:</label>
                                <div class="col-sm-8">
                                    <input type="text" id="remark1" name="remark1" class="form-control">
                                </div>
                            </div>
                        </form>
                    </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="saveUpdate">保存</button>
                </div>
            </div>
        </div>
    </div>
</template>

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

export default {
    name: "BlockedAdminView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            /*初始化*/
            var picker3 = $('#addEndDate').datetimepicker({
                format: 'yyyy-mm-dd hh:ii',
                autoclose: true,
                startDate: new Date()
            })

            var picker2 = $('#endDate').datetimepicker({
                format: 'yyyy-mm-dd hh:ii',
                autoclose: true,
                startDate: new Date()
            })
            $(function () {//默认时间
                var todayDate = new Date();
                var minute = todayDate.getMinutes() < 10 ? "0" + todayDate.getMinutes() : todayDate.getMinutes();
                var month = (todayDate.getMonth() + 1) < 10 ? "0" + (todayDate.getMonth() + 1) : (todayDate.getMonth() + 1);
                var todayDateStr = todayDate.getFullYear() + "-" + month + "-" + todayDate.getDate() + " " + todayDate.getHours() + ":" + minute;
                $("#addStartDate").val(todayDateStr);
                $("#startDate").val(todayDateStr);
            })

            $(function () {
                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'blockValue', title: 'id', align: 'center', valign: 'middle', width: '0%' },
                        {
                            field: 'blockType',
                            title: '封禁类型',
                            align: 'center',
                            width: '10%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                switch (val) {
                                    case 1:
                                        return '封禁平台号';
                                    
                                    case 2:
                                        return '封禁手机号';
                                  
                                    case 3:
                                        return "封禁设备";
                                     
                                    case 4:
                                        return "封禁IP";
                                      
                                }
                            }
                        },
                        {
                            field: 'blockStartTime',
                            title: '封禁开始时间',
                            align: 'center',
                            width: '10%',
                            valign: 'middle',
                            // formatter: function (val, row, index) {
                            //     if (val) {
                            //         var date = new Date(val);
                            //         return date.format("yyyy-MM-dd hh:mm");
                            //     } else {
                            //         return '-';
                            //     }
                            // }
                        },
                        {
                            field: 'blockEndTime',
                            title: '封禁结束时间',
                            align: 'center',
                            width: '10%',
                            valign: 'middle',
                            // formatter: function (val, row, index) {
                            //     if (val) {
                            //         var date = new Date(val);
                            //         return date.format("yyyy-MM-dd hh:mm");
                            //     } else {
                            //         return '-';
                            //     }
                            //
                            // }
                        },
                        {
                            field: 'blockStatus',
                            title: '封禁状态',
                            align: 'center',
                            width: '10%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                switch (val) {
                                    case 1:
                                        return '封禁中';
                                 
                                    case 2:
                                        return '封禁结束';
                                       
                                }
                            }
                        },
                        {
                            field: 'wallStatus',
                            title: '是否上墙',
                            align: 'center',
                            width: '10%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                if (val == true) {
                                    return '上墙';
                                } else {
                                    return '不上墙';
                                }
                            }
                        },
                        { field: 'blockDesc', title: '封禁原因', align: 'center', width: '10%', valign: 'middle' },
                        { field: 'adminName', title: '管理员', align: 'center', width: '10%', valign: 'middle' },
                        {
                            field: 'createTime',
                            title: '创建时间',
                            align: 'center',
                            width: '10%',
                            valign: 'middle',
                            // formatter: function (val, row, index) {
                            //     if (val) {
                            //         var date = new Date(val);
                            //         return date.format("yyyy-MM-dd hh:mm");
                            //     } else {
                            //         return '-';
                            //     }
                            // }
                        },
                        {
                            field: 'tmp',
                            title: '操作',
                            align: 'center',
                            width: '10%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                var key = row.blockValue;
                                if (row.blockStatus == 1) {
                                    return "<button class='btn btn-sm btn-success opt-release'  data-id=" + key + ">解封</button>&nbsp;&nbsp;" +
                                        "<button class='btn btn-sm btn-success opt-edit'  data-id=" + key + " >编辑</button>";
                                } else {
                                    return "<button class='btn btn-sm btn-success opt-edit'  data-id=" + key + " >编辑</button>";
                                }
                            }
                        },
                        { field: 'remark', title: '备注', align: 'center', width: '10%', valign: 'middle' }
                    ],
                    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,
                            pageNum: params.pageNumber,
                            type: $('#blockTypeSearch').val(),
                            blockValue: $('#blockValueSearch').val()
                        };
                        return param;
                    },
                    uniqueId: 'code',
                    toolbar: '#toolbar',
                    url: '/admin/block/list.action',
                    onLoadSuccess: function () {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                })
            })

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


            /*保存*/
            $('#addSave').on('click', function () {
                if ($('#addBlockForm').validationEngine('validate')) {
                    $("#tipMsg").text("正在封禁，请稍后");
                    $("#tipModal").modal('show');
                    $.ajax({
                        type: "post",
                        url: "/admin/block/save.action",
                        data: {
                            blockValue: $("#blockValue").val(),
                            blockDesc: $("#blockDesc").val(),
                            blockType: $("#blockType").val(),
                            blockStartTime: $('#addStartDate').val(),
                            blockEndTime: $('#addEndDate').val(),
                            wallStatus: $('#wallStatus').val(),
                            remark: $('#remark').val()
                        },
                        dataType: 'json',
                        success: function (json) {
                            if (json.data) {
                                $('#addAccountBlocked').modal('hide');
                                $("#tipMsg").text("保存成功");
                                $("#tipModal").modal('show');
                                TableHelper.doRefresh("#table");
                            } else {
                                $("#tipMsg").text("保存失败，错误码：" + json.message);
                                $("#tipModal").modal('show');
                            }
                        }
                    })
                }
            })

            //增加
            $('#add').on('click', function () {
                $('#addBlockForm')[0].reset();
                $('#addAccountBlocked').modal('show');

            })

            //解封
            $('#table').on('click', '.opt-release', function () {
                var key = $(this).data('id');
                $.ajax({
                    type: 'post',
                    url: '/admin/block/delete.action',
                    data: { blockValue: key },
                    dataType: 'json',
                    success: function (json) {
                        if (json.data) {
                            $("#tipMsg").text("解封成功");
                            $("#tipModal").modal('show');
                            TableHelper.doRefresh("#table");
                        } else {
                            $("#tipMsg").text("解封失败，错误信息：" + json.message);
                            $("#tipModal").modal('show');
                        }
                    }
                })
            })

            //编辑
            $('#table').on('click', '.opt-edit', function () {
                // var key = parseInt($(this).data('id'));
                var key = $(this).data('id');
                // 打开编辑弹窗
                $('#addBlockForm')[0].reset();
                $("#rowId").val(key);
                $.ajax({
                    type: 'get',
                    url: '/admin/block/get.action',
                    data: { blockValue: key },
                    dataType: 'json',
                    success: function (res) {
                        if (res.data) {
                            // var endDay = res.data.endBlockTime;
                            // var time = endDay.format("yyyy-MM-dd hh:mm");
                            $("#updateReason").val(res.data.blockDesc);
                            // $("#endDate").val(res.data.endBlockTime);
                            $("#endDate").val(res.data.blockEndTime);
                            $("#blockStatus1").val(res.data.blockStatus);
                            $("#remark1").val(res.data.remark);
                            if (res.data.wallStatus == true) {
                                $("#wallStatus1").val(1);
                            } else {
                                $("#wallStatus1").val(0);
                            }
                            $("#editModel").modal('show');
                        }
                    }
                })
            })


            //编辑弹窗保存
            $("#saveUpdate").click(function () {
                $.ajax({
                    type: 'post',
                    url: '/admin/block/update.action',
                    data: {
                        blockValue: $("#rowId").val(),
                        blockStatus: $("#blockStatus1").val(),
                        wallStatus: $("#wallStatus1").val(),
                        blockStartTime: $('#startDate').val(),
                        blockEndTime: $('#endDate').val(),
                        blockDesc: $('#updateReason').val(),
                        remark: $('#remark1').val()
                    },
                    dataType: 'json',
                    success: function (json) {
                        if (json.data) {
                            $("#editModel").modal('hide');
                            $("#tipMsg").text("修改成功");
                            $("#tipModal").modal('show');
                            TableHelper.doRefresh("#table");
                        } else {
                            $("#tipMsg").text("修改失败，错误码：" + json.message);
                            $("#tipModal").modal('show');
                        }
                    }
                })
            })
        }
    },
};
</script>

<style scoped>
.bar1,
.bar2 {
    margin-bottom: 10px;
}

label.col-sm-1 {
    padding: 0;
    line-height: 30px;
    text-align: right;
    /*padding-right: 4px;*/
}

label.col-sm-1 {
    padding: 0;
    line-height: 30px;
    text-align: right;
    /*padding-right: 4px;*/
}

input,
select {
    margin-left: 8px;
    margin-right: 8px;
}

#btnSearch {
    margin-left: 36px;
}

.record {
    margin-top: 10px;
}

.record .title {
    font-size: 16px;
}</style>