crm/app/sys/view/customer_setting/module_subscribe.html

{extend name="public/layout" /} {block name="title"}客户预约设置{/block} {block name="body"}
<style type="text/css">
	html,
	body {
		display: block;
		width: 1300px;
		height: auto;
		overflow-y: hidden;
		overflow-x: auto;
		width: calc(100% - 6px);
	}

	.lay-main {
		background-color: #EEEEEE;
		width: 100%;
		height: 100%;
	}

	.flex {
		display: flex;
	}

	.lay-leftBox {
		width: 400px;
		height: calc(100vh - 35px);
		background-color: #fff;
		margin: 10px 13px 10px;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.lay-rightBox {
		width: calc(100% - 400px);
		height: calc(100vh - 35px);
		background-color: #fff;
		margin-top: 10px;
		margin-left: 0px;
		box-sizing: border-box;
		padding: 10px;
	}

	.lay-leftTips {
		width: 100%;
		height: 18px;
		line-height: 18px;
		border-left: 5px solid #249EFB;
		box-sizing: border-box;
		padding-left: 6px;
	}

	.lay-rightTips {
		width: 100%;
		height: 20px;
		display: flex;
		align-items: center;
	}

	.labelIcon {
		width: 5px;
		height: 18px;
		border-radius: 2px;
		background-color: #249EFB;
	}

	.valid {
		color: #249EFB;
		font-weight: 700;
	}

	.ml6 {
		margin-left: 6px;
	}

	.layui-border-blue,
	.layui-border-blue:hover {
		color: #249EFB;
		border-color: #249EFB;
	}

	.visitlistBox {
		width: 100%;
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.visitItemBox {
		flex: 1;
	}

	.layui-border-black {
		margin: 0px 5px 6px !important;
		position: relative;
	}

	.lay-close {
		position: absolute;
		top: -15px;
		right: -10px;
		z-index: 99 !important;
	}

	.fieldBox {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 10px 0px;
		height: calc(98% - 50px);
	}

	.fieldLeftBox {
		width: 60%;
		box-sizing: border-box;
	}

	.fieldRightBox {
		flex: 1;
		margin-left: 10px;
		box-sizing: border-box;
	}

	.fieldTitle {
		font-size: 13px;
		color: #333333;
		font-weight: 600;
		line-height: 25px;
	}

	.fieldViewBox {
		border: 1px solid #EEEEEE;
		padding: 5px;
		border-radius: 4px;
		box-sizing: border-box;
		height: 550px;
		overflow: auto;
	}

	/*里面的代码可以根据自己需求去进行更改*/
	/* 设置滚动条的样式 */
	.fieldViewBox::-webkit-scrollbar {
		width: 4px;
	}

	/* 滚动槽 */
	.fieldViewBox::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 0px;
	}

	/* 滚动条滑块 */
	.fieldViewBox::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: #cccccc;
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}

	.searchBox {
		width: 100%;
		height: 40px;
		border: 1px solid #EEEEEE;
		border-radius: 4px;
		box-sizing: border-box;
		padding: 0px 10px;
		display: flex;
		align-items: center;
	}

	.searchBox>input {
		flex: 1;
		height: 100%;
		margin-left: 10px;
		outline: none;
		border: none;
	}

	.selectFieldBox {
		width: 100%;
		height: auto;
		overflow: hidden;
		box-sizing: border-box;
		padding: 10px 0px 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.layui-icon-ok:before {
		font-size: 12px !important;
	}

	.layui-form-checkbox {
		margin-bottom: 5px;
	}

	.sortItemBox {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.sortLeft>img {
		width: 16px;
	}

	.sortRight>img {
		width: 16px;
	}

	.moveElement {
		cursor: move;
	}

	.fixed-btn {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 10px;
		display: flex;
		justify-content: flex-end;
		border-top: 1px solid #cccccc;
		margin-top: 120px;
	}

	.lay-tab {
		width: 100%;
		height: 40px;
		border-bottom: 1px solid #cccccc;
		display: flex;
		align-items: center;
	}

	.lay-tab>div {
		width: 110px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.lay-active {
		color: #249EFB;
		font-weight: 700;
		position: relative;
	}

	.lay-active::after {
		content: " ";
		width: 30px;
		height: 4px;
		background-color: #249EFB;
		border-radius: 2px;
		position: absolute;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
	}

	.layleft-content {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
	}

	.layleft-switch {
		padding: 15px 10px;
		display: flex;
		align-items: center;
	}

	.layleft-switch>span {
		margin-right: 10px;
	}

	.layui-form-switch {
		margin-top: 0px;
	}

	.allCheckedField {
		margin-top: 10px;
	}

	.fieldItem {
		width: 50%;
	}

	.fixed-btn {
		width: 30% !important;
		padding: 0 !important;
		margin-top: 0 !important;
		border-top: 0 !important;
	}

	.fieldViewBox {
		height: 94% !important;
	}

	.class_disabled .layui-form-checkbox[lay-skin=primary] i {
		border-color: #c2c2c2 !important;
		background-color: #c2c2c2 !important;
	}

	.subscribeCustom {
		width: 100%;
		height: 700px;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		margin: 15px 0px 0px;
	}

	/*里面的代码可以根据自己需求去进行更改*/
	/* 设置滚动条的样式 */
	.subscribeCustom::-webkit-scrollbar {
		width: 2px;
	}

	/* 滚动槽 */
	.subscribeCustom::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 0px;
	}

	/* 滚动条滑块 */
	.subscribeCustom::-webkit-scrollbar-thumb {
		border-radius: 1px;
		background: #cccccc;
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}

	.leftHeader {
		width: 100%;
		height: 40px;
		background-color: #71c4ff;
		color: #fff;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 10px;
	}

	.leftHeaderText {
		width: calc(100% - 80px);
		display: flex;
		align-items: center;
	}

	.rightHeaderIcon {
		width: 80px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.leftHeaderTab {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
	}

	.leftHeaderTab>div {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.leftActive {
		color: #249EFB;
		font-weight: 600;
		position: relative;
	}

	.leftActive::after {
		content: " ";
		width: 100%;
		height: 4px;
		background-color: #249EFB;
		border-radius: 2px;
		position: absolute;
		bottom: 0px;
		left: 0px;
	}

	.switchTabBox {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		overflow-x: auto;
		flex-wrap: nowrap;
		justify-content: space-around;
	}

	.switchTabBox>div {
		flex: none;
		display: inline-block;
		padding: 4px 15px;
		background-color: #d4e4ed;
		color: #384855;
		font-size: 13px;
		border-radius: 3px;
		margin: 0px 5px;
	}

	.switchActive {
		background-color: #249EFB !important;
		color: #fff !important;
	}

	.dateItemBox {
		width: 100%;
		height: 40px;
		font-size: 13px;
		display: flex;
		box-sizing: border-box;
		border-bottom: 1px solid #e7f1f7;
	}

	.dlabel {
		width: 150px;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.dContent {
		width: calc(100% - 150px);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.dContent>span {
		margin-right: 5px;
	}

	.dlineIcon {
		width: 40px;
		height: 30px;
		border: 1px solid #d4e4ed;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dtips {
		color: #9db6cf;
	}

	.textareaBox {
		width: 100%;
		background-color: #f0f4f7;
		outline: none;
		border: none;
		box-sizing: border-box;
		padding: 5px;
		margin-top: 20px;
		font-size: 13px;
		resize: none;
	}

	.leftSubmitBtn {
		width: 95%;
		height: 40px;
		background-color: #249EFB;
		color: #fff;
		text-align: center;
		line-height: 40px;
		margin: 20px auto 20px;
	}

	.leftProgressBox {
		width: 100%;
	}

	.leftProgressHeader {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #249EFB;
		font-size: 13px;
		box-sizing: border-box;
		padding: 0px 10px;
		margin-bottom: 20px;
	}

	.leftpItemBox {
		width: 100%;
		height: auto;
		overflow: hidden;
		position: relative;
		padding: 0px 10px;
	}

	.circle {
		width: 10px;
		height: 10px;
		background-color: #d8eeff;
		position: absolute;
		left: 0px;
		top: 3px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9;
	}

	.circle1 {
		width: 7px;
		height: 7px;
		background-color: #249EFB;
		border-radius: 50%;
	}

	.leftlinep1 {
		width: 1px;
		height: 100%;
		border-left: 1px dotted #b6cade;
		position: absolute;
		left: 4px;
		top: 8px;
	}

	.leftpBoxMsg {
		width: 80%;
		height: 60px;
		background-color: #fff;
		box-shadow: 0 3px 5px 0 rgb(36 158 251 / 17%);
		margin: 20px 0px 20px 20px;
		border-left: 3px solid #249EFB;
		border-top: 0.5px solid #249EFB;
		border-radius: 6px;
		box-sizing: border-box;
		padding: 5px;
	}

	.leftpBoxtop {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 12px;
		position: relative;
	}

	.leftpBoxBottom {
		width: 100%;
		font-size: 12px;
		margin-top: 10px;
		position: relative;
	}

	.visitBoxp {
		position: absolute;
		padding: 2px 5px;
		background-color: #f0f4f7;
		color: #249EFB;
		border-radius: 10px;
		right: 0px;
		top: 0px;
		font-size: 12px;
	}

	.circle3 {
		width: 7px;
		height: 7px;
		background-color: #249EFB;
		border-radius: 50%;
		position: absolute;
		left: 1px;
		top: 55%;
		transform: translateY(-50%);
	}

	.ml5 {
		margin-left: 5px;
	}

	.leftCustomField {
		width: 100%;
		height: auto;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0px 0px 10px;
	}

	.layinputtext {
		width: 100%;
		height: 40px;
		border-bottom: 1px solid #DEEAF1;
		display: flex;
		font-size: 13px;
	}

	.textlabel {
		width: 150px;
		height: 100%;
		line-height: 40px;
	}

	.textinput {
		width: calc(100% - 150px);
		height: 100%;
		line-height: 40px;
	}

	.radiocontent {
		width: calc(100% - 150px);
		height: 100%;
		display: flex;
	}

	.radiocontent>div {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.gradecontent {
		width: calc(100% - 150px);
		height: 100%;
		display: flex;
		align-items: center;
	}

	.gradecontent>span {
		flex: none;
		display: inline-block;
		padding: 2px 8px;
		height: 18px;
		border: 1px solid #9DB6CF;
		font-size: 13px;
		margin-right: 5px;
	}

	.selectContent {
		width: calc(100% - 150px);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.selectContent>img {
		width: 8px;
	}

	.dateContent {
		width: calc(100% - 150px);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dateContent>img {
		width: 14px;
	}

	.leftlineMiddle {
		width: 100%;
		height: 10px;
		background-color: #f0f4f7;
		margin: 30px 0px 10px;
	}
	.checkboxStyle {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 10px 0px;
	}
	.layui-form-checkbox span {
		font-size: 13px;
	}
	.layui-form-checkbox[lay-skin=primary] {
		padding-left: 22px;
	}
	.checkboxStyle .layui-form-checkbox > i {
		border-radius: 50%;
	}
	.layui-form-checked[lay-skin=primary] i {
		border-color: #249EFB;
		background-color: #249EFB;
	}
</style>

<body>
	<div class="lay-main">
		<form class="layui-form flex" action="">
			<div class="lay-leftBox">
				<div class="lay-tab">
					<div class="lay-active" data-index="0" data-type="subscribeHD">活动预约设置</div>
					<div data-index="1" data-type="subscribeDD">到店预约设置</div>
					<div data-index="2" data-type="subscribeLF">量房预约设置</div>
				</div>
				<div class="layleft-content">
					<div class="lay-leftTips">显示设置</div>
					<div class="">
						<div class="layleft-switch">
							<span>开启/关闭</span>
							<input type="checkbox" name="switch" lay-skin="switch" {if $hd_switch}checked{/if}>
						</div>
						<div class="layleft-switch layui-hide">
							<span>开启/关闭</span>
							<input type="checkbox" name="switch" lay-skin="switch" {if $dd_switch}checked{/if}>
						</div>
						<div class="layleft-switch layui-hide">
							<span>开启/关闭</span>
							<input type="checkbox" name="switch" lay-skin="switch" {if $lf_switch}checked{/if}>
						</div>
					</div>
					<div class="lay-leftTips">手机端示例</div>
					<div class="subscribeCustom">
						<div class="leftHeader">
							<div class="leftHeaderText">李逍遥 | XXX小区 | 200㎡</div>
							<div class="rightHeaderIcon">
								<img src="__STATIC__/img/collect.png" width="16px" alt="">
							</div>
						</div>
						<div class="leftHeaderTab">
							<div>客户跟踪</div>
							<div>信息完善</div>
							<div>客户转化</div>
							<div class="leftActive">客户预约</div>
						</div>
						<div class="switchTabBox">
							<div class="switchActive">活动预约</div>
							<div>到店预约</div>
							<div>量房预约</div>
						</div>
						<div class="allElement">
							<div class="hdElement">
								<div class="dateItemBox">
									<div class="dlabel">选择活动</div>
									<div class="dContent">
										<span style="color: #999999;font-size: 12px;">请选择外场活动</span>
									</div>
								</div>
								<div class="dateItemBox">
									<div class="dlabel">预计到场时间</div>
									<div class="dContent">
										<span>2022-12-12</span>
										<img src="__STATIC__/img/rili.png" width="14px" alt="">
									</div>
								</div>
							</div>
							<div class="ddElement layui-hide">
								<div class="checkboxStyle">
									<input type="checkbox" class="roundCheckbox" title="今天" lay-skin="primary" checked disabled>
									<input type="checkbox" class="roundCheckbox" title="明天" lay-skin="primary" disabled>
									<input type="checkbox" class="roundCheckbox" title="本周六" lay-skin="primary" disabled>
									<input type="checkbox" class="roundCheckbox" title="本周日" lay-skin="primary" disabled>
									<input type="checkbox" class="roundCheckbox" title="其他时间" lay-skin="primary" disabled>
								</div>
								<div class="dateItemBox">
									<div class="dlabel">选择活动</div>
									<div class="dContent">
										<span style="color: #999999;font-size: 12px;">请选择内场活动</span>
									</div>
								</div>
								<div class="dateItemBox">
									<div class="dlabel">预计到店时间</div>
									<div class="dContent">
										<span>2022-12-12</span>
										<img src="__STATIC__/img/rili.png" width="14px" alt="">
									</div>
								</div>
							</div>
							<div class="lfElement layui-hide">
								<div class="checkboxStyle">
									<input type="checkbox" title="今天" lay-skin="primary" checked disabled>
									<input type="checkbox" title="明天" lay-skin="primary" disabled>
									<input type="checkbox" title="本周六" lay-skin="primary" disabled>
									<input type="checkbox" title="本周日" lay-skin="primary" disabled>
									<input type="checkbox" title="其他时间" lay-skin="primary" disabled>
								</div>
								<div class="dateItemBox">
									<div class="dlabel">请选择预约时间</div>
									<div class="dContent">
										<span>2022-12-12</span>
										<img src="__STATIC__/img/rili.png" width="14px" alt="">
									</div>
								</div>
							</div>
						</div>
						<div class="dateItemBox">
							<div class="dlabel">指派人员<span class="dtips ml5">(可多选)</span></div>
							<div class="dContent">
								<img src="__STATIC__/img/cjtimg.png" width="8px" alt="">
							</div>
						</div>
						<div class="leftCustomField"></div>
						<textarea class="textareaBox" rows="5" readonly placeholder="请输入备注信息"></textarea>
						<div class="leftSubmitBtn">提交预约</div>
						<div class="leftlineMiddle"></div>
						<div class="leftProgressBox">
							<div class="leftProgressHeader">
								<span>预约记录</span>
								<span>共预约3次</span>
							</div>
							<div class="leftpItemBox">
								<div class="circle">
									<div class="circle1"></div>
								</div>
								<div class="ml5">2022-12-02</div>
								<div class="leftlinep1"></div>
								<div class="leftpBoxMsg">
									<div class="leftpBoxtop">
										<span class="ml5">李XX</span>
										<span class="ml5">11:50:12</span>
									</div>
									<div class="leftpBoxBottom">这是一段预约记录<span class="visitBoxp">取消预约</span></div>
									<div class="circle3"></div>
								</div>
							</div>
							<div class="leftpItemBox">
								<div class="circle">
									<div class="circle1"></div>
								</div>
								<div class="ml5">2022-12-02</div>
								<div class="leftlinep1"></div>
								<div class="leftpBoxMsg">
									<div class="leftpBoxtop">
										<span class="ml5">李XX</span>
										<span class="ml5">11:24:12</span>
									</div>
									<div class="leftpBoxBottom">这是一段预约记录<span class="visitBoxp">取消预约</span></div>
									<div class="circle3"></div>
								</div>
							</div>
							<div class="leftpItemBox">
								<div class="circle">
									<div class="circle1"></div>
								</div>
								<div class="ml5">2022-12-02</div>
								<div class="leftlinep1"></div>
								<div class="leftpBoxMsg">
									<div class="leftpBoxtop">
										<span class="ml5">李XX</span>
										<span class="ml5">11:12:12</span>
									</div>
									<div class="leftpBoxBottom">这是一段预约记录<span class="visitBoxp">取消预约</span></div>
									<div class="circle3"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="lay-rightBox">
				<div class="lay-rightTips">
					<div class="labelIcon"></div>
					<span class="ml6">跟进字段设置</span>
				</div>
				<div class="fieldBox">
					<div class="fieldLeftBox">
						<div class="fieldTitle" id="visitAllField"></div>
						<div class="fieldViewBox">
							<div class="searchBox">
								<i class="layui-icon layui-icon-search"></i>
								<input type="text" id="allFieldInput" autocomplete="off">
							</div>
							<div class="allCheckedField">
								<input lay-filter="checkedAll" name="all" title="全选" type="checkbox" lay-skin="primary">
							</div>
							<div class="selectFieldBox">

							</div>
						</div>
					</div>
					<div class="fieldRightBox">
						<div class="fieldTitle" id="checkedFieldEl"></div>
						<div class="fieldViewBox" id="scrollTargetEl">
							<div class="searchBox">
								<i class="layui-icon layui-icon-search"></i>
								<input type="text" id="checkedSearchEl" autocomplete="off">
							</div>
							<div class="checkedFieldBox" id="checkedFieldBox">

							</div>
						</div>
					</div>
				</div>
				<div class="lay-default" style="overflow: hidden;">
					<div class="layui-btn layui-btn-primary" id="recoveryDefault" style="float:left;">恢复默认</div>
					<div class="fixed-btn" style="float:right;">
						<div class="layui-btn layui-btn-primary">取消</div>
						<div class="layui-btn layui-btn-normal" lay-submit lay-filter="layuiadmin-app-form-submit">确认
						</div>
					</div>
				</div>

			</div>

		</form>
	</div>
</body>
{/block} {block name="js"}
<script type="text/javascript" src="__STATIC__/js/Sortable.js"></script>
<script>
	layui.config({
		base: '__LAYUI__/' //静态资源所在路径
		,
		urlbase: '/sys'
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'table', 'layedit', 'element', 'upload'], function () {
		var $ = layui.$,
			table = layui.table,
			element = layui.element,
			upload = layui.upload,
			form = layui.form,
			rType = 'subscribeHD',
			visitFieldAll = [],
			checkedArr = [],
			defaultArr = [];
		var rTypeIndex = 0;
		form.render();

		function setExampleHtml(dataArr) {
			let htmls = dataArr.map(v => {
				if (v.type == 1) {
					return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="textinput">请输入</div>
                  </div>`;
				} else if (v.type == 2) {
					return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="textinput">请输入</div>
                  </div>`;
				} else if (v.keyname == 'level') {
					return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="gradecontent">
                      ${v.select.map(o => {
						return `<span>${o.name}类</span>`;
					}).join('')}
                    </div>
                  </div>`;
				} else if (v.type == 3 && v.select.length == 2) {
					return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="radiocontent">
                      ${v.select.map(o => {
						return `<div>
                    <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" alt="">
                      <span style="margin-left: 5px;">${o.name}</span>
                    </div>`;
					}).join('')}
                    </div>
                  </div>`;
				} else if (v.type == 3 && v.select.length > 2 && v.keyname != 'level') {
					return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="selectContent">
                      <span>请选择</span>
                      <img src="__STATIC__/img/cjtimg.png" alt="">
                    </div>
                  </div>`;
				} else if (v.type == 4) {
					return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="selectContent">
                      <span>请选择</span>
                      <img src="__STATIC__/img/cjtimg.png" alt="">
                    </div>
                  </div>`;
				} else if (v.type == 5) {
					return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="dateContent">
                      <span>请选择</span>
                      <img src="__STATIC__/img/rili.png" alt="">
                    </div>
                  </div>`;
				} else if (v.type == 6) {
					return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="dateContent">
                      <span></span>
                      <img src="__STATIC__/img/addimg.png" alt="">
                    </div>
                  </div>`;
				}
			}).join('');
			$('.leftCustomField').html(htmls);
		}

		$('.lay-tab div').click(function () {
			rType = $(this).prop('dataset').type;
			let index = parseInt($(this).prop('dataset').index);
			rTypeIndex = index;
			$(this).addClass('lay-active').siblings().removeClass("lay-active");
			$('.layleft-switch').eq(index).removeClass('layui-hide').siblings().addClass('layui-hide');
			$('.imgview').children().eq(index).removeClass('layui-hide').siblings().addClass('layui-hide');
			getVisitFiled();
			$('.switchTabBox').children().eq(index).addClass('switchActive').siblings().removeClass('switchActive');
			$('.allElement').children().eq(index).removeClass('layui-hide').siblings().addClass('layui-hide');
		})

		getVisitFiled();
		function getVisitFiled() {
			$.ajax({
				type: "get",
				url: "{:url('customerSetting/moduleField')}",
				data: {
					type: rType
				},
				dataType: 'json',
				success: function (res) {
					if (res.code == 0) {
						visitFieldAll = res.all;
						checkedArr = res.checked;
						defaultArr = res.default;
						renderVisitFieldHtmls(visitFieldAll);
						renderCheckedFieldHtmls(checkedArr);
						setExampleHtml(checkedArr);
					}
				}
			})
		}

		function renderVisitFieldHtmls(fields) {
			$('#visitAllField').text(`可选择字段(共${fields.length}个）`);
			let htmls = fields.map((item, index) => {
				return `<div class="fieldItem ${item.other_checked == 1 ? 'class_disabled' : ''}"><input lay-filter="checkboxs" class="visitFieldElement${item.id}" type="checkbox" ${(returnCheckedStatus(item.id)) ? 'checked' : ''} ${item.other_checked == 1 ? 'disabled' : ''} name="visit" value="${item.id}" title="${item.name}" lay-skin="primary"></div>`;
			}).join('');
			$('.selectFieldBox').html(htmls);
			setTimeout(() => {
				form.render();

				form.on('checkbox(checkboxs)', function (data) {
					if (data.elem.checked) {
						let OneValue = [];
						$(`input:checkbox[name='visit']:checked`).each(function (i) {
							OneValue.push({ id: $(this).val(), name: $(this).prop('title') });
						});
						let itemArr = [];
						OneValue.forEach(k => {
							let item = checkedArr.filter(o => o.id == k.id);
							if (!item.length) {
								itemArr.push(k)
							}
						})
						checkedArr.push(...itemArr);
						renderCheckedFieldHtmls(checkedArr);
					} else {
						checkedArr.forEach((y, i) => {
							if (data.value == y.id) {
								checkedArr.splice(i, 1);
								renderCheckedFieldHtmls(checkedArr);
								return;
							}
						})
					}
				})

				form.on('checkbox(checkedAll)', function (data) {
					if (data.elem.checked) {
						$(`input:checkbox[name='visit']`).each(function (i) {
							$(this).prop('checked', true);
						});
						checkedArr = visitFieldAll;
						renderCheckedFieldHtmls(checkedArr);
						form.render();
					} else {
						checkedArr = [];
						renderCheckedFieldHtmls(checkedArr);
						$(`input:checkbox[name='visit']:checked`).each(function (i) {
							$(this).prop('checked', false);
						});
						form.render();
					}
				})
			}, 600);
		}

		function renderCheckedFieldHtmls(checkedFields) {
			$('#checkedFieldEl').text(`已选择字段(共${checkedFields.length}个）`);
			let htmls = checkedFields.map((item, index) => {
				return `<div data-id="${item.id}" class="sortItemBox">
	                  <div data-id="${item.id}" class="sortLeft">
	                    <img data-id="${item.id}" class="moveElement" src="/static/img/move.png" alt="">
	                    <span data-id="${item.id}" class="getSortName">${item.name}</span>
	                  </div>
	                  <div data-id="${item.id}" class="sortRight">
	                    <img data-id="${item.id}" src="/static/img/sTop.png" alt="">
	                    <img data-id="${item.id}" src="/static/img/sDel.png" class="checkedDel" alt="">
	                  </div>
	                </div>`;
			}).join('');
			$('.checkedFieldBox').html(htmls);
			setTimeout(() => {
				new Sortable($('.checkedFieldBox')[0], {
					handle: '.moveElement', // handle's class
					animation: 150
				});

				$('.sortRight').click(function () {
					var ops1 = {
						draggable: ".sortItemBox",
						onChoose: function (evt) {
							var index = evt.oldIndex;
							$("#checkedFieldBox .sortItemBox").eq(index).insertBefore($("#checkedFieldBox .sortItemBox").eq(0));
						}
					};
					var sortable1 = Sortable.create($('.checkedFieldBox')[0], ops1);
				})

				$('.checkedDel').click(function () {
					let id = $(this).prop('dataset').id;
					$(this).parent().parent().remove();
					checkedArr.forEach((item, index) => {
						if (item.id == id) {
							$(`.visitFieldElement${id}`).removeAttr('checked');
							checkedArr.splice(index, 1);
							form.render();
							return;
						}
					})
				})
			}, 600);
		}

		function returnCheckedStatus(vid) {
			let ids = checkedArr.map(v => parseInt(v.id));
			return ids.includes(parseInt(vid));
		}

		$('#checkedSearchEl').on('keyup', function (e) {
			let val = $(this).val();
			if (e.keyCode == 13 && val) {
				let eleArr = $('.getSortName');
				eleArr.each(function (index) {
					let name = $(this).text();
					if (name === val || name.indexOf(val) > -1) {
						$('#scrollTargetEl').scrollTop((parseInt(index) + 1) * 40);
						return;
					}
				})
			}
		});

		$('#allFieldInput').on('keyup', function (e) {
			let val = $(this).val();
			if (e.keyCode == 13) {
				if (val) {
					let itemArr = visitFieldAll.filter(item => {
						if (val == item.name || item.name.search(val) > -1) {
							return item;
						}
					})
					renderVisitFieldHtmls(itemArr);
				} else {
					renderVisitFieldHtmls(visitFieldAll);
				}
			}
		})

		$('#recoveryDefault').click(function () {
			layer.confirm('确定要恢复默认设置吗?', { title: '提示' }, function (index) {
				checkedArr = defaultArr;
				renderVisitFieldHtmls(visitFieldAll);
				renderCheckedFieldHtmls(checkedArr);
				layer.close(index);
			});
		})

		/* 监听提交 */
		form.on('submit(layuiadmin-app-form-submit)', function (obj) {
			var switchoff = $('.layleft-switch').eq(rTypeIndex).find('input').prop('checked') == true ? '1' : '0';
			let getCheckedField = $('.sortItemBox');
			let itemArr = [];
			let subtype = 'HD';
			getCheckedField.each(function (i) {
				let id = $(this).prop('dataset').id;
				itemArr.push({ id: id, sort: i + 1 });
			})
			if (rType == 'subscribeHD') {
				subtype = 'HD';
			} else if (rType == 'subscribeDD') {
				subtype = 'DD';
			} else if (rType == 'subscribeLF') {
				subtype = 'LF';
			}
			$.ajax({
				url: '{:url("customerSetting/moduleSubscribe")}',
				type: 'post',
				data: {
					type: subtype,
					content: itemArr,
					switch: switchoff
				},
				dataType: 'json',
				success: function (res) {
					if (res.code === 0) {
						layer.msg(res.msg, { anim: 0 });
						setTimeout(() => {
							window.parent.reloadFunc();
						}, 1000)
					} else {
						layer.msg(res.msg, { anim: 6 });
					}
				}
			});
			return false;
		});



	});


</script>
{/block}