<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">
                        <label for="erbanNo" class="col-sm-2 control-label">房主平台号:</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" name="erbanNo" id="erbanNo" placeholder="">
                        </div>
                        <label for="roomTitle" class="col-sm-2 control-label">房间标题:</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" name="roomTitle" id="roomTitle" placeholder="">
                        </div>
                        <button id="btnSearch" class="btn btn-default">
                            <i class="glyphicon glyphicon-search"></i>查询
                        </button>
                    </div>
                </div>
            </div>

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

        </div>
    </section>

    <!-- 编辑弹框 -->
    <div class="modal fade" id="roomTabHomeModal" 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" />
                        <input type="hidden" name="roomUid" id="roomUid" />
                        <div class="form-group">
                            <label for="modal_isTop" class="col-sm-3 control-label">是否置顶<font color="red">*</font>：</label>
                            <div class="col-sm-9">
                                <select name="isTop" id="modal_isTop" class="form-control validate[required]">
                                    <option value=""></option>
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modal_seq" class="col-sm-3 control-label">置顶排序<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control validate[custom[integer]]" name="seq" id="modal_seq"
                                    placeholder="数字小的排前面，必填">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modal_topStart" 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" name="topStart"
                                    id="modal_topStart">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modal_topEnd" 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" name="topEnd" id="modal_topEnd">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modal_isShow" class="col-sm-3 control-label">是否在App首页展示<font color="red">*</font>：</label>
                            <div class="col-sm-9">
                                <select name="isShow" id="modal_isShow" class="form-control validate[required]">
                                    <option value=""></option>
                                    <option value="1">是</option>
                                    <option value="0">否</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" id="btnConfirm">确定</button>
                </div>

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

<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { formatTime } from '@/utils/maintainer';

