<template>
    <section class="content">
        <div class="box box-primary">
            <section class="content-header">
                <h1 id="itemTitle">新版首页tab配置</h1>
            </section>
            <section class="content">
                <div id="table"></div>
                <div id="toolbar">
                    <button id="addBtn" class="btn btn-default">
                        <i class="glyphicon glyphicon-plus"></i>增加
                    </button>&nbsp;&nbsp;&nbsp;
                    tab名称: <input type="text" id='name'>
                    &nbsp;&nbsp;&nbsp;
                    状态: <select name="status" id="seachStatus" class="input-m">
                        <option value="">--全部--</option>
                        <option value="1">展示</option>
                        <option value="2">隐藏</option>
                    </select>
                    app: <select name="app" id="app" class="input-m">
                        <option value="">--全部--</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;
                    开始日期:&nbsp;&nbsp;<input type="text" name="timeBegin" id="beginTime" class="input-sm" value="">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    结束日期:&nbsp;&nbsp;<input type="text" name="timeEnd" id="endTime" class="input-sm" value="">
                    <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
                </div>
            </section>
        </div>
    </section>
    <input type="hidden" name="tabId" id="id">
    <div class="modal fade" id="actModal" 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="addModalLabel">新增</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="actForm">
                        <input type="hidden" name="id" id="actId" value="0">
                        <div class="form-group">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">tab名称:</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control validate[required]" name="name" id="tabName"
                                        style="width:400px">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="status" class="col-sm-3 control-label">状态:</label>
                                <select name="status" id="status" class="col-sm-2">
                                    <option value="1">展示</option>
                                    <option value="2">隐藏</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="showType" class="col-sm-3 control-label">展示类型:</label>
                                <select name="showType" id="showType" class="col-sm-2">
                                    <!--<option value="1">3+N</option>-->
                                    <option value="2">2*N</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="appId" class="col-sm-3 control-label">app:</label>
                                <select name="appId" id="appId" class="col-sm-2 validate[required]">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="seqNo" class="col-sm-3 control-label">排序:</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control validate[required]" name="seqNo" id="seqNo"
                                        style="width:400px" placeholder="数字越小越靠前">
                                </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" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editModal" 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="editModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="editForm">
                        <input type="hidden" name="tabId" id="tabId" value="0">
                        <div class="form-group">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">tab名称:</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control validate[required]" name="name" id="e_tabName"
                                        style="width:400px">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="status" class="col-sm-3 control-label">状态:</label>
                                <select name="status" id="e_status" class="col-sm-2">
                                    <option value="1">展示</option>
                                    <option value="2">隐藏</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="showType" class="col-sm-3 control-label">展示类型:</label>
                                <select name="showType" id="e_showType" class="col-sm-2">
                                    <!--<option value=1>3+N</option>-->
                                    <option value=2>2*N</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="appId" class="col-sm-3 control-label">app:</label>
                                <select name="appId" id="e_appId" class="col-sm-2">
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="seqNo" class="col-sm-3 control-label">排序:</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control validate[required]" name="seqNo" id="e_seqNo"
                                        style="width:400px" placeholder="数字越小越靠前">
                                </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" id="edit">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="sureModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="sure">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>

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

