<% layout('/layouts/default.html', {title: '应用接入列表管理', libs: ['dataGrid']}){ %>

<style type="text/css">
	.uiswitch {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		height: 31px;
		width: 51px;
		position: relative;
		border-radius: 16px;
		cursor: pointer;
		outline: 0;
		z-index: 0;
		margin: 0;
		padding: 0;
		border: none;
		background-color: #e5e5e5;
		-webkit-transition-duration: 600ms;
		-moz-transition-duration: 600ms;
		transition-duration: 600ms;
		-webkit-transition-timing-function: ease-in-out;
		-moz-transition-timing-function: ease-in-out;
		transition-timing-function: ease-in-out;
		-webkit-touch-callout: none;
		-webkit-text-size-adjust: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-user-select: none;
	}

	.uiswitch::before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 27px;
		width: 47px;
		content: ' ';
		position: absolute;
		left: 2px;
		top: 2px;
		background-color: #ffffff;
		border-radius: 16px;
		z-index: 1;
		-webkit-transition-duration: 300ms;
		-moz-transition-duration: 300ms;
		transition-duration: 300ms;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}

	.uiswitch::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 27px;
		width: 27px;
		content: ' ';
		position: absolute;
		border-radius: 27px;
		background: #ffffff;
		z-index: 2;
		top: 2px;
		left: 2px;
		box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 4px 11px 0px rgba(0, 0, 0, 0.08), -1px 3px 3px 0px rgba(0, 0, 0, 0.14);
		-webkit-transition: -webkit-transform 300ms, width 280ms;
		-moz-transition: -moz-transform 300ms, width 280ms;
		transition: transform 300ms, width 280ms;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
		-moz-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
		transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
	}

	.uiswitch:checked {
		background-color: #4CD964;
		background-image: -webkit-linear-gradient(-90deg, #4CD964 0%, #4dd865 100%);
		background-image: linear-gradient(-180deg,#4CD964 0%, #4dd865 100%);
	}

	.uiswitch:checked::after {
		-webkit-transform: translate3d(16px, 0, 0);
		-moz-transform: translate3d(16px, 0, 0);
		-ms-transform: translate3d(16px, 0, 0);
		-o-transform: translate3d(16px, 0, 0);
		transform: translate3d(16px, 0, 0);
		right: 18px;
		left: inherit;
	}

	.uiswitch:active::after {
		width: 35px;
	}

	.uiswitch:checked::before, .uiswitch:active::before {
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}

	.uiswitch:disabled {
		opacity: 0.5;
		cursor: default;
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
	}

	.uiswitch:disabled:active::before, .uiswitch:disabled:active::after, .uiswitch:disabled:checked:active::before, .uiswitch:disabled:checked::before {
		width: 27px;
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
	}

	.uiswitch:disabled:active::before {
		height: 27px;
		width: 41px;
		-webkit-transform: translate3d(6px, 0, 0);
		-moz-transform: translate3d(6px, 0, 0);
		-ms-transform: translate3d(6px, 0, 0);
		-o-transform: translate3d(6px, 0, 0);
		transform: translate3d(6px, 0, 0);
	}

	.uiswitch:disabled:checked:active::before {
		height: 27px;
		width: 27px;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}

	.uiswitch {
		background-color: #e5e5e5;
	}

	.uiswitch::before {
		background-color: #ffffff;
	}

	.uiswitch::after {
		background: #ffffff;
	}

	.uiswitch:checked {
		background-color: #4CD964;
		background-image: -webkit-linear-gradient(-90deg, #4CD964 0%, #4dd865 100%);
		background-image: linear-gradient(-180deg,#4CD964 0%, #4dd865 100%);
	}

	body {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		background-color: #ffffff;
	}

	p {
		font-size: 18px;
		font-weight: 300;
	}

	pre, code {
		font-family: Monaco, Menlo, "Courier New", Courier, monospace;
		font-size: 13px;
	}

	pre {
		text-align: left;
	}

	pre {
		background-color: #fbfbfb;
		border: 1px solid #eee;
		padding: .6em;
		display: inline-block;
		border-radius: 3px;
	}

	.wrapper {
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}

	h1 {
		font-weight: 200;
		text-align: center;
		margin: 2em;
	}

	.fields__item {
		display: inline-block;
		margin-right: 1.875em;
		text-align: center;
	}

	h6 {
		font-size: 12px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: .5px;
		color: #aaa;
		margin: 1em;
	}

	.section {
		margin: 2em auto;
	}

	.custom {
		background-color: #eadcbc;
	}

	.custom::before {
		background-color: #f7f2e5;
	}

	.custom::after {
		background: #fff3a6;
	}

	.custom:checked {
		background-color: #ffca3f;
		background-image: -webkit-linear-gradient(-90deg, #ffca3f 0%, #feca40 100%);
		background-image: linear-gradient(-180deg, #ffca3f 0%, #feca40 100%);
	}

	.my-switch {
		border-radius: 4px;
	}

	.my-switch::before {
		border-radius: 2px;
	}

	.my-switch::after {
		border-radius: 1px;
	}

	.my-switch:checked {
		background: hotpink;
	}

	.my-switch:checked::after {
		background-color: #333;
	}


</style>

</style>

<div class="main-content">
	<div class="box box-main">
		<div class="box-header">
			<div class="box-title">
				<i class="fa icon-notebook"></i> ${text('应用接入列表管理')}
			</div>
			<div class="box-tools pull-right">
				<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
				<% if(hasPermi('sso:ssoApp:edit')){ %>
					<a href="${ctx}/sso/ssoApp/form" class="btn btn-default btnTool" title="${text('新增应用接入列表')}"><i class="fa fa-plus"></i> ${text('新增')}</a>
				<% } %>
				<a href="#" class="btn btn-default" id="btnSetting" title="${text('设置')}"><i class="fa fa-navicon"></i></a>
			</div>
		</div>
		<div class="box-body">
			<#form:form id="searchForm" model="${ssoApp}" action="${ctx}/sso/ssoApp/listData?accessType=0" method="post" class="form-inline hide"
					data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
				<div class="form-group">
					<label class="control-label">${text('应用类别')}：</label>
					<div class="control-inline width-120">
						<#form:select path="appType" dictType="sso_apptype" blankOption="true" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label">${text('应用名称')}：</label>
					<div class="control-inline">
						<#form:input path="appName" maxlength="255" class="form-control width-120"/>
					</div>
				</div>

				<div class="form-group">
					<label class="control-label">${text('所属机构')}：</label>
					<div class="control-inline width-120">
						<#form:select path="affiliation" dictType="admin_affiliation" multiple="true" blankOption="true" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label">${text('接入方式')}：</label>
					<div class="control-inline">
						<#form:radio path="access" dictType="admin_access" class="form-control"/>
					</div>
				</div>

				<div class="form-group">
					<button type="submit" class="btn btn-primary btn-sm">${text('查询')}</button>
					<button type="reset" class="btn btn-default btn-sm">${text('重置')}</button>
				</div>
			</#form:form>
			<table id="dataGrid"></table>
			<div id="dataGridPage"></div>
		</div>
	</div>
</div>
<% } %>
<script>
// 初始化DataGrid对象
$('#dataGrid').dataGrid({
	searchForm: $("#searchForm"),
	columnModel: [
		{header:'${text("应用类别")}', name:'appType', index:'a.app_type', width:150, align:"left", frozen:true, formatter: function(val, obj, row, act){
				return js.getDictLabel(${@DictUtils.getDictListJson('sso_apptype')}, val, '${text("未知")}', true);
		}},
		{header:'${text("应用名称")}', name:'appName', index:'a.app_name', width:150, align:"left"},
		{header:'${text("回调地址")}', name:'callbackUrl', index:'a.callback_url', width:150, align:"left"},
		{header:'${text("应用key")}', name:'appKey', index:'a.app_key', width:150, align:"left"},
		{header:'${text("应用秘钥")}', name:'appSecretkey', index:'a.app_secretkey', width:150, align:"left"},
		{header:'${text("所属机构")}', name:'affiliation', index:'a.affiliation', width:150, align:"center", formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('admin_affiliation')}, val, '${text("未知")}', true);
		}},
		/*{header:'${text("接入方式")}', name:'access', index:'a.access', width:150, align:"center", formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('admin_access')}, val, '${text("未知")}', true);
		}},
		{header:'${text("返回属性")}', name:'returnAttribute', index:'a.return_attribute', width:150, align:"center", formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('admin_return_attribute')}, val, '${text("未知")}', true);
		}},
		{header:'${text("权限")}', name:'authority', index:'a.authority', width:150, align:"center", formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('sys_role_type')}, val, '${text("未知")}', true);
		}},
		*/{header:'${text("上下架")}', name:'appStatus', index:'a.app_status', width:150, align:"center", formatter: function(val, obj, row, act){
              //  return js.getDictLabel(${@DictUtils.getDictListJson('sys_on_off')}, val, '${text("未知")}', true);
				var s=row.appStatus;

				if(s=="0"){
						return '<input type="checkbox" id="a'+row.id+'" class="uiswitch" onclick="xx(\''+row.id+'\')"  checked >';
				}else {
					return '<input type="checkbox" id="a'+row.id+'" class="uiswitch" onclick="xx(\''+row.id+'\')"  unchecked>';
				}



			}}
            ,{header:'${text("是否推荐")}', name:'isRecommend', index:'a.is_recommend', width:150, align:"center", formatter: function(val, obj, row, act){
				//return js.getDictLabel(${@DictUtils.getDictListJson('admin_is_recommend')}, val, '${text("未知")}', true);

				var s=row.isRecommend;

				if(s=="0"){
					return '<input type="checkbox" id="b'+row.id+'" class="uiswitch" onclick="xx2(\''+row.id+'\')"  checked >';
				}else {
					return '<input type="checkbox" id="b'+row.id+'" class="uiswitch" onclick="xx2(\''+row.id+'\')"  unchecked>';
				}
			}},
		{header:'${text("操作")}', name:'actions', width:120, formatter: function(val, obj, row, act){
			var actions = [];
			<% if(hasPermi('sso:ssoApp:edit')){ %>
				actions.push('<a href="${ctx}/sso/ssoApp/form?id='+row.id+'" class="btnList" title="${text("编辑应用接入列表")}"><i class="fa fa-pencil"></i></a>&nbsp;');
				actions.push('<a href="${ctx}/sso/ssoApp/delete?id='+row.id+'" class="btnList" title="${text("删除应用接入列表")}" data-confirm="${text("确认要删除该应用接入列表吗？")}"><i class="fa fa-trash-o"></i></a>&nbsp;');
			<% } %>
			return actions.join('');
		}}
	],
	// 加载成功后执行事件
	ajaxSuccess: function(data){

	}
});

	function xx(rowid){
		var s1="#a"+rowid;

		var s=$(s1).prop('checked');
		if(s==true){
			$.ajax({
				url: '${ctx}/sso/ssoApp/changeStatus?flag='+s+"&id="+rowid,
				type: 'get',
				data: {},
				success: function (res) {

				}
			});
		}else {
			$.ajax({
				url: '${ctx}/sso/ssoApp/changeStatus?flag='+s+"&id="+rowid,
				type: 'get',
				data: {},
				success: function (res) {

				}
			});
		}
	}


function xx2(rowid){
	var s1="#b"+rowid;

	var s=$(s1).prop('checked');

	if(s==true){
		$.ajax({
			url: '${ctx}/sso/ssoApp/recommendStatus?flag='+s+"&id="+rowid,
			type: 'get',
			data: {},
			success: function (res) {

			}
		});
	}else {
		$.ajax({
			url: '${ctx}/sso/ssoApp/recommendStatus?flag='+s+"&id="+rowid,
			type: 'get',
			data: {},
			success: function (res) {
			}
		});
	}
}
</script>
