crm/app/sys/view/talkskill/chosen_edit.html

{extend name="public/layout" /} {block name="title"}话术编辑{/block} {block name="body"}
<style type="text/css">
	html,
	body {
		display: block;
		min-width: 100%;
		background: #fff;
	}

	.layui-icon {
		font-size: 20px !important;
		line-height: 38px;
	}

	.layui-tab {
		padding: 0px;
		height: 100%;
	}

	.layui-tab-card {
		border: none;
		box-shadow: none;
	}

	.upload-img .area i {
		font-size: 50px;
		color: #009688;
	}


	/*附件上传样式*/
	.imageDiv {
		display: inline-block;
		width: 140px;
		height: 125px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px dashed darkgray;
		background: #f8f8f8;
		position: relative;
		overflow: hidden;
		margin-left: 5px;
		margin-bottom: 3px;
	}

	.imageDiv div {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		background-color: #e6e6e600;
	}

	.imageDiv div i {
		display: none;
		font-size: 31px;
		position: absolute;
		top: 37%;
		left: 40%;
	}

	.imageDiv div:hover {
		background-color: #e6e6e680;
	}

	.imageDiv div:hover i {
		display: block;
		cursor: pointer;
	}

	.imgs {
		width: 86%;
		float: left;
		margin-top: -1%;
		margin-left: -1%;
	}

	.labels {
		display: block;
		float: left;
		height: 4%;
	}

	.text-detail {
		margin-top: 40px;
		text-align: center;
	}

	.text-detail>span {
		font-size: 40px;
	}

	.addImages {
		display: inline-block;
		width: 140px;
		height: 125px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px dashed darkgray;
		background: #f8f8f8;
		position: relative;
		overflow: hidden;
		margin-left: 5px;
		margin-bottom: 3px;
	}

	/*问题图片样式*/
	.imgDiv {
		display: inline-block;
		width: 120px;
		height: 105px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px dashed darkgray;
		background: #f8f8f8;
		position: relative;
		overflow: hidden;
		margin-left: 5px;
		margin-bottom: 3px;
	}

	.imgDiv div i {
		position: absolute;
		bottom: 71px;
		right: 0px;
		z-index: 2;
		padding: 0 !important;
		margin: 0;
	}

	#uploadimg {
		position: absolute;
		bottom: 0px;
		right: 8px;
		z-index: 2;
		padding: 0 !important;
		margin: 0;
	}

	.xm-label-block {
		background-color: #249efb !important;
	}

	.layui-tab-card>.layui-tab-title {
		background-color: #fff;
	}

	.layui-tab-card>.layui-tab-title .layui-this {
		background-color: #249EFB !important;
		color: #fff;
	}

	.layui-tab-card>.layui-tab-title .layui-this:after {
		border-bottom: none;
		border: none;
	}

	.layui-tab-title li {
		background-color: #F2F2F2;
		margin: 0px 5px !important;
	}

	xm-select {
		width: 99% !important;
		min-height: 40px !important;
		line-height: 40px !important;
	}

	xm-select .xm-body .xm-option .xm-option-icon {
		display: none !important;
	}

	/* .xm-icon-close:before {
		display: none !important;
	} */
	xm-select>.xm-label.auto-row .xm-label-block>span {
		width: auto !important;
	}

	xm-select>.xm-label .xm-label-block {
		margin: 4px 5px 2px 0 !important;
	}

	.font18 {
		font-size: 16px;
	}

	.layui-form-item .layui-input-inline {
		width: 100% !important;
		margin-right: 0;
	}

	.layui-form-select {
		width: 100%;
	}

	.layui-tab {
		margin: 0;
	}

	.mdt20 {
		margin-top: 20px
	}

	.layui-form-label {
		line-height: 40px !important;
		width: auto;
		padding: 0;
	}

	.layui-select-title input {
		height: 40px !important;
		line-height: 40px;
	}

	.mdb0 {
		margin-bottom: 0 !important;
	}

	#isshowlabel,
	.cate01,
	.cate02,
	.cate03 {
		display: none;
	}

	.borxian {
		width: 6px;
		height: 20px;
		background: #28A1FF;
		border-radius: 2px 2px 2px 2px;
		display: inline-block;
		margin-right: 5px;
		vertical-align: -16%;
	}

	.layui-input-block {
		margin-left: 0;
	}

	.word_list_box {
		width: 100%;
		height: 300px;
		border: 1px solid #EEEEEE;
		margin-bottom: 20px;
		box-sizing: border-box;
		padding: 10px;
		overflow-y: auto;
	}

	/* 设置滚动条的样式 */
	.word_list_box::-webkit-scrollbar {
		width: 2px;
	}

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

	/* 滚动条滑块 */
	.word_list_box::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}

	.float_left {
		float: left;
	}

	.mtcelter {
		height: 100px;
		line-height: 100px;
		width: 80px;
	}

	.flex-row {
		display: flex;
	}

	.flex-sub {
		flex: 1;
	}

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

	.left_ask_avatar {
		width: 34px;
		height: 34px;
		float: left;
	}

	.left_ask_avatar>img {
		width: 100%;
		height: 100%;
	}

	.left_ask_content {
		float: left;
		max-width: 80%;
		min-height: 34px;
		background-color: #EFEFEF;
		margin-left: 10px;
		box-sizing: border-box;
		padding: 8px 5px;
		display: flex;
		align-items: center;
		position: relative;
	}

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

	.right_answer_avatar {
		width: 34px;
		height: 34px;
		float: right;
	}

	.right_answer_avatar>img {
		width: 100%;
		height: 100%;
	}

	.right_answer_content {
		float: right;
		max-width: 80%;
		min-height: 34px;
		background-color: #EFEFEF;
		margin-right: 10px;
		box-sizing: border-box;
		padding: 8px 5px;
		display: flex;
		/* align-items: center; */
		justify-content: flex-end;
		background-color: #95EC6A;
		position: relative;
		flex-direction: column;
	}

	.lay-l-close {
		position: absolute;
		top: 50%;
		right: -30px;
		transform: translateY(-50%);
		color: red;
		cursor: pointer;
	}

	.lay-l-edit {
		position: absolute;
		top: 50%;
		right: -55px;
		transform: translateY(-50%);
		color: #249EFB;
		cursor: pointer;
	}

	.lay-r-close {
		position: absolute;
		top: 50%;
		left: -30px;
		transform: translateY(-50%);
		color: red;
		cursor: pointer;
	}

	.lay-r-edit {
		position: absolute;
		top: 50%;
		left: -55px;
		transform: translateY(-50%);
		color: #249EFB;
		cursor: pointer;
	}

	.noneData {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
	}
	#uploadimg,#edituploadimg {
		position: absolute;
		bottom: 0px;
		right: 8px;
		z-index: 2;
		padding: 0 !important;
		margin: 0;
	}

	.addimgDiv {
		display: inline-block;
		width: 60px;
		height: 52px;
		margin-right: 8px;
		margin-top: 10px;
		overflow: hidden;
		position: relative;
	}

	.addimgDiv img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.addimgDiv div i {
		position: absolute;
		right: -1px;
		top: -9px;
		z-index: 2;
		padding: 0 !important;
		margin: 0;
	}
	.answerbox{
		display: block;
		padding: 20px;
	}
	.answerbox textarea{
		display: block;
		width: 100%;
		height:150px;
		resize:none;
		border: 1px solid #e6e6e6;
		color: #333;
		padding: 6px 10px;
		box-sizing: border-box;
	}
	.editext{
		width: 410px;
		display: block;
		position: relative;
	}