var app = {};
var validApp = {};
export default {
    name: "FirstPageTabView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                $('#table').bootstrapTable('destroy');
                initTable();

                getAppNames();
                function getAppNames() {
                    $.get('/admin/appName/listAll', {}, function (res) {
                        if (res.rows.length > 0) {
                            renderSelect(res.rows);
                            renderAppObj(res.rows);
                        }
                    })
                }

                function renderSelect(data) {
                    var $select = $('#app');
                    for (var i = 0; i < data.length; i++) {
                        var $option = $('<option value="' + data[i].app + '" />');
                        $option.html(data[i].appName);
                        $select.append($option);
                    }
                }
                function renderAppObj(rows) {
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        app[row.app] = row.appName;
                        // 有效的app
                        if (row.status == 1) {
                            validApp[row.app] = row.appName;
                        }
                    }
                }

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

                $('#addBtn').on('click', function () {
                    cleanModal();
                    $("#actForm")[0].reset();
                    // 处理appId
                    $('#appId').empty();
                    $('#appId').append('<option value="">请选择</option>');
                    for (var key in validApp) {
                        $('#appId').append('<option value="' + key + '">' + validApp[key] + '</option>');
                    }

                    $('#actModal').modal('show');
                });
                $('#table').on('click', '.opt-edit', function () {
                    cleanModal();
                    // 处理appId
                    $('#e_appId').empty();
                    $('#e_appId').append('<option value="">请选择</option>');
                    for (var key in app) {
                        $('#e_appId').append('<option value="' + key + '">' + app[key] + '</option>');
                    }
                    var tabId = $(this).attr("data-id-1");
                    var name = $(this).attr("data-id-2");
                    var seqNo = $(this).attr("data-id-5");
                    var appId = $(this).attr("data-id-6");
                    var data = $('#table').bootstrapTable('getRowByUniqueId', tabId);
                    $('#tabId').val(tabId);
                    $('#e_tabName').val(name);
                    $('#e_status').val(data.status);
                    $('#e_showType').val(data.showType);
                    $('#e_seqNo').val(seqNo);
                    $('#e_appId').val(data.appId);
                    $('#editModal').modal('show');
                });
                // 事件编辑
                var $timeBegin = $('#beginTime').datepicker({
                    format: 'yyyy-mm-dd',
                    autoclose: true
                });
                var $timeEnd = $('#endTime').datepicker({
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                });

                $timeBegin.on('changeDate', function () {
                    var date = $('#beginTime').datepicker('getDate');
                    $timeEnd.datepicker('setStartDate', date);
                });
                $timeEnd.on('changeDate', function () {
                    var date = $('#endTime').datepicker('getDate');
                    $timeBegin.datepicker('setEndDate', date);
                });
                $('#save').on('click', function () {
                    if (!$('#appId').val()) {
                        $("#tipMsg").text("请选择app");
                        $("#tipModal").modal('show');
                        return;
                    }
                    if ($('#actForm').validationEngine('validate')) {
                        $.ajax({
                            type: "post",
                            url: "/admin/firstpagetab/add.action",
                            data: $('#actForm').serialize(),
                            dataType: 'json',
                            success: function (json) {
                                if (json.success == 'true') {
                                    $("#actModal").modal('hide');
                                    $("#tipMsg").text(json.msg);
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("保存失败，错误码：" + json.message);
                                    $("#tipModal").modal('show');
                                }
                            }
                        })
                    }
                });
                $('#edit').on('click', function () {
                    /*if(!$('#appId').val()){
                        $("#tipMsg").text("请选择app");
                        $("#tipModal").modal('show');
                        return;
                    }*/
                    if ($('#editForm').validationEngine('validate')) {
                        $.ajax({
                            type: "post",
                            url: "/admin/firstpagetab/update.action",
                            data: $('#editForm').serialize(),
                            dataType: 'json',
                            success: function (json) {
                                if (json.success == 'true') {
                                    $("#editModal").modal('hide');
                                    $("#tipMsg").text(json.msg);
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("修改失败，错误码：" + json.msg);
                                    $("#tipModal").modal('show');
                                }
                            }
                        })
                    }
                });
                $("#table").on("click", '.opt-del', function () {
                    var tabId = $(this).attr("data-id");
                    if (tabId == 'undefined') {
                        $("#tipMsg").text("id参数有误");
                        $("#tipModal").modal('show');
                        return;
                    }
                    if (confirm("你确认删除吗?")) {
                        $.ajax({
                            type: 'post',
                            url: '/admin/firstpagetab/delete.action',
                            data: { 'tabId': tabId },
                            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');
                                }
                            }
                        });
                    }
                });

                function cleanModal() {
                    $('#actForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
                        $(this).val('');
                    })
                    $('#actForm').find('img').attr('src', '');
                }
                function initTable() {
                    $('#table').bootstrapTable({
                        columns: [
                            { field: 'tabId', title: '序号', align: 'center', valign: 'middle', width: '10%' },
                            { field: 'name', title: 'tab名称', align: 'center', valign: 'middle', width: '10%' },
                            { field: 'seqNo', title: '排序', align: 'center', valign: 'middle', width: '10%' },
                            {
                                field: 'status',
                                title: '状态',
                                align: 'center',
                                width: '5%',
                                valign: 'middle',
                                formatter: function (val, row, index) {
                                    switch (val) {
                                        case '1':
                                            return '展示';
                                          
                                        case '2':
                                            return '隐藏';
                                       
                                    }
                                }
                            },
                            {
                                field: 'appId',
                                title: 'app',
                                align: 'center',
                                width: '10%',
                                valign: 'middle',
                                formatter: function (val, row, index) {
                                    var name = app[val];
                                    if (name != null) {
                                        return name;
                                    }
                                    return val;
                                }
                            },
                            {
                                field: 'showType',
                                title: '展示类型',
                                align: 'center',
                                width: '5%',
                                valign: 'middle',
                                formatter: function (val, row, index) {
                                    switch (val) {
                                        case 1:
                                            return '3+N';
                                     
                                        case 2:
                                            return '2*N';
                                      
                                    }
                                }
                            },
                            {
                                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:ss");
                                    } else {
                                        return '-';
                                    }
                                }
                            },
                            {
                                field: 'tmp',
                                title: '操作',
                                align: 'center',
                                width: '10%',
                                valign: 'middle',
                                formatter: function (val, row, index) {
                                    var id = row.tabId;
                                    var name = row.name;
                                    var status = row.status;
                                    var showType = row.showType;
                                    var seqNo = row.seqNo;
                                    var appId = row.appId;
                                    return '<button class="btn btn-sm btn-success opt-edit" data-id-1 ="' + id
                                        + '"data-id-2="' + name
                                        + '"data-id-3="' + status
                                        + '"data-id-6="' + appId
                                        + '"data-id-4="' + showType
                                        + '"data-id-5="' + seqNo + '">' + '编辑</button>' + "&nbsp;&nbsp;&nbsp;" +
                                        "<button class='btn btn-sm btn-danger opt-del' data-id=" + id + ">删除</button>";

                                }
                            }
                        ],
                        cache: false,
                        striped: true,
                        showRefresh: false,
                        pageSize: 20,
                        pagination: true,
                        pageList: [10, 20, 30, 50],
                        sidePagination: "server", //表示服务端请求
                        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                        //设置为limit可以获取limit, offset, search, sort, order
                        queryParamsType: "undefined",
                        queryParams: function queryParams(params) {   //设置查询参数
                            var beginTime = ($('#beginTime').val()) ? ($("#beginTime").val() + ' 00:00:00') : null;
                            var endTime = ($('#endTime').val()) ? ($('#endTime').val() + ' 23:59:59') : null;
                            var param = {
                                pageSize: params.pageSize,
                                pageNumber: params.pageNumber,
                                beginTime: beginTime,
                                endTime: endTime,
                                name: ($('#name').val()) ? $('#name').val() : null,
                                status: ($('#seachStatus').val()) ? $('#seachStatus').val() : null,
                                appId: ($('#app').val()) ? $('#app').val() : null
                            };
                            return param;
                        },
                        uniqueId: 'tabId',
                        toolbar: '#toolbar',
                        url: '/admin/firstpagetab/list.action',
                        onLoadSuccess: function () {  //加载成功时执行
                            console.log("load success");
                        },
                        onLoadError: function () {  //加载失败时执行
                            console.log("load fail");
                        }
                    })
                }
            })
        }
    },

};
</script>

<style scoped>
#imgMask {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 600px;
    padding: 4px;
    background: #fff;
    z-index: 999;
    display: none;
}

#imgMask img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}
</style>