// tab类型选择变化查询
/*function selectOnTabChange(obj){
    // console.log(obj);
    TableHelper.doRefresh('#table');
}*/
export default {
    name: "RoomTabHomeView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                $('.datetime').datetimepicker({
                    format: 'yyyy-mm-dd hh:ii:00',
                    autoclose: true
                });
                // 拉取所有tab
                //getRoomTabs();

                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'erbanNo', title: '房主平台号', align: 'center', width: '5%' },
                        { field: 'roomUid', title: '房主Uid', align: 'center', width: '5%' },
                        { field: 'roomTitle', title: '房间标题', align: 'center', width: '8%' },
                        { field: 'roomTag', title: '房间标签', align: 'center', width: '5%' },
                        { 
                            field: 'isPermitRoom', 
                            title: '房间类型', 
                            align: 'center', 
                            width: '5%',
                            formatter: function (val, row, index) {
                                let value = '';
                                if (val == 1) {
                                    value = '牌照房';
                                } else if (val == 4) {
                                    value = '个播房';
                                } else {
                                    value = '非牌照房';
                                }
                                return value;
                            } 
                        },
                        {
                            field: 'iconContent',
                            title: '图标内容',
                            align: 'center',
                            width: '5%',
                            formatter: function (val, row, index) {
                                return "<img src='" + val + "' width='40' height='40'>";
                            }
                        },
                        {
                            field: 'isTop', 
                            title: '是否置顶', 
                            align: 'center', 
                            valign: 'middle', 
                            width: '5%',
                            formatter: function (val, row, index) {
                                if (val) {
                                    return '是';
                                } else {
                                    return '否';
                                }

                            }
                        },
                        {
                            field: 'isShow', 
                            title: '是否在App首页展示', 
                            align: 'center', 
                            valign: 'middle',
                            width: '5%',
                            formatter: function (val, row, index) {
                                if (val) {
                                    return '是';
                                } else {
                                    return '否';
                                }

                            }
                        },
                        { field: 'seq', title: '置顶排序', align: 'center', width: '5%' },
                        { field: 'topStart', title: '置顶开始时间', align: 'center', valign: 'middle', width: '10%', formatter: formatTime },
                        { field: 'topEnd', title: '置顶结束时间', align: 'center', valign: 'middle', width: '10%', formatter: formatTime },
                        {
                            field: 'id',
                            title: '操作',
                            align: 'center',
                            width: '10%',
                            formatter: function (val, row, index) {
                                return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id="' + val + '" data-index="' + index + '">' +
                                    '<i class="glyphicon glyphicon-edit"></i> 编辑</button>';
                            }
                        }
                    ],
                    undefinedText: "",
                    cache: false,
                    striped: true,
                    showRefresh: false,
                    pageSize: 20,
                    pagination: true,
                    pageList: [10, 20, 50, 100, 200, 500],
                    search: false,
                    sidePagination: "server", //表示服务端请求
                    queryParamsType: "undefined",
                    queryParams: function queryParams(params) {   //设置查询参数
                        /*var tabId = $('#roomTab').val();
                        if (tabId == null || tabId.length <= 0) {
                            tabId = '1';
                        }*/
                        var param = {
                            page: params.pageNumber,
                            pageSize: params.pageSize,
                            erbanNo: $('#erbanNo').val(),
                            roomTitle: $('#roomTitle').val()
                            //tabId: tabId
                        };
                        console.log(param);
                        return param;
                    },
                    ajax: function (request) {                    //使用ajax请求
                        $.ajax({
                            type: "GET",
                            url: '/admin/roomTabHome/list.action',
                            contentType: 'application/json;charset=utf-8',
                            dataType: 'json',
                            data: request.data,
                            success: function (res) {
                                console.log(res);
                                request.success({
                                    rows: res.data.roomTabHomeList,
                                    total: res.data.totalPage
                                });
                            },
                            error: function (error) {
                                console.log(error);
                            }
                        })
                    },
                    toolbar: '#toolbar',
                    onLoadSuccess: function () {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                });

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

                // 编辑或者新增
                $("#btnConfirm").click(function () {
                    var id = $("#id").val();
                    var roomUid = $('#roomUid').val();
                    var seq = $("#modal_seq").val();
                    var isTop = $("#modal_isTop").val();
                    var iconContent = $("#modal_iconContent").val();
                    var topStart = $("#modal_topStart").val();
                    var topEnd = $("#modal_topEnd").val();

                    if ($("#addForm").validationEngine('validate')) {
                        $.ajax({
                            type: "post",
                            url: "/admin/roomTabHome/save.action",
                            data: {
                                id: id,
                                roomUid: roomUid,
                                seq: seq,
                                isTop: isTop,
                                iconContent: iconContent,
                                topStart: topStart,
                                topEnd: topEnd,
                                isShow: isShow,
                            },
                            dataType: "json",
                            success: function (json) {
                                if (json.code == 200) {
                                    $("#tipMsg").text("保存成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                    $("#roomTabHomeModal").modal('hide');
                                } else {
                                    $("#tipMsg").text("保存失败." + json.msg);
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                    $("#roomTabHomeModal").modal('hide');
                                }
                            }
                        });
                    }

                });

                // 获取信息
                $("#table").on("click", '.opt-edit', function () {
                    var id = $(this).attr("data-id");
                    const index = $(this).data('index');
                    const record = TableHelper.getData('#table')[index];
                    $('#roomUid').val(record.roomUid);
                    if (id && id != 'null') {
                        $.ajax({
                            type: "get",
                            url: "/admin/roomTabHome/get.action",
                            data: { id: id },
                            dataType: "json",
                            success: function (ret) {
                                if (ret.code == 200) {
                                    var json = ret.data.roomTabHome;
                                    $("#id").val(id);
                                    $("#modal_iconContent").val(json.iconContent);
                                    $("#modal_seq").val(json.seq);
                                    $("#modal_isTop").val(json.isTop ? 1 : 0);
                                    $("#modal_topStart").val(formatTime(json.topStart));
                                    $("#modal_topEnd").val(formatTime(json.topEnd));
                                    $("#modal_isShow").val(json.isShow ? 1 : 0);
                                } else {
                                    $("#tipMsg").text("获取菜单信息出错");
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }
                    // 打开编辑弹窗
                    $("#roomTabHomeModal").modal('show');
                    $("#modalLabel").text("编辑");
                });

                // 删除操作
                $("#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/roomTabHome/delete.action",
                            data: { id: id },
                            dataType: "json",
                            success: function (json) {
                                if (json.code == 200) {
                                    $("#tipMsg").text("删除成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("删除失败");
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }
                });

                // 通过接口获取所有房间tab
                function getRoomTabs() {
                    $.ajax({
                        url: "/admin/roomTab/excludelist.action?page=1&pageSize=1000",    //后台controller中的请求路径
                        type: 'GET',
                        async: false,
                        datatype: 'json',
                        success: function (res) {
                            console.log(res);
                            if (res) {
                                var data = res.data.roomTabList;
                                var tabs = [];
                                for (var i = 0, len = data.length; i < len; i++) {
                                    var item = data[i];
                                    //拼接成多个<option><option/>
                                    tabs.push('<option value="' + item.id + '">' + item.name + '</option>')
                                }
                                $("#roomTab").html(tabs.join(' '));    //填充到select标签中
                            }
                        },
                        error: function () {
                            alert('查询房间tab出错');
                        }
                    });
                }

            });
        }
    },

};
</script>

<style scoped></style>