</style>

<body>
	<form class="layui-form" id="admin" enctype="multipart/form-data">
		<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 15px;">
			<div class="layui-form-item" style="margin:0 auto; width:97%;">
				<div class="layui-tab layui-tab-card">
					<div class="layui-tab-content" style="padding:0;overflow: hidden;">
						<div class="layui-tab-item layui-show" style="width:63%;float:left;border-right: 1px dashed #ccc;">
							<p class="font18"><span class="borxian"></span>基础信息</p>
							<div style="width:95%;margin-top:20px">
								<div class="layui-form-item">
									<div class="layui-input-block">
										<input type="text" name="title" value="{$data.title}" placeholder="请输入标题" autocomplete="off"
											class="layui-input">
									</div>
								</div>
								<div class="word_list_box">
									<div class="noneData">话术内容展示</div>
								</div>
								<div class="layui-form-item flex-row">
									<div class="layui-input-block float_left flex-sub">
										<input type="text" placeholder="请输入问题" id="ask_content" autocomplete="off" class="layui-input">
									</div>
									<div class="layui-btn float_left" id="ask_upload" style="width: 80px;">上传</div>
								</div>
								<div class="layui-form-item layui-form-text flex-row">
									<div class="layui-input-block float_left flex-sub">
										<textarea style="resize:none;" id="answer_content" placeholder="请输入回答内容"
											class="layui-textarea"></textarea>
										<div class="layui-form-mid layui-word-aux" id="uploadimg"><i class="layui-icon">&#xe64a;</i></div>
									</div>
									<div class="layui-btn float_left mtcelter" id="answer_upload">上传</div>
								</div>
								<div style="margin-top: -10px;margin-bottom: 5px;"><i style="color: red;margin-right:5px;">*</i>建议上传封面图宽高比例1:1，图片大小不超过1M</div>
								<div class="layui-input-block" id="imgArray" style="display: none;"></div>
							</div>
						</div>
						<div style="width:34%;float:right;">
							<p class="font18"><span class="borxian"></span>设置场景</p>
							<div class="layui-form-item mdt20 mdb0">
								<label class="layui-form-label"><span style="color:red">*</span>所属场景</label>
								<p style="clear:both"></p>
								<div class="layui-input-inline">
									<select name="cate1" lay-filter="type" id="type" lay-verify="required">
										<option value="">请选择所属场景</option>
										{volist name="cate" id="t"}
										<option value="{$t.id}" id="{$t.id}" {if $t.id eq $data.cate1}selected{/if}>{$t.name}</option>
										{/volist}
									</select>
								</div>
							</div>
							<div class="layui-form-item mdt20 mdb0" id="isshowlabel">
								<label class="layui-form-label" style="line-height:33px !important; font-size: 14px;"><span
										style="color:red">*</span>二级分类 <span class="cate01">已选择<a id="dataCounts">0</a>个</span></label>
								<p style="clear:both"></p>
								<div class="layui-input-block">
									<div id="label"></div>
								</div>
							</div>
							<div class="layui-form-item mdt20 mdb0">
								<label class="layui-form-label" style="line-height:33px !important; font-size: 14px;">适用部门 <span
										class="cate02">已选择<a id="dataCounts1">0</a>个</span></label>
								<p style="clear:both"></p>
								<div class="layui-input-block">
									<div id="label1"></div>
								</div>
							</div>
							<div class="layui-form-item mdt20 mdb0">
								<label class="layui-form-label" style="line-height:33px !important; font-size: 14px;">房屋类型 <span
										class="cate03">已选择<a id="dataCounts2">0</a>个</span></label>
								<p style="clear:both"></p>
								<div class="layui-input-block">
									<div id="label2"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-form-item layui-hide">
				<input type="button" lay-submit lay-filter="talkskill-submit" id="talkskill-submit" value="确认添加">
				<input type="button" lay-submit lay-filter="talkskill-edit" id="talkskill-edit" value="确认编辑">
			</div>
		</div>
	</form>
