{extend name="public/layout" /} {block name="title"}跟进设置{/block} {block name="body"}
<style type="text/css">
  html,
  body {
    display: block;
    width: 100%;
    height: 100%;
    width: calc(100% - 6px);
  }

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

  .flex {
    display: flex;
  }

  .lay-leftBox {
    width: 360px;
    height: 97%;
    background-color: #fff;
    margin: 10px 13px 10px;
    box-sizing: border-box;
    padding: 10px;
  }

  .lay-rightBox {
    width: calc(100% - 400px);
    height: 97%;
    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: 80%;
  }

  .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: 45px;
  }

  .fieldItem {
    width: 50%;
  }

  .checkedDel {
    cursor: pointer;
  }

  .layui-icon-search {
    cursor: pointer;
  }

  .allCheckedField {
    padding-top: 10px;
  }

  .layui-form {
    height: 100%;
  }

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

  .fieldViewBox {
    height: 94% !important;
  }

  .clue_tag_item {
    margin: 0 5px 10px 5px !important;
  }

  .lay-rightBox {
    overflow-y: auto !important;
  }

  .imgview {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
  }

  .layleftcontent {
    width: 100%;
    margin-top: 20px;
    height: calc(100% - 50px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

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

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

  /* 滚动条滑块 */
  .layleftcontent::-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;
  }

  .leftItemBox1 {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e7f1f7;
    font-size: 13px;
  }

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

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

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

  .ml5 {
    margin-left: 5px;
  }

  .leftItemBox2 {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 10px;
    background-color: #f0f4f7;
    font-size: 13px;
    margin-top: 10px;
    border-radius: 2px;
  }

  .leftItemContent2 {
    margin-top: 10px;
    width: 100%;
    height: 60px;
    font-size: 13px;
    color: #999999;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
  }

  .leftCustomField {
    width: 100%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    padding: 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-top: 20px;
  }

  .leftnextDateBox {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 20px 0px;
  }

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

  .leftNextDateContent>div {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  .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: #fddde1;
    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: #f54d64;
    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 #f54d64;
    border-top: 0.5px solid #f54d64;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 5px;
  }

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

  .leftpBoxBottom {
    font-size: 12px;
    margin-top: 10px;
  }

  .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: #f54d64;
    border-radius: 50%;
    position: absolute;
    left: 1px;
    top: 55%;
    transform: translateY(-50%);
  }

  .layui-form-checked[lay-skin=primary] i {
    border-color: #249EFB;
    background-color: #249EFB;
  }
  .class_disabled .layui-form-checkbox[lay-skin=primary] i {
		border-color: #c2c2c2 !important;
		background-color: #c2c2c2 !important;
	}
</style>

