<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主题配置</title>
		<link rel="stylesheet" href="../../component/layui/css/layui.css" />
		<link rel="stylesheet" href="../../assets/css/pearone.css" />
		<style>
			body{
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div class="pearone-color">

			<div class="color-content">
				<ul id="theme"></ul>
			</div>
		</div>
	
		<form class="layui-form" style="bottom: 0px!important;position: absolute;margin-bottom: 0px;">


			<div class="layui-row layui-col-space25">
				<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
					多标签：<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">

				</div>
				<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
					多菜单：<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="system" lay-text="开启|关闭">

				</div>
			</div>
			<div class="layui-row layui-col-space25">
				<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
					显示脚：<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="footer" lay-text="开启|关闭">

				</div>
				<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
					预留项：<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="footeawr" lay-text="开启|关闭">
				
				</div>
			</div>
            <br>
			<div class="layui-form-item">
				选项卡：
				<input type="radio" name="sex" lay-filter="radioTest" value="0" title="圆角" checked>

				<input type="radio" name="sex" lay-filter="radioTest" value="1" title="方形">

				<input type="radio" name="sex" lay-filter="radioTest" value="2" title="椭圆">

			</div>


		</form>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../modules/lay-config.js"></script>
		<script>
			//JavaScript代码区域
			layui.use(['element', 'jquery', 'pearone', 'layer', 'notice', 'form'], function() {
				var element = layui.element,
					$ = layui.jquery,
					pearone = layui.pearone,
					layer = layui.layer,
					notice = layui.notice,
					form = layui.form;


				var html = pearone.buildBgColorHtml();

				$("#theme").append(html);

				//监听指定开关
				form.on('switch(switchTest)', function(data) {

					if (this.checked) {
						window.parent.pearone.initTab(true);
					} else {
						window.parent.pearone.initTab(false);
					}

				});

				form.on('switch(system)', function(data) {

					if (this.checked) {
						window.parent.pearone.initMenu(pearone.config('menuInfo'));
					} else {
						window.parent.pearone.initMenuPlus(pearone.config('menuInfo'));
					}

				});

				form.on('switch(footer)', function(data) {

					if (this.checked) {
						window.parent.pearone.initFooter(true);
					} else {
						window.parent.pearone.initFooter(false);
					}

				});

				form.on('radio(radioTest)', function(data) {

					console.log("我的天");

					var className = "";

					if (data.value == "0") {

						className = "layui-tab-button";

					} else if (data.value == "1") {

						className = "layui-tab-topline";

					} else if (data.value == "2") {

						className = "layui-tab-circular";

					}

					$(".layui-tab", parent.document).removeClass("layui-tab-button");
					$(".layui-tab", parent.document).removeClass("layui-tab-topline");
					$(".layui-tab", parent.document).removeClass("layui-tab-circular");
					$(".layui-tab", parent.document).addClass(className);
				});
			});
		</script>
	</body>
</html>