</body>
{/block} {block name="js"}
<script src="__STATIC__/layui/layui/lay/modules/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script type="text/html" id="editanswerbox">
	 <div class="answerbox">
		<div class="editext">
			<textarea style="resize:none;"></textarea>
			<div class="layui-form-mid layui-word-aux" id="edituploadimg"><i class="layui-icon">&#xe64a;</i></div>
		</div>
		<div style="margin-top: 5px;"><i style="color: red;margin-right:5px;">*</i>建议上传封面图宽高比例1:1，图片大小不超过1M</div>
		<div class="layui-input-block" id="editimgArray" style="display:none;">

		</div>
	 </div>
</script>
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index'
	}).use(['index', 'form', 'upload'], function () {
		var $ = layui.$,
			upload = layui.upload,
			form = layui.form,
			images=[],
			files,
			wordlist = [],
			wordimgs = [],
			editimgarr=[];
		//话术添加
		var clickRepeatedly = false; //防止重复点击
		form.on('submit(talkskill-submit)', function (data) {
			if(clickRepeatedly == true) return false;
			clickRepeatedly = true;
			if (!wordlist.length) {
				layer.msg('请添加话术内容', {
					anim: 6, time: 800
				});
				clickRepeatedly = false;
				return;
			}
			var index = parent.layer.getFrameIndex(window.name);
			var formData = new FormData(data.form);
			var load = layer.load(1, {shade: [0.5, '#fff']});
			formData.delete('images_data');
			let t = 0; 
			wordlist.forEach((v, i) => {
				if (v.id) {
					formData.append(`content[${i}][type]`, v.type);
					formData.append(`content[${i}][content]`, v.content);
					formData.append(`content[${i}][id]`, v.id);
				} else {
					formData.append(`content[${i}][type]`, v.type);
					formData.append(`content[${i}][content]`, v.content)
				}
				if (v.type == 1) {
					if (wordimgs[t]) {
						formData.delete(`img_${i}[]`);
						formData.delete(`imgnew_${i}[]`);
						for (let j = 0; j < wordimgs[t].length; j++) {
							if(wordimgs[t][j].toString().substr(0, 10) == 'Talkskill/'){
								formData.append(`img_${i}[]`, wordimgs[t][j]);
							}else{
								formData.append(`imgnew_${i}[]`, wordimgs[t][j]);
							}
							
						}
					}else if (editimgarr[t]) {
						formData.delete(`imgnew_${i}[]`);
						if (editimgarr[t]) {
							for (let j = 0; j < editimgarr[t].length; j++) {
								formData.append(`imgnew_${i}[]`, editimgarr[t][j]);
							}
						}
					}
					t++;
				}

			})
			formData.append("id", "{$data.id}")
			$.ajax({
				url: '{:url("talkskill/chosen_edit")}',
				type: 'post',
				data: formData,
				dataType: 'json',
				processData: false,
				contentType: false,
				success: function (res) {
					if (res.code === 0) {
						layer.msg(res.msg, {
							anim: 0, time: 800
						}, function () {
							parent.layui.table.reload('label-table');
							parent.layer.close(index);
						});
					} else {
						layer.close(load);
						layer.msg(res.msg, {
							anim: 6, time: 800
						});
					}
					clickRepeatedly = false;
				}
			});
		});
		$('.layui-layer-btn').css({ "boxShadow": "0 0 5px #000" });
		var options = {
			el: '#label',
			name: 'cate2',
			autoRow: true,
			tips: '请选择所属场景',
			data: [],
			layVerify: 'required',
			on: function (data) {
				var arr = data.arr;
				if (arr.length > 0) {
					$('.cate01').show();
					$('#dataCounts').html(arr.length);
				} else {
					$('.cate01').hide();
				}
			}
		};
		var options1 = {
			el: '#label1',
			name: 'user_cate',
			autoRow: true,
			tips: '请选择适用部门',
			data: [],
			on: function (data) {
				var arr = data.arr;
				if (arr.length > 0) {
					$('.cate02').show();
					$('#dataCounts1').html(arr.length);
				} else {
					$('.cate02').hide();
				}
			}
		};
		var options2 = {
			el: '#label2',
			name: 'house_type',
			autoRow: true,
			tips: '请选择房屋类型',
			data: [],
			on: function (data) {
				var arr = data.arr;
				if (arr.length > 0) {
					$('.cate03').show();
					$('#dataCounts2').html(arr.length);
				} else {
					$('.cate03').hide();
				}
			}
		};

		$('#ask_upload').click(function () {
			let val = $('#ask_content').val();
			val = $.trim(val);
			if (!val) {
				layer.msg('请输入问题', {
					anim: 6, time: 800
				});
				return;
			}
			wordlist.push({ type: '0', content: val });
			renderWordlistHtml(wordlist);
			$('#ask_content').val('');
			setTimeout(() => {
				var scrollHeight = $('.word_list_box').prop("scrollHeight");
				$('.word_list_box').scrollTop(scrollHeight, 200);
			}, 600)
		})

		$('#answer_upload').click(function () {
			let val = $('#answer_content').val();
			val = $.trim(val);
			if (!val && (!images || JSON.stringify(images) === '[]')) {
				layer.msg('请输入回答', {
					anim: 6, time: 800
				});
				return;
			}
			var img = [];

			for (var i in $('#imgArray .imgDiv img')) {
				if ($('#imgArray .imgDiv img')[i].src) { 
					img.push($('#imgArray .imgDiv img')[i].src);
				}
			}
			if (!!images) {
				let arr = [];
				for (var t in images) {
					arr.push(images[t])
				}
				editimgarr.push(arr);
			} else {
				editimgarr.push('');
			}
			for (let x in images) {
				delete images[x];
			}
			$('#imgArray').html('');
			wordlist.push({ type: '1', content: val, img: img });
			renderWordlistHtml(wordlist);
			$('#answer_content').val('');
			setTimeout(() => {
				var scrollHeight = $('.word_list_box').prop("scrollHeight");
				$('.word_list_box').scrollTop(scrollHeight, 200);
			}, 600)
		})

		function renderWordlistHtml(data) {
			let w = 0;
			let htmls = data.map((item, index) => {
				item.content = item.content.replace(/^(\s|&quot;)+|(\s|&quot;)+$/g, '');
				if (item.type == '0') {
					return `<div class="left_ask">
								<div class="left_ask_avatar">
									<img src="__STATIC__/img/ask_icon.png" alt="">
								</div>
								<div class="left_ask_content">
									<pre class="txt">${item.content}</pre>
									<i data-index="${index}" class="layui-icon layui-icon-delete lay-l-close"></i>
									<i data-index="${index}" class="layui-icon layui-icon-edit lay-l-edit"></i>
								</div>
							</div>`;
				} else {
					let imgstr = "";
					for (let i = 0; i < item.img.length; i++) {
						imgstr += '<div class="addimgDiv" data-id="' + i + '"><img src="' + item.img[i] + '"  class="layui-upload-img" width="100%" height="100%" onclick="previewImg(this)"><div><i data-index="' + w + '" data-id="' + i + '" class="layui-icon layui-icon-closeimg layui-icon-close-fill"></i></div></div>';
					}
					w++;
					return `<div class="right_answer">
								<div class="right_answer_avatar">
									<img src="__STATIC__/img/answer_icon.png" alt="">
								</div>
								<div class="right_answer_content">
									<pre>${item.content}</pre>
									<i data-index="${index}" class="layui-icon layui-icon-delete lay-r-close"></i>
									<i data-index="${index}" class="layui-icon layui-icon-edit lay-r-edit"></i>
									<div data-index="${index}" class="right_answer_img" style="display: block;width: 100%;flex-shrink: 0;">${imgstr}</div>
								</div>
							</div>`;
				}
			}).join('');
			$('.word_list_box').html(htmls);
			setTimeout(() => {
				//删除图片
				$('.layui-icon-closeimg').click(function () {
					var that = this;
					let index = $(this).prop('dataset').index;
					let i = $(this).prop('dataset').id;

					var imgDiv = $(that).closest('.addimgDiv');
					let img1 = $(that).closest('.right_answer_img');
					if(wordimgs[index]){
						
						if(wordimgs[index][i]){
							wordimgs[index].splice(i, 1);
						}else{
							editimgarr[index].splice(i- wordimgs[index].length+1, 1);
						}
					}else{
						editimgarr[index].splice(i, 1);
					} 
					imgDiv.remove();
					if ($(that).closest('.addimgDiv').html().trim().length == 0) $(that).closest('.addimgDiv').css('display', 'none');
				});

				$('.lay-l-close').click(function () {
					let index = $(this).prop('dataset').index;
					wordlist.splice(index, 1);
					renderWordlistHtml(wordlist);
				})
				$('.lay-r-close').click(function () {
					let index = $(this).prop('dataset').index;
					wordlist.splice(index, 1);
					renderWordlistHtml(wordlist);
				})
				$('.lay-l-edit').click(function () {
					let idx = $(this).prop('dataset').index;
					layer.prompt({
						formType: 2,
						title: ['编辑问题内容', 'color:#333333;background-color:#D8E6F1;'],
						area: ['400px', '150px']
					}, function (value, index, elem) {
						var value = $.trim(value);
						if (value == '') {
							layer.msg('请输入内容', { anim: 6 });
							return false;
						}
						wordlist[idx].content = value;
						renderWordlistHtml(wordlist);
						layer.close(index); //再执行关闭
					});
					form.render();
				})
				$('.lay-r-edit').click(function () {
					let that = this;
					let idx = $(this).prop('dataset').index;
					let h = -1;
					for (let i in wordlist) {
						if (wordlist[i].type == 1) {
							h++;
							if (idx == i) {
								break;
							}
						}
					}
					let editimages = wordimgs[h] ? wordimgs[h].concat([]) : editimgarr[h]? editimgarr[h].concat([]):[];
					let images9;
					layer.open({
						type: 1,
						title: ['编辑回答内容', 'color:#333333;background-color:#D8E6F1;'],
						area: '450px',
						resize: false,
						btn: ['确定', '取消'],
						fixed: false, //不固定
						content: $('#editanswerbox').html(),
						success: function (layero, index) {
							for (let x in images9) {
								delete images9[x];
							}
							$('.editext textarea').val($(that).siblings('pre').text());
							if (!!$(that).siblings('.right_answer_img').html()) {
								$('#editimgArray').show();
								$('#editimgArray').html($(that).siblings('.right_answer_img').html());
								setTimeout(() => {
									$('.layui-icon-closeimg').click(function () {
										var that = this;
										let i = $(this).prop('dataset').id;

										var imgDiv = $(that).closest('.addimgDiv');
										let img1 = $(that).closest('.right_answer_img');
										editimages.splice(i, 1);
										imgDiv.remove();
										if ($(that).closest('.addimgDiv').html().trim().length == 0) $(that).closest('.addimgDiv').css('display', 'none');
									});
								}, 500);
							}
							//回答图片上传
							upload.render({
								elem: '#edituploadimg',
								accept: 'images',
								url: '/upload/',
								exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
								field: 'images_data',
								size: 1 * 1024,
								auto: false,
								multiple: true,
								choose: function (obj) {
									images9 = obj.pushFile(); 
									$('#editimgArray').show();
									length = editimages.length;
									obj.preview(function (index, file, result) {
										length++;
										if (length > 9) {
											layer.msg('最多上传九张图片');
										} else {
											editimages.push(file);
											$('#editimgArray').append('<div class="addimgDiv" data-id="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100%" height="100%" onclick="previewImg(this)"><div><i data-id="' + (length-1) + '" class="layui-icon layui-icon-closeimg1 layui-icon-close-fill"></i></div></div>');
										}
									});

									setTimeout(() => {
										//删除图片
										$('.layui-icon-closeimg1').click(function () {
											var that = this;
											let i = $(this).prop('dataset').id;

											var imgDiv = $(that).closest('.addimgDiv');
											let img1 = $(that).closest('.right_answer_img');
											editimages.splice(i, 1);
											if (id = imgDiv.data('id')) {
												delete images9[id];
											}
											imgDiv.remove();
											if ($(that).closest('.addimgDiv').html().trim().length == 0) $(that).closest('.addimgDiv').css('display', 'none');
										});
									}, 500);
								}
							});
						},
						yes: function (index, layero) {
							//do something
							var value = $.trim($('.editext textarea').val());
							if (value == '') {
								layer.msg('请输入内容', { anim: 6 });
								return false;
							}
							wordlist[idx].content = value;
							if(wordimgs[h]){
								wordimgs[h] = editimages;
							}else{
								editimgarr[h] = editimages;
							}
							let arr = [];
							for (let i = 0; i < $('#editimgArray img').length; i++) {
								arr.push($('#editimgArray img')[i].src);
							}
							wordlist[idx].img = arr;
							renderWordlistHtml(wordlist);
							layer.close(index); //如果设定了yes回调，需进行手工关闭
						},
						end: function (index, layero) {
							for (let x in images9) {
								delete images9[x];
							}
							layer.close(index)
							return false;
						}
					});
					form.render();
				})
			}, 500)
		}

		var label = xmSelect.render(options);
		var label1 = xmSelect.render(options1);
		var label2 = xmSelect.render(options2);

		form.on('select(type)', function (data) {
			$('#isshowlabel').show();
			selectdata("{:url('talkskill/dictionary_list')}", label, 4, $(data.elem).find('option:selected').attr('id'));
		})

		function selectdata(url, index, type, id, ids) {
			setTimeout(function () {
				$.ajax({
					type: "get",
					url: url,
					dataType: 'json',
					data: {
						type: type,
						pid: id,
						page: 1,
						limit: 10000
					},
					success: function (data) {
						index.update({ data: handleData(data.data, ids) });

					}
				});
			}, 100);
		}

		function handleData(data, ids) {
			return data.map(v => {
				return { name: v.name, value: v.id, id: v.id, selected: ids ? (ids.indexOf(`${v.id}`) > -1) : false};
			})
		}

		$(function () {
			let arr1 = [];
			{volist name="data.content" id="vo"}
				var type = "{$vo.type}"
				var content = "{$vo.content}"
				var id = "{$vo.id}"
				var img=[],imgarr=[];
				{empty name="vo.img"}
					if (type == 1){
						let arr=[];
						wordimgs.push(arr);
						editimgarr.push(arr);
					}
				{else/} 
					{volist name = "vo.img" id = "m" } 
						img.push("{$m}");
						imgarr.push('https://' + '{$oss_bindurl}' + '/' + "{$m}");
					{/volist}
					console.log(imgarr)
					wordimgs[wordimgs.length] = img;
					editimgarr.push(arr1);
				{/empty}
				wordlist.push({ type: type, content: content, id: id, img:imgarr });
			{/volist}
			renderWordlistHtml(wordlist);
			let cate1Id = "{$data.cate1}";
			let cate2_ids = "{$data.cate2}";
			let house_type_ids = "{$data.house_type}";
			let user_cate_ids = "{$data.user_cate}";
			let cate2_ids_arr = cate2_ids.split(',');
			let house_type_ids_arr = house_type_ids.split(',');
			let user_cate_ids_arr = user_cate_ids.split(',');
			if (cate1Id) {
				$('#isshowlabel').show();
			}
			selectdata("{:url('talkskill/dictionary_list')}", label, 4, cate1Id, cate2_ids_arr);

			selectdata("{:url('talkskill/dictionary_list')}", label1, 3, 0, user_cate_ids_arr);
			selectdata("{:url('talkskill/dictionary_list')}", label2, 2, 0, house_type_ids_arr);
		});

		var addtslabel = function () {
			layer.prompt({
				title: ['话术场景添加', 'color:#333333;background-color:#D8E6F1;'],
			}, function (value, index, elem) {
				$.post('{:url("talkskill/add_talkskill_label")}', {
					value: value
				}, function (res) {
					if (res.code == 0) {
						$(function () {
							selectdata();
						});
						layer.msg(res.msg, { anim: 0, time: 800 }, function () {
							layer.close(index); //再执行关闭
						});
					} else {
						layer.msg(res.msg, { anim: 6 });
					}
				});
			});
		}

		//添加分类
		$('#cate-add').on('click', function () {
			addcate();
		});

		var addcate = function () {
			layer.prompt({
				title: ['添加适用部门', 'color:#333333;background-color:#D8E6F1;'],
			}, function (value, index, elem) {
				var value = $.trim(value);
				if (value == '') {
					layer.msg('请输入名称', { anim: 6 });
					return false;
				}
				if (value.length > 6) {
					layer.msg('名称超长', { anim: 6 });
					return false;
				}
				$.post('{:url("talkskill/person_add")}', {
					'name': value
				}, function (res) {
					if (res.code == 0) {
						$('#type').append("<option selected value='" + value + "' id='" + res.id + "'>" + value + "</option>")
						form.render();
						layer.msg(res.msg, {
							anim: 0, time: 800
						}, function () {
							layer.close(index); //再执行关闭
						});
					} else {
						layer.msg(res.msg, {
							anim: 6, time: 800
						});
					}
				});
			});
			form.render();
		}
		//回答图片上传
		upload.render({
			elem: '#uploadimg',
			accept: 'images',
			url: '/upload/',
			exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
			field: 'images_data',
			size: 1 * 1024,
			auto: false,
			multiple: true,
			choose: function (obj) {
				images = obj.pushFile();
				length = $('.imgDiv').length;
				// console.log(images)
				obj.preview(function (index, file, result) {
					length++;
					if (length > 9) {
						layer.msg('最多上传九张图片');
						delete images[index];
					} else {
						$('#imgArray').css('display', 'block');
						$('#imgArray').prepend('<div class="imgDiv" data-id="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100%" height="100%" onclick="previewImg(this)"><div><i class="layui-icon layui-icon-close-fill"></i></div></div>');
					}
				});
			}
		});
		//删除图片
		$('#imgArray').on('click', 'i', function () {
			var that = this;
			var imgDiv = $(that).closest('.imgDiv');
			if (id = imgDiv.data('id')) {
				delete images[id];
			}
			imgDiv.remove();
			if ($('#imgArray').html().trim().length == 0) $('#imgArray').css('display', 'none');
		});
		//放大图片
		function previewImg(obj) {
			var imgHtml = "<img src='" + obj.src + "' width='100%' height='100%' />";
			layer.open({
				type: 1,
				title: false,
				closeBtn: 0,
				area: ['auto', '80%'],
				skin: 'layui-layer-nobg', //没有背景色
				shadeClose: true,
				content: imgHtml
			});
		}
	});
	
</script>
{/block}