<body>
  <div class="lay-main flex">
    <div class="lay-leftBox">
      <div class="lay-leftTips">手机端示例</div>
      <div class="layleftcontent">
        <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 class="leftActive">客户跟踪</div>
          <div>信息完善</div>
          <div>客户转化</div>
          <div>客户预约</div>
        </div>
        <div class="leftItemBox1">
          <div class="leftLabel1">跟踪方式</div>
          <div class="leftContent1">
            <div>
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">微信</span>
            </div>
            <div>
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">电话</span>
            </div>
            <div>
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">其他</span>
            </div>
          </div>
        </div>
        <div class="leftItemBox1">
          <div class="leftLabel1">线索状态</div>
          <div class="leftContent1">
            <div>
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">待确认</span>
            </div>
            <div>
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">有效线索</span>
            </div>
            <div>
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">无效线索</span>
            </div>
          </div>
        </div>
        <div class="leftItemBox2">
          <div class="leftItemText2">
          </div>
          <div class="leftItemContent2">请输入跟进内容</div>
        </div>
        <div class="leftCustomField"></div>
        <div class="leftlineMiddle"></div>
        <div class="leftnextDateBox">
          <div>设置下次回访时间</div>
          <div class="leftNextDateContent">
            <div>
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">今天</span>
            </div>
            <div>
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">1天后</span>
            </div>
            <div>
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">3天后</span>
            </div>
            <div>
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">7天后</span>
            </div>
            <div style="width: 80px !important;flex: none !important;">
              <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px" alt="">
              <span class="ml5">其他时间</span>
            </div>
          </div>
        </div>
        <div class="leftSubmitBtn">提交本次跟踪数据</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">
                <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                <span class="ml5">销售：李XX</span>
                <span class="ml5">11:50:12</span>
                <span class="visitBoxp">未到访</span>
              </div>
              <div class="leftpBoxBottom">这是一段跟踪记录</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">
                <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                <span class="ml5">销售：李XX</span>
                <span class="ml5">11:24:12</span>
                <span class="visitBoxp">未到访</span>
              </div>
              <div class="leftpBoxBottom">这是一段跟踪记录</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">
                <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                <span class="ml5">销售：李XX</span>
                <span class="ml5">11:12:12</span>
                <span class="visitBoxp">未到访</span>
              </div>
              <div class="leftpBoxBottom">这是一段跟踪记录</div>
              <div class="circle3"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lay-rightBox">
      <form class="layui-form" action="">
        <div class="lay-rightTips">
          <div class="labelIcon"></div>
          <span class="ml6">快速跟进设置</span>
        </div>
        <div class="visitlistBox">
          <div class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" id="addClueTag">+添加</div>
          <div class="visitItemBox">

          </div>
        </div>
        <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;padding-bottom: 30px;">
          <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>

      </form>
    </div>
  </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,
      clueTagArr = [],
      visitFieldAll = [],
      checkedArr = [],
      defaultArr = [];

    form.render();
    getClueTags();
    function getClueTags() {
      $.ajax({
        type: "get",
        url: "{:url('customerSetting/clueTag')}",
        data: {},
        dataType: 'json',
        success: function (res) {
          if (res.code == 0) {
            clueTagArr = res.data;
            renderClueTagsHtml(clueTagArr);
            setClueTagRenderHtml(clueTagArr);
          }
        }
      })
    }

    function setClueTagRenderHtml(dataArr) {
      let htmls = dataArr.map((item, index) => {
        return `<span>${item}</span>
                ${index != dataArr.length ? '<span> | </span>' : ''}`;
      }).join('');
      $('.leftItemText2').html(htmls);
    }

    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);
    }

    function renderClueTagsHtml(tags) {
      let htmls = tags.map((item, index) => {
        return `<div data-index="${index}" class="layui-btn layui-btn-primary layui-border-black layui-btn-sm clue_tag_item">${item}<i
                class="layui-icon layui-icon-close-fill lay-close" data-index="${index}"></i></div>`;
      }).join('');
      $('.visitItemBox').html(htmls);
      setTimeout(() => {
        $('.lay-close').click(function (e) {
          let idx = parseInt($(this).prop('dataset').index);
          clueTagArr.splice(idx, 1);
          renderClueTagsHtml(clueTagArr);
          submitTabClue();
          e.stopPropagation();
        })
        $('.clue_tag_item').click(function (e) {
          let idx = parseInt($(this).prop('dataset').index);
          layer.prompt({
            formType: 0,
            value: clueTagArr[idx],
            title: '编辑',
          }, function (value, index, elem) {
            clueTagArr[idx] = value;
            renderClueTagsHtml(clueTagArr);
            submitTabClue();
            layer.close(index);
          });
          e.stopPropagation();
        })
      }, 600)
    }

    $('#addClueTag').click(function () {
      layer.prompt({
        formType: 0,
        value: '',
        title: '添加',
      }, function (value, index, elem) {
        clueTagArr.push(value);
        renderClueTagsHtml(clueTagArr);
        layer.close(index);
        submitTabClue();
      });
    })

    function submitTabClue() {
      $.ajax({
        url: '{:url("customerSetting/clueTagEdit")}',
        type: 'post',
        data: {
          content: clueTagArr
        },
        dataType: 'json',
        success: function (res) {
          if (res.code === 0) {
            layer.msg(res.msg, { anim: 0 });
          } else {
            layer.msg(res.msg, { anim: 6 });
          }
        }
      });
    }

    getVisitFiled();
    function getVisitFiled() {
      $.ajax({
        type: "get",
        url: "{:url('customerSetting/moduleField')}",
        data: {
          type: "visit"
        },
        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' : ''}">${item.other_checked == 1 ? `<input lay-filter="checkboxs" disabled checked class="visitFieldElement${item.id}" type="checkbox" ${(returnCheckedStatus(item.id)) ? 'checked' : ''} name="otherField" value="${item.id}" title="${item.name}" lay-skin="primary">` : `<input lay-filter="checkboxs" class="visitFieldElement${item.id}" type="checkbox" ${(returnCheckedStatus(item.id)) ? 'checked' : ''} 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) {
      let getCheckedField = $('.sortItemBox');
      let itemArr = [];
      getCheckedField.each(function (i) {
        let id = $(this).prop('dataset').id;
        itemArr.push({ id: id, sort: i + 1 });
      })
      $.ajax({
        url: '{:url("customerSetting/moduleVisit")}',
        type: 'post',
        data: {
          content: itemArr
        },
        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}