<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html >
<html>
<head>
    <title>系统项目配置</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        body {
            overflow: hidden;

        }

        .nav > li > a {
            padding: 5px 15px !important;
        }

        .btn {
            padding: 2px 12px !important;
            font-size: 12px !important;
        }

        .div30 {
            width: 30px;
            height: 30px;
        }

        .divCenter {
            margin: 0 auto;
        }

        .line30 {
            line-height: 30px !important;
        }

        .backColorDiv {
            background-color: var(--primarycolor);
            border-radius: 3px
        }

        .width60 {
            width: 60px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
        	<div class="form-inline pdr15 mt15 fr">
					<button id="btn_new" type="button" class="btn themeBGColor">
						<i class="glyphicon glyphicon-plus"></i>新增主题
					</button>
			</div>
            <div class="mt15" style="font-size: 15px">主题配置：</div>
            <div id="themeTable"></div>
            <div class="mt15" style="font-size: 15px">系统配置：</div>
            <table id="systemTable" class="table table-striped table-bordered dataTable no-footer width100">
                <thead>
                <tr role="row">
                    <th class="text-center">名称</th>
                    <th class="text-center">别名</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.dataTables.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/bootstrap-table.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/locales/bootstrap-table-zh-CN.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script>
    $(function () {
        refreshTheme();
        refreshSystem();
    })

    //获取主题数据
    function refreshTheme() {
        $.ajax({
            type: "POST",
            url: "/pqs9900/theme/getThemeList",
            async: false,
            dataType: 'json',
            success: function (data) {
                var code = initTableHeader();
                code += '<tbody>';
                
                if(data.code == 500){
                	var info = data.body;
                	code += initTableTheme(true,info[0].themeDesc,info[0].themeColor,info[0].logoName,info[0].faviconName);
                }else{
                	var list = data.body;
                	for(var i=0;i<list.length;i++){
                		var info = list[i];
                		if(info.active == 1){
                			code += initTableTheme(i,true,info.themeIndex,info.themeDesc,info.themeColor,info.logoName,info.faviconName);
                		}else{
                			code += initTableTheme(i,false,info.themeIndex,info.themeDesc,info.themeColor,info.logoName,info.faviconName);
                		}
                	}
                }
                
                code += '</tbody></table>';
                var themeTable = document.getElementById('themeTable');
                themeTable.innerHTML = code;
            }
        })
    }

    //获取系统项目数据
    function refreshSystem() {
        $.ajax({
            type: "POST",
            url: "/pqs9900/manageSystem/getSystemInfo",
            async: false,
            dataType: 'json',
            success: function (data) {
                initTable(data.body)
            }
        })
    }


    //实例化系统项目表格
    function initTable(data) {
        $("#systemTable").DataTable({
            data: data,
            autoWidth: false,
            ordering: false,
            columnDefs: [
                {"width": "30%", "targets": 0},
                {"width": "30%", "targets": 1},
                {"width": "40%", "targets": 2}
            ],
            paging: false,
            lengthChange: false,
            searching: false,
            destroy: true,
            info: false,
            language: {
                url: '/pqs9900/json/chine.json',
            },
            columns: [
                {
                    data: 'systemName', render: function (data, type, full, meta) {
                        var name = data;
                        if (Number(full.defaultSystem) === 1) {
                            name = name + "&nbsp;(默认)";
                        }
                        return name;

                    }
                },
                {data: 'systemEName'},
                {
                    data: 'active', render: function (data, type, full, meta) {
                        var activeBotton, defaultBotton;
                        if (Number(data) === 1) {
                            activeBotton = "<button type='button' class='btn  btn-danger  mr10' onclick='hideSystem(\"" + full.systemIndex + "\")' ><i class='fa fa-ban'></i>闲置</button>";
                        } else {
                            activeBotton = "<button type='button' class='btn  btn-primary  mr10' onclick='displaySystem(\"" + full.systemIndex + "\")' ><i class='fa fa-star'></i>激活</button>";
                        }
                        if (Number(full.defaultSystem) === 0 & Number(data) === 1) {
                            defaultBotton = "<button type='button' class='btn  btn-primary ' onclick='defaultSystem(\"" + full.systemIndex + "\")' ><i class='fa fa-home'></i>设置默认</button>";
                        } else {
                            defaultBotton = "";
                        }
                        return activeBotton + defaultBotton;

                    }
                },
            ],
        })
    }

    //隐藏系统项目
    function hideSystem(systemIndex) {
        $.ajax({
            type: "POST",
            url: "/pqs9900/manageSystem/hideSystem",
            async: false,
            data: {
                systemIndex: systemIndex,
            },
            dataType: 'json',
            success: function (data) {
                refreshSystem();
            }
        })
    }


    //显示系统项目
    function displaySystem(systemIndex) {
        $.ajax({
            type: "POST",
            url: "/pqs9900/manageSystem/displaySystem",
            async: false,
            data: {
                systemIndex: systemIndex,
            },
            dataType: 'json',
            success: function (data) {
                refreshSystem();
            }
        })
    }

    //设置为默认项目
    function defaultSystem(systemIndex) {
        $.ajax({
            type: "POST",
            url: "/pqs9900/manageSystem/defaultSystem",
            async: false,
            data: {
                systemIndex: systemIndex,
            },
            dataType: 'json',
            success: function (data) {
                refreshSystem();
            }
        })
    }

	function initTableHeader() {
		var code = '<table id="themesTable" class="table table-striped table-bordered dataTable no-footer width100">';

		code += '<thead><tr role="row"><th class="text-center" style="display: none;">ID</th>';
		code += '<th class="text-center">主题色</th>';
		code += '<th class="text-center">logo</th>';
		code += '<th class="text-center">网站图标</th>';
		code += '<th class="text-center">描述</th>';
		code += '<th class="text-center">操作</th></tr></thead>';
		
		return code;
	}
	
	function initTableTheme(i,flag,themeIndex,themedesc,themeColor,logoname,faviconname){
		var code = '<tr>';
		code += '<td id="themeIndex'+i+'" style="display: none;">'+ themeIndex +'</td>';
		code += '<td><div class="div30 divCenter" style="background-color: '+ themeColor +';border-radius: 3px;"></div></td>';
		code += '<td><div class="divCenter width60" style="background-color: '+ themeColor +';border-radius: 3px;"><img class="div30" src="${ctx}/images/' + logoname + '"></div></td>';
		code += '<td><img class="div30" src="${ctx}/images/' + faviconname + '"></td>';
		code += '<td class="line30">' + themedesc + '</td>';
		if(flag){
			code += '<td class="table-middle"><button type="button" class="btn  btn-danger  mr10" disabled><i class="fa fa-ban"></i>已启用</button></td>';
		}else{
			code += '<td class="table-middle"><button type="button" class="btn  btn-primary  mr10" onclick="activate(' + i + ')"><i class="fa fa-star"></i>启用</button>';
			code += '<button type="button" class="btn  btn-danger  mr10" onclick="deleteTheme(' + i + ')"><i class="fa fa-trash"></i>删除</button></td>';
		}
		code += '</tr>';
		
		return code;
	}
	
	$("#btn_new").click(function (){
		modifyTheme();
	});  

    //新增主题
    function modifyTheme() {
        layer.open({
            type: 2,
            title: '新增主题',
            shadeClose: true,
            shade: 0.3,
            area: ['380px', '300px'],
            maxmin: false,
            content: '/pqs9900/theme/modifytheme', //iframe的url
            scrollbar: false,
            end: function () {
                refreshTheme();
            }
        });
    }
    
    function activate(i){
    	var id = "themeIndex" + i;
    	var themeIndex = document.getElementById(id).innerText;

        $.ajax({
            type: "POST",
            url: "/pqs9900/theme/activate",
            async: false,
            data: {
            	themeIndex: themeIndex,
            },
            dataType: 'json',
            success: function (data) {
            	refreshTheme();
            }
        })
    }    
    
    function deleteTheme(i){
    	var id = "themeIndex" + i;
    	var themeIndex = document.getElementById(id).innerText;
    	layer.confirm('是否确认？',function(){
	        $.ajax({
	            type: "POST",
	            url: "/pqs9900/theme/deleteTheme",
	            async: false,
	            data: {
	            	themeIndex: themeIndex,
	            },
	            dataType: 'json',
	            success: function (data) {
	            	if(data.code==200){
						layer.msg('删除成功!',{icon:1,time:1000});
		            	refreshTheme();
					}else{
						layer.msg('删除失败！',{icon:2,time:1000});
					}
	            }
	        })
		})
    }
</script>
</body>
</html>