<template>
  <div class="template-wrap" :style="{ height: bodyHeight}">
    <div class="template-contain">
    <!-- 头部标题 -->
      <div class="template-head">
        <div class="template-title flex-1">
          <img src="static/img/card-mould-logo.png" alt="logo"/>
          <span class="template-title-span">员工档案设置</span>
        </div>
        <div class="template-btns flex-1 flex-r">
          <el-button  plain @click="changeRoute('/memberCardSet')">返 回</el-button>
          <el-button type="primary" @click="saveAndBack">保存并启用</el-button>
        </div>
      </div>
      <!-- 模板body -->
      <div class="template-body">
        <!-- 左侧 -->
        <div class="template-cell template-cell-l">
          <!-- tab 切换 -->
          <el-tabs v-model="activeName" >
            <el-tab-pane label="系统字段" name="first">
              <div class="filed-item-title">基本信息</div>
              <ul>
                <draggable id="list1" @clone="baseInfoClone" :list="baseInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging=true" @end="itemMoveEnd"><!-- @end="itemMoveEnd" -->
                  <li
                    :class="['compenent-item',item.fixed==true? 'fixed-item': '']"
                    :data-type='item.systemFieldId'
                    v-for="(item,index) in baseInfo"
                    :key="index"
                    @mousedown="clickItem(item)"
                    aria-hidden="true" >
                    <span >{{item.fieldName}}</span>
                  </li>
                </draggable>
              </ul>
              <div class="filed-item-title">工作信息</div>
              <ul>
                <draggable id="list2"  :list="jobInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging=true" @end="itemMoveEnd">
                  <li
                    :class="['compenent-item',item.fixed==true? 'fixed-item': '']"
                    :data-type='item.systemFieldId'
                    v-for="(item,index) in jobInfo"
                    :key="index"
                    @mousedown="clickItem(item)">
                    <span >{{item.fieldName}}</span>
                  </li>
                </draggable>
              </ul>
              <div class="filed-item-title">个人信息</div>
              <ul>
                <draggable id="list3"  :list="selfInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging=true" @end="itemMoveEnd">
                  <li
                    :class="['compenent-item',item.fixed==true? 'fixed-item': '']"
                    :data-type='item.systemFieldId'
                    v-for="(item,index) in selfInfo"
                    :key="index"
                    @mousedown="clickItem(item)">
                    <span >{{item.fieldName}}</span>
                  </li>
                </draggable>
              </ul>
              <div class="filed-item-title">学历信息</div>
              <ul>
                <draggable id="list4"  :list="eduInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging=true" @end="itemMoveEnd">
                  <li
                    :class="['compenent-item',item.fixed==true? 'fixed-item': '']"
                    :data-type='item.systemFieldId'
                    v-for="(item,index) in eduInfo"
                    :key="index"
                    @mousedown="clickItem(item)">
                    <span >{{item.fieldName}}</span>
                  </li>
                </draggable>
              </ul>
              <div class="filed-item-title">合同信息</div>
              <ul>
                <draggable id="list5"  :list="contractInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging=true" @end="itemMoveEnd">
                  <li
                    :class="['compenent-item',item.fixed==true? 'fixed-item': '']"
                    :data-type='item.systemFieldId'
                    v-for="(item,index) in contractInfo"
                    :key="index"
                    @mousedown="clickItem(item)">
                    <span >{{item.fieldName}}</span>
                  </li>
                </draggable>
              </ul>
              <div class="filed-item-title">紧急联系人</div>
              <ul>
                <draggable id="list5"  :list="contactInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging=true" @end="itemMoveEnd">
                  <li
                    :class="['compenent-item',item.fixed==true? 'fixed-item': '']"
                    :data-type='item.systemFieldId'
                    v-for="(item,index) in contactInfo"
                    :key="index"
                    @mousedown="clickItem(item)">
                    <span >{{item.fieldName}}</span>
                  </li>
                </draggable>
              </ul>
              <div class="filed-item-title">个人材料</div>
              <ul>
                <draggable id="list5"  :list="personalInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging=true" @end="itemMoveEnd">
                  <li
                    :class="['compenent-item',item.fixed==true? 'fixed-item': '']"
                    :data-type='item.systemFieldId'
                    v-for="(item,index) in personalInfo"
                    :key="index"
                    @mousedown="clickItem(item)">
                    <span >{{item.fieldName}}</span>
                  </li>
                </draggable>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="自定义字段" name="second">
              <div class="filed-item-title"><!-- 其他信息 --></div>
              <ul>
                <draggable id="list5"  :list="defineInfo" class="compenent" :options="leftDefineOption" :move="onChildMove" @start="isDragging=true" @end="itemMoveEnd" @clone="cloneDefine">
                  <li
                    :class="['compenent-item',item.fixed==true? 'fixed-item': '',item.fieldType == 5?'block-class':'']"
                    :data-type='item.systemFieldId'
                    v-for="(item,index) in defineInfo"
                    :key="index"
                    @mousedown="clickItem(item)">
                    <span v-if="item.systemFieldId == '-1' && item.fieldType==0">{{item.fieldName}}</span>
                    <span v-if="item.systemFieldId == '-1' && item.fieldType == 1">{{item.fieldName}}</span>
                    <span v-if="item.systemFieldId == '-1' && item.fieldType == 2">{{item.fieldName}}</span>
                    <span v-if="item.systemFieldId == '-1' && item.fieldType == 3">{{item.fieldName}}</span>
                    <span v-if="item.systemFieldId == '-1' && item.fieldType == 4">{{item.fieldName}}</span>
                    <span v-if="item.systemFieldId == '-1' && item.fieldType == 5">{{item.fieldName}}</span>
                    <span v-if="item.systemFieldId == '-1' && item.fieldType == 6">{{item.fieldName}}</span>
                    <span v-if="item.systemFieldId == '-1' && item.fieldType == 7">{{item.fieldName}}</span>

                    <i v-if="item.systemFieldId == '-1' && item.fieldType==0" class="bg-icon bg-icon-one"></i>
                    <i v-if="item.systemFieldId == '-1' && item.fieldType==1" class="bg-icon bg-icon-two"></i>
                    <i v-if="item.systemFieldId == '-1' && item.fieldType==2" class="bg-icon bg-icon-three"></i>
                    <i v-if="item.systemFieldId == '-1' && item.fieldType==3" class="bg-icon bg-icon-four"></i>
                    <i v-if="item.systemFieldId == '-1' && item.fieldType==4" class="bg-icon bg-icon-five"></i>
                    <i v-if="item.systemFieldId == '-1' && item.fieldType==5" class="bg-icon bg-icon-six"></i>
                    <i v-if="item.systemFieldId == '-1' && item.fieldType==6" class="bg-icon bg-icon-seven"></i>
                    <i v-if="item.systemFieldId == '-1' && item.fieldType==7" class="bg-icon bg-icon-eight"></i>
                  </li>
                </draggable>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 中间 -->
        <div class="template-cell template-cell-m">
          <div class="phone-view">
            <div class="phone-show-content">
              <!-- 拖拽展示区域 -->
              <div class="drag-show-content">
                <div class="view-container">
                  <ul class="view-content" id="showPhoneView">
                    <template v-if="tempaletDataList.length == 0">
                      <img class="templet-null-img" src="../../assets/templet_null_img.png"/>
                    </template>
                    <draggable :options="{group:{name:'people', pull:false, put:false },sort: true}"
                            v-model="tempaletDataList" class="drag-wrap" @add="addItem">
                        <li
                          :class="['filed-item',currentIndex == index? 'active-item': '','li-block']"
                          v-for="(item,index) in tempaletDataList"
                          @click="selectItem(item.systemFieldId,index)" >
                          <!-- 删除 -->
                          <span
                            v-if= "item.systemFieldId != 'baseInfo'"
                            class="item-close"
                            @click.stop="deleteItem(item.systemFieldId,index)">
                            <i class="el-icon-close"></i>
                          </span>

                          <template>
                            <div class="block">
                              <div class="block-head">
                                <div :class="['opencard-item-title',item.fieldName.length>6? 'block-pre-wrap': '']">{{item.fieldName}}</div>
                              </div>
                              <ul class="view-content">
                                <draggable :options="{group:{name:'people', pull:false, put:true },sort: true}" v-model="item.sonList" :class="['drag-wrap','block-wrap',item.systemFieldId]" @add="addDragItem">

                                  <li :class="['filed-item',currentChildIndex == ind? 'active-item': '']" v-for="(childItem,ind) in item.sonList" @click.stop="selectChildItem(childItem.systemFieldId,index,ind,item.sonList)" >
                                    <!-- 删除 -->
                                    <span class="item-close" @click.stop="deleteChildItem(childItem.systemFieldId,index,ind,item.sonList,childItem)"><i class="el-icon-close"></i></span>
                                    <!-- item -->
                                    <!-- 单择/多选/日期 -->
                                    <div v-if="(childItem.fieldType == 2 || childItem.fieldType == 3 || childItem.fieldType == 4)">
                                      <div :class="['opencard-item-title',childItem.fieldName.length>6? 'title-pre-wrap': '']">{{childItem.fieldName}}</div>
                                      <div class="draged-item-show">
                                        <span class="show-warm-text show-warm-text-flag select-flag">{{childItem.fieldDescription}} <i class="el-icon-arrow-right"></i></span>
                                      </div>
                                    </div>
                                    <!-- 日期区间 -->
                                    <div v-if="(childItem.fieldType == 5)">
                                      <div>
                                        <div :class="['opencard-item-title',childItem.fieldName.length>6? 'title-pre-wrap': '']">{{childItem.startName}}</div>
                                        <div class="draged-item-show">
                                          <span class="show-warm-text show-warm-text-flag select-flag">{{childItem.startDescription}}<i class="el-icon-arrow-right"></i></span>
                                        </div>
                                      </div>
                                      <div class="b-t-1">
                                        <div :class="['opencard-item-title',childItem.fieldName.length>6? 'title-pre-wrap': '']">{{childItem.endName}}</div>
                                        <div class="draged-item-show">
                                          <span class="show-warm-text show-warm-text-flag select-flag">{{childItem.endDescription}}<i class="el-icon-arrow-right"></i></span>
                                        </div>
                                      </div>
                                    </div>
                                    <!-- 图片 -->
                                    <div v-if="(childItem.fieldType == 7)">
                                      <div :class="['opencard-item-title',childItem.fieldName.length>6? 'title-pre-wrap': '']">{{childItem.fieldName}}</div>
                                      <div class="draged-item-show">
                                        <span class="show-warm-text show-warm-text-flag">{{childItem.fieldDescription}}</span>
                                      </div>
                                    </div>
                                    <!-- 单行/多行/数字输入框 -->
                                    <div v-if="(childItem.fieldType == 0 || childItem.fieldType == 1 || childItem.fieldType == 6)">
                                      <div :class="['opencard-item-title',childItem.fieldName.length>6? 'title-pre-wrap': '']" >{{childItem.fieldName}}</div>
                                      <div class="draged-item-show">
                                        <span class="show-warm-text show-warm-text-flag">{{childItem.fieldDescription}}</span>
                                      </div>
                                    </div>
                                  </li>
                                </draggable>
                              </ul>
                            </div>
                          </template>

                        </li>
                    </draggable>
                  </ul>
                </div>

              </div>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="template-cell template-cell-r">
          <el-tabs v-model="rightName" >
            <el-tab-pane label="控件设置" name="first">
                <div id="edit-box">
                  <div class="edit-view baby-info-flag baby-info">
                    <template v-for="(item,index) in tempaletDataList">
                      <!-- 公共 -->
                      <template v-if="currentIndex == index && item.systemFieldId != -1">
                        <div class="edit-item ">
                          <div class="edit-item-title edit-title-padding"> 标题 </div>
                          <add-input :inputValue="item.fieldName" :disFlag="1" :maxLength="10" @itemInput="itemInput"></add-input>
                        </div>
                      </template>

                      <!-- 自定义中 根据 item.systemFieldId == -1 判断是否可编辑-->
                      <template v-if="currentIndex == index && item.systemFieldId == -1 && !currentChildIndex">
                        <div class="edit-item ">
                          <div class="edit-item-title"> 标题 </div>
                          <add-input :inputValue="item.fieldName" :titleName="'title'" :disFlag="0" :maxLength="10" @itemInput="itemInput"></add-input>
                        </div>
                      </template>

                      <template v-if="currentIndex == index && item.fieldType != 5" >
                        <div class="edit-item" >
                          <div class="edit-item-title">提示文字</div>
                          <!-- <el-input class="w-340" v-model="item.placeHolder" placeholder=""></el-input> -->
                          <add-input :inputValue="item.fieldDescription" :disFlag="0" :maxLength="15" @itemInput="itemInput"></add-input>
                        </div>
                      </template>

                      <!-- 组块内部 -->
                      <template v-if="childIndex == index && !!item.sonList && !!item.sonList.length && item.systemFieldId==-1">
                        <template v-for="(child,ind) in item.sonList">
                            <!-- 标题 -->
                            <template v-if="currentChildIndex == ind && (child.fieldType=='3'||child.fieldType=='1'||child.fieldType=='0'||child.fieldType=='4')">
                              <div class="edit-item test-title" >
                                <div class="edit-item-title"> 标题 </div>
                                <add-input :inputValue="child.fieldName" :titleName="'title'" :child="'child'" :disFlag="0" :maxLength="10" @itemInput="itemInput"></add-input>
                              </div>
                            </template>

                            <!-- 提示 -->
                            <template v-if="currentChildIndex == ind && (child.fieldType=='3'||child.fieldType=='1'||child.fieldType=='0'||child.fieldType=='4')" >
                              <div class="edit-item test-title" >
                                <div class="edit-item-title">提示文字</div>
                                <!-- <el-input class="w-340" v-model="item.placeHolder" placeholder=""></el-input> -->
                                <add-input :inputValue="child.fieldDescription" :disFlag="0" :child="'child'" :maxLength="15" @itemInput="itemInput"></add-input>
                              </div>
                            </template>

                            <!-- 类型 -->
                            <template v-if="currentChildIndex == ind && (child.fieldType=='3'||child.fieldType=='1'||child.fieldType=='0'||child.fieldType=='4')">
                              <div class="edit-item " >
                                <div class="edit-item-title">类型</div>
                                <template v-if="child.fieldType == 3">
                                  <template v-for="(types,ind) in child.ruleContent">
                                    <el-radio v-model="types.checked" :label="types.checked">{{types.name}}</el-radio>
                                  </template>
                                </template>
                                <!-- 多选 -->
                                <template v-if="child.fieldType == 1">
                                  <template v-for="(types,ind) in child.ruleContent">
                                    <el-checkbox v-model="types.checked=='checked'? true:false" disabled>{{types.name}}</el-checkbox>
                                  </template>
                                </template>

                                <!-- 单行输入框-->
                                <template v-if="child.fieldType==0">
                                  <template v-for="(types,ind) in child.ruleContent">
                                    <el-checkbox v-model="types.select" @change="changeCheck($event,ind,child.type)">{{types.name}}</el-checkbox>
                                  </template>
                                </template>

                                <!-- 日期 -->
                                <template v-if="currentChildIndex == ind && child.systemFieldId == -1 && child.fieldType==4">
                                  <template v-for="(types,ind) in child.ruleContent">
                                    <el-radio v-model="child.typeValue" :label="types.name" @change="changeRadio($event,ind,child)">{{types.name}}</el-radio>
                                  </template>
                                </template>
                              </div>
                            </template>

                            <!-- 选项 -->
                            <template v-if="currentChildIndex == ind && (child.fieldType=='3'||child.fieldType=='1')">
                              <div class="edit-item ">
                                <div class="edit-item-title">选项 <span v-if="child.fieldType=='1'">最多20项，每项最多10个字</span> <span v-if="child.fieldType=='3'">最多5项，每项最多10个字</span></div>
                                <template v-for="(types,ind) in child.fieldContent">
                                  <div class="margin-t-15" :style="ind==0? 'margin-top: 0':''">
                                    <add-input :inputValue="types.name" :childIndex="ind" :child="'child'" :childItem="(child.fieldType=='3' || child.fieldType=='1')? 'k303':''"  :disFlag="0" :maxLength="10" @itemInput="itemInput"></add-input>
                                    <i class="opt-btn el-icon-remove del-item" v-if="child.fieldContent.length>1" @click="delChildItem(index,ind,child)"></i>
                                    <template v-if="(child.systemFieldId == '-1'&&child.fieldType==1&&ind < 19)">
                                      <i class="opt-btn el-icon-circle-plus add-item" v-if="ind == child.fieldContent.length-1" @click="addChildItem(index,ind,child)"></i>
                                    </template>
                                    <template v-if="(child.systemFieldId == '-1'&&child.fieldType==3&&ind < 4)">
                                      <i class="opt-btn el-icon-circle-plus add-item" v-if="ind == child.fieldContent.length-1" @click="addChildItem(index,ind,child)"></i>
                                    </template>

                                  </div>
                                </template>
                              </div>
                            </template>

                            <!-- 必填 -->
                            <template v-if="currentChildIndex == ind && (child.fieldType=='3'||child.fieldType=='1'||child.fieldType=='0'||child.fieldType=='4')">
                              <div class="edit-item ">
                                <div class="edit-item-title">验证</div>
                                <el-checkbox v-model="child.isMust" >必填</el-checkbox>
                              </div>

                            </template>

                        </template>

                      </template>

                      <!-- 性别 -->
                      <template v-if="currentIndex == index && item.systemFieldId == 'k102'">
                        <div class="edit-item ">
                          <div class="edit-item-title">类型</div>
                          <template v-for="(types,ind) in item.ruleContent">
                            <el-radio v-model="types.checked" :label="types.checked">{{types.name}}</el-radio>
                          </template>
                        </div>
                        <div class="edit-item ">
                          <div class="edit-item-title">选项</div>
                          <template v-for="(types,ind) in item.fieldContent">
                            <div class="margin-t-15" :style="ind==0? 'margin-top:0':''">
                              <add-input :inputValue="types.name" :disFlag="1" :maxLength="10" @itemInput="itemInput"></add-input>
                            </div>
                          </template>
                        </div>
                      </template>

                      <!-- 文化程度 婚姻状况 是否有房 是否有车-->
                      <template v-if="currentIndex == index && (item.systemFieldId == 'k105'|| item.systemFieldId == 'k201' || item.systemFieldId == 'k202' || item.systemFieldId == 'k301' || item.systemFieldId == 'k302')">
                        <div class="edit-item ">
                          <div class="edit-item-title">类型</div>
                          <template v-for="(types,ind) in item.ruleContent">
                            <el-radio v-model="types.checked" :label="types.checked">{{types.name}}</el-radio>
                          </template>
                        </div>
                        <div class="edit-item ">
                          <div class="edit-item-title">选项</div>
                          <template v-for="(types,ind) in item.fieldContent">
                            <div class="margin-t-15" :style="ind==0? 'margin-top: 0':''">
                              <add-input :inputValue="types.name" :disFlag="1" :maxLength="10" @itemInput="itemInput"></add-input>
                            </div>
                          </template>
                        </div>
                      </template>

                      <!-- 邮箱 -->
                      <template v-if="currentIndex == index && item.systemFieldId == 'k106'">
                        <div class="edit-item ">
                          <div class="edit-item-title">类型</div>
                          <template v-for="(types,ind) in item.ruleContent">
                            <el-checkbox v-model="types.checked=='checked'? true:false" disabled>{{types.name}}</el-checkbox>
                          </template>
                        </div>
                      </template>

                      <!-- 年收入 购物周期  喜好的礼品-->
                      <template v-if="currentIndex == index && (item.systemFieldId == 'k303' ||item.systemFieldId == 'k403' || item.systemFieldId == 'k404' || (item.systemFieldId == '-1'&&item.fieldType=='3') || (item.systemFieldId == '-1'&&item.fieldType=='1'))">
                        <template v-if="item.ruleContent.length"><!-- v-if="item.systemFieldId == 'k303' || item.systemFieldId == 'k403' || item.systemFieldId == 'E1'"-->
                          <div class="edit-item ">
                            <div class="edit-item-title">类型</div>
                            <!-- 单选 -->
                            <template v-if="item.fieldType == 2||item.fieldType == 3">
                              <template v-for="(types,ind) in item.ruleContent">
                                <el-radio v-model="types.checked" :label="types.checked">{{types.name}}</el-radio>
                              </template>
                            </template>
                            <!-- 多选 -->
                            <template v-if="item.fieldType == 1">
                              <template v-for="(types,ind) in item.ruleContent">
                                <el-checkbox v-model="types.checked=='checked'? true:false" disabled>{{types.name}}</el-checkbox>
                              </template>
                            </template>
                          </div>
                        </template>

                        <div class="edit-item ">
                          <div class="edit-item-title">选项 <span v-if="item.systemFieldId == 'k404'||(item.systemFieldId == '-1'&&item.fieldType=='1')">最多20项，每项最多10个字</span> <span v-if="item.systemFieldId != 'k404' && (item.systemFieldId == 'k403'||item.systemFieldId == 'k303' || item.systemFieldId == '-1'&&item.fieldType=='3')">最多5项，每项最多10个字</span></div>
                          <template v-for="(types,ind) in item.fieldContent">
                            <div class="margin-t-15" :style="ind==0? 'margin-top: 0':''">
                              <add-input :inputValue="types.name" :childIndex="ind" :childItem="(item.systemFieldId == 'k403'||item.systemFieldId == 'k303' || item.systemFieldId == 'k404' || (item.systemFieldId == '-1'&&item.fieldType=='3') || (item.systemFieldId == '-1'&&item.fieldType=='1'))? 'k303':''"  :disFlag="0" :maxLength="10" @itemInput="itemInput"></add-input>
                              <i class="opt-btn el-icon-remove del-item" v-if="item.fieldContent.length>1" @click="delChildItem(index,ind,item)"></i>
                              <template v-if="((item.systemFieldId == 'k404'||(item.systemFieldId == '-1' && item.fieldType==1)) && ind < 19)">
                                <i class="opt-btn el-icon-circle-plus add-item" v-if="ind == item.fieldContent.length-1" @click="addChildItem(index,ind,item)"></i>
                              </template>
                              <template v-if="((item.systemFieldId == 'k403'||item.systemFieldId == 'k303' || (item.systemFieldId == '-1'&&item.fieldType=='3')) && ind < 4)">
                                <i class="opt-btn el-icon-circle-plus add-item" v-if="ind == item.fieldContent.length-1" @click="addChildItem(index,ind,item)"></i>
                              </template>
                            </div>
                          </template>
                        </div>
                      </template>

                      <!-- 期望消息推送 -->
                      <template v-if="currentIndex == index && item.systemFieldId == 'k402'">
                        <div class="edit-item ">
                          <div class="edit-item-title">类型</div>
                          <template v-for="(types,ind) in item.ruleContent">
                            <el-checkbox v-model="types.checked=='checked'? true:false" disabled>{{types.name}}</el-checkbox>
                          </template>
                        </div>
                        <div class="edit-item ">
                          <div class="edit-item-title">选项</div>
                          <template v-for="(types,ind) in item.fieldContent">
                            <div class="margin-t-15" :style="ind==0? 'margin-top: 0':''">
                              <add-input :inputValue="types.name" :disFlag="1" :maxLength="10" @itemInput="itemInput"></add-input>
                            </div>
                          </template>
                        </div>
                      </template>

                      <!-- 自定义日期 -->
                      <template v-if="currentIndex == index && item.systemFieldId == -1&& item.fieldType==4">
                        <div class="edit-item ">
                          <div class="edit-item-title">类型</div>
                          <template v-for="(types,ind) in item.ruleContent">
                            <el-radio v-model="item.typeValue" :label="types.name" @change="changeRadio($event,ind,item)">{{types.name}}</el-radio>
                          </template>
                        </div>
                      </template>

                      <!-- 公共 -->
                      <template v-if="currentIndex == index">
                        <!-- 必填 -->
                        <div class="edit-item ">
                          <div class="edit-item-title">验证</div>
                          <el-checkbox v-model="item.isMust" >必填</el-checkbox>
                        </div>
                        <!-- 员工档案中 -->
                        <div class="edit-item ">
                          <div class="edit-item-title">员工档案中</div>
                          <el-checkbox-group
                            class="staffRecords-limit"
                            v-model="item.staffRecordsIds"
                            @change="checkedChange($event,item)">
                            <template v-for="(staffRecordsItem,idx) in staffRecordsOptions">
                              <div class="checkbox-cell">
                                <el-checkbox :label="staffRecordsItem.id" :key="staffRecordsItem.id">{{ staffRecordsItem.name }}</el-checkbox>
                              </div>
                            </template>
                          </el-checkbox-group>
                        </div>
                      </template>
                    </template>
                  </div>
                </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- <vue-gic-footer></vue-gic-footer> -->
  </div>
</template>
<script>
import draggable from 'vuedraggable';
import AddInput from '@/components/templateSet/add-input';

import allInfo from '@/components/contacts/staffInfoTemplate';
import showMsg from '@/common/js/showmsg';
import errMsg  from '@/common/js/error';
import strLength from '@/common/js/strlen';
import { _debounce } from "@/common/js/public";
import { getRequest, postRequest, postJson, postForm } from '@/api/api';

export default {
  name: "staffRecordsTemplate",
  data() {
    return {
      // tab
      activeName: 'first',
      // right tab
      rightName: 'first',

      bodyHeight: (document.documentElement.clientHeight || document.body.clientHeight) + 'px',

      // option
      isDragging: false,
      delayedDragging: false,
      // leftOption
      leftOption: {
        group: {name:'people', pull:'clone', put:false},
        sort: false,
        disabled: false
      },
      leftDefineOption: {
        group: {name:'people', pull:'clone', put:false},
        sort: false,
        disabled: false
      },
      // rightOption

      selectKey: '',

      // 基本信息
      baseInfo: allInfo.baseInfo(),
      // 工作信息
      jobInfo: allInfo.jobInfo(),
      // 个人信息
      selfInfo: allInfo.selfInfo(),
      // 学历信息
      eduInfo: allInfo.eduInfo(),
      // 合同信息
      contractInfo: allInfo.contractInfo(),
      // 紧急联系人
      contactInfo: allInfo.contactInfo(),
      // 个人材料
      personalInfo: allInfo.personalInfo(),
      // 自定义
      defineInfo: [
        {
          parentCode: 'defineInfo',
          systemFieldId: '-1',
          fieldName: '单行输入框',
          fieldKey: '',
          systemFlag: false,
          fieldEdited: 1, // 修改（0：不可修改，1：可修改）
          fieldType: '0',
          fixed: false,
          fieldDescription: '请输入',
          ruleContent: [],
          fieldContent: [],
          isMust: true,
          staffRecordsIds: []
        },
        {
          parentCode: 'defineInfo',
          systemFieldId: '-1',
          fieldName: '多行输入框',
          fieldKey: '',
          systemFlag: false,
          fieldEdited: 1, // 修改（0：不可修改，1：可修改）
          fieldType: '1',
          fixed: false,
          fieldDescription: '请输入',
          ruleContent: [],
          fieldContent: [],
          isMust: true,
          staffRecordsIds: []
        },
        {
          parentCode: 'defineInfo',
          systemFieldId: '-1',
          fieldName: '单选框',
          fieldEdited: 1, // 修改（0：不可修改，1：可修改）
          fieldType: '2',
          fixed: false,
          fieldDescription: '请选择',
          ruleContent: [],
          fieldContent: [
            {'type':'checkbox','name':'选项1',},
            {'type':'checkbox','name':'选项2',},
            {'type':'checkbox','name':'选项3',}
          ],
          isMust: true,
          staffRecordsIds: []
        },
        {
          parentCode: 'defineInfo',
          systemFieldId: '-1',
          fieldName: '多选框',
          fieldEdited: 1, // 修改（0：不可修改，1：可修改）
          fieldType: '3',
          fixed: false,
          fieldDescription: '请选择',
          ruleContent: [],
          fieldContent: [
            {'type':'checkbox','name':'选项1',},
            {'type':'checkbox','name':'选项2',},
            {'type':'checkbox','name':'选项3',}
          ],
          isMust: true,
          staffRecordsIds: []
        },
        {
          parentCode: 'defineInfo',
          systemFieldId: '-1',
          fieldName: '日期',
          fieldEdited: 1, // 修改（0：不可修改，1：可修改）
          fieldType: '4',
          fixed: false,
          fieldDescription: '请选择',
          typeValue: '年-月-日',
          ruleContent:[
            {'type':'radio','name':'年-月-日', 'key': 1, 'checked':'checked','isEdit':1},
            {'type':'radio','name':'年-月', 'key': 2,'isEdit':1}
          ],
          isMust: true,
          staffRecordsIds: []
        },
        {
          parentCode: 'defineInfo',
          systemFieldId: '-1',
          fieldName: '日期区间',
          fieldEdited: 1, // 修改（0：不可修改，1：可修改）
          fieldType: '5',
          fixed: false,
          startName: '开始时间',
          endName: '结束时间',
          startDescription: '请选择开始时间',
          endDescription: '请选择结束时间',
          typeValue: '年-月-日',
          ruleContent:[
            {'type':'radio','name':'年-月-日', 'key': 1, 'checked':'checked','isEdit':1},
            {'type':'radio','name':'年-月', 'key': 2,'isEdit':1}
          ],
          isMust: true,
          staffRecordsIds: []
        },
        {
          parentCode: 'defineInfo',
          systemFieldId: '-1',
          fieldName: '数字输入框',
          fieldKey: '',
          systemFlag: false,
          fieldType: "6",  // 字段类型 数字输入框
          fieldEdited: 1, // 修改（0：不可修改，1：可修改）
          fixed: false,
          fieldDescription: '请输入',
          ruleContent: [],
          fieldContent: [],
          isMust: true,
          unit: '单位', // 数字单位
          staffRecordsIds: []
        },
        {
          parentCode: 'defineInfo',
          systemFieldId: '-1',
          fieldName: '图片',
          fieldKey: '',
          systemFlag: false,
          fieldType: "7",  // 字段类型
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          fixed: false,
          fieldDescription: '最多上传9张图片',
          ruleContent: [],
          fieldContent:[],
          isMust: true,
          staffRecordsIds: []
        },
      ],

      // 中间数据集合
      currentIndex: 0, //当前选择的 item
      currentKey: '', // 当前选择的 item key
      tempaletDataList:[
        {
          parentCode: '',
          systemFieldId: 'baseInfo',
          fieldName: '基本信息',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        /*{
          systemFieldId: 'jobInfo',
          fieldName: '工作信息',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        {
          systemFieldId: 'selfInfo',
          fieldName: '个人信息',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        {
          systemFieldId: 'eduInfo',
          fieldName: '学历信息',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        {
          systemFieldId: 'contractInfo',
          fieldName: '合同信息',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        {
          systemFieldId: 'contactInfo',
          fieldName: '紧急联系人',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        {
          systemFieldId: 'personalInfo',
          fieldName: '个人资料',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },*/
      ],

      // 添加父级集合
      fieldParent: {
        'baseInfo': {
          parentCode: '',
          systemFieldId: 'baseInfo',
          fieldName: '基本信息',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        'jobInfo': {
          parentCode: '',
          systemFieldId: 'jobInfo',
          fieldName: '工作信息',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        'selfInfo': {
          parentCode: '',
          systemFieldId: 'selfInfo',
          fieldName: '个人信息',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        'eduInfo': {
          parentCode: '',
          systemFieldId: 'eduInfo',
          fieldName: '学历信息',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        'contractInfo': {
          parentCode: '',
          systemFieldId: 'contractInfo',
          fieldName: '合同信息',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        'contactInfo':{
          parentCode: '',
          systemFieldId: 'contactInfo',
          fieldName: '紧急联系人',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
        'personalInfo': {
          parentCode: '',
          systemFieldId: 'personalInfo',
          fieldName: '个人资料',
          fieldEdited: 0, // 修改（0：不可修改，1：可修改）
          isMust: true,
          fieldDescription: '',
          sonList:[
          ],
        },
      },

      // sonlist
      currentChildIndex: null,
      childIndex: 0,

      // 员工档案权限
      staffRecordsOptions: [
        {
          id: 'staffVisible',
          name: '对员工可见'
        },
        {
          id: 'staffUnvisible',
          name: '对员工可见'
        },
        {
          id: 'staffMod',
          name: '对员工可修改'
        },
        {
          id: 'staffUnmod',
          name: '对员工不可修改'
        }
      ],

      // 已经选择的字段集合
      setList: [],
    }
  },
  created() {
    // this.selectReplayStyle()
  },
  methods: {
    /**
     * baseInfoClone
     */
    baseInfoClone() {
      var that = this
      // that.baseInfo = JSON.parse(JSON.stringify(that.baseInfo))
    },

    inputFocus(tag,obj){
      var that = this
      console.log(tag,obj);

      that.tempTag = tag;
      that.tempObj = obj;

    },

    formatInput(e){
      var that = this
      console.log(e,e.target.value)
      that.tempObj[that.tempTag] = String(e.target.value).replace(/[^\d]/g,'')
      // 判断最大值和最小值
      if (that.tempObj['limitCountMin'] >= that.tempObj['limitCountMax']) {
        that.$message.error({
          duration: 1000,
          message: "长度限制格式有误"
        })
        // 重新赋值
        that.tempObj['limitCountMax'] = 20 + parseInt(that.tempObj['limitCountMin'])
      }
    },

    /**
     * 点击左侧字段 item
     */
    clickItem(item) {
      var that = this
      console.log(item)
      // item.fixed = !item.fixed
      // 判断 中间数据中是否存在父级
      let fieldArr = that.tempaletDataList.map(item=>item.systemFieldId)
      if (!fieldArr.includes(item.parentCode) && item.parentCode !== 'defineInfo') {
        that.tempaletDataList.push(
          that.fieldParent[item.parentCode]
        )

        that.tempaletDataList = JSON.parse(JSON.stringify(that.tempaletDataList))
      }
    },

    /**
     * move 检查对应所在组
     */
    checkMove(evt) {
      let flag = true;
      if (evt.draggedContext.element.parentCode == 'baseInfo' && !evt.to.className.includes('baseInfo')) {
        flag = false;
      }
      if (evt.draggedContext.element.parentCode == 'jobInfo' && !evt.to.className.includes('jobInfo')) {
        flag = false;
      }
      if (evt.draggedContext.element.parentCode == 'selfInfo' && !evt.to.className.includes('selfInfo')) {
        flag = false;
      }
      if (evt.draggedContext.element.parentCode == 'eduInfo' && !evt.to.className.includes('eduInfo')) {
        flag = false;
      }
      if (evt.draggedContext.element.parentCode == 'contractInfo' && !evt.to.className.includes('contractInfo')) {
        flag = false;
      }
      if (evt.draggedContext.element.parentCode == 'contactInfo' && !evt.to.className.includes('contactInfo')) {
        flag = false;
      }
      if (evt.draggedContext.element.parentCode == 'personalInfo' && !evt.to.className.includes('personalInfo')) {
        flag = false;
      }
      return flag
    },

    /**
     *  move{relatedContext, draggedContext}
     */
    onMove(evt) {
      console.log('move:')
      console.log(evt.draggedContext,evt.dragged,evt.to)
      const that = this;
      // 判断中间是否存在父级
      if (!that.checkMove(evt)) {
        return false;
      }

      const relatedElement = evt.relatedContext.element;
      const draggedElement = evt.draggedContext.element;
      console.log(draggedElement.fixed)//(!relatedElement || !relatedElement.fixed) &&
      return !draggedElement.fixed
    },

    /**
     *  move child
     */
    onChildMove(evt){
      var that = this
      var tag = true;
      console.log("onChildMove:",evt,evt.to.className)
      if (evt.dragged.className.indexOf('block-class') != -1 ) {
        if (evt.to.className.indexOf('block-wrap') != -1) {
          // tag = false
        }
      }
      console.log(tag)
      return tag
    },

    /**
     *  move end
     */
    itemMoveEnd(evt) {
      var that = this
      that.isDragging = false;
      console.log(" move end:",evt,evt.clone.dataset.type)
      that.selectKey = '';
      that.selectKey = evt.clone.dataset.type;

      // 判断中间是否已经添加
      that.tempaletDataList.forEach(function(ele,index){
        ele.sonList.forEach(function(child,key) {
          if (child.systemFieldId == that.selectKey) {
            setKey()
          }
        })
      })

      function setKey() {
        if (that.selectKey.includes('k1')) {
          that.baseInfo.forEach(function(ele,index){
            if (ele.systemFieldId == that.selectKey) {
              ele.fixed = true
            }
          })
          return;
        }
        if (that.selectKey.includes('k2')) {
          that.jobInfo.forEach(function(ele,index){
            if (ele.systemFieldId == that.selectKey) {
              ele.fixed = true
            }
          })
          return;
        }
        if (that.selectKey.includes('k3')) {
          that.selfInfo.forEach(function(ele,index){
            if (ele.systemFieldId == that.selectKey) {
              ele.fixed = true
            }
          })
          return;
        }
        if (that.selectKey.includes('k4')) {
          that.eduInfo.forEach(function(ele,index){
            if (ele.systemFieldId == that.selectKey) {
              ele.fixed = true
            }
          })
          return;
        }
        if (that.selectKey.includes('k5')) {
          that.contractInfo.forEach(function(ele,index){
            if (ele.systemFieldId == that.selectKey) {
              ele.fixed = true
            }
          })
          return;
        }
        if (that.selectKey.includes('k6')) {
          that.contactInfo.forEach(function(ele,index){
            if (ele.systemFieldId == that.selectKey) {
              ele.fixed = true
            }
          })
          return;
        }
        if (that.selectKey.includes('k7')) {
          that.personalInfo.forEach(function(ele,index){
            if (ele.systemFieldId == that.selectKey) {
              ele.fixed = true
            }
          })
          return;
        }
        // 自定义暂时不限制
        // if (that.selectKey.indexOf('E') !=-1) {
        //   that.defineInfo.forEach(function(ele,index){
        //     if (ele.key == that.selectKey) {
        //       ele.fixed = true
        //     }
        //   })
        //   return;
        // }
      }

      that.selectKey = '';
      console.log("move end:",that.baseInfo,that.tempaletDataList)

      that.tempaletDataList = JSON.parse(JSON.stringify(that.tempaletDataList))
    },

    cloneDefine(evt) {
      var that = this
      console.log("clone>>>>",evt)
    },

    // 中间部分方法

    /**
     *  选择 item 即父级 item
     */
    selectItem(key,index) {
      var that = this
      console.log(key,index)
      that.currentKey = key;
      that.currentIndex = index;
      that.currentChildIndex = null;
    },

    /**
     *   删除 item 即父级 item
     */
    deleteItem(key,index) {
      var that = this
      console.log(key,index)
      that.tempaletDataList.splice(index,1)
      that.currentIndex --;

      if (that.currentIndex <= 0) {
        that.currentIndex = 0;
      }
      if (that.tempaletDataList.length) {
        that.currentKey = that.tempaletDataList[that.currentIndex].systemFieldId;
      }
      // 删除后重新设置 fixed 值
      that[key].forEach(function(ele,index){
        ele.fixed = false
      })

      console.log(that.currentIndex,that.currentKey,that.tempaletDataList)
    },

    // 添加 item
    addItem(evt) {
      var that = this;
      console.log("中间add:",evt,that.tempaletDataList)
    },

    // 添加child
    addDragItem(evt) {
      var that = this;
      console.log("中间 child-add:",evt,that.tempaletDataList)
      return false;
    },

    /**
     *  选择 item 即子级 item
     */
    selectChildItem(key,index,ind,list) {
      var that = this
      console.log(key,index,ind,list)
      that.currentKey = key;
      that.currentIndex = null;
      that.childIndex = index
      that.currentChildIndex = ind;
      console.log(that.tempaletDataList)
    },
    /**
     *  删除 item 即子级 item
     */
    deleteChildItem(key,index,ind,list,childItem) {
      var that = this
      console.log(key,index,ind,list)
      that.childIndex = index
      // list.splice(ind,1)
      that.tempaletDataList = JSON.parse(JSON.stringify(that.tempaletDataList))
      that.tempaletDataList[index].sonList.splice(ind,1)

      // 重新设置左侧的 fixed
      console.log(childItem.parentCode)
      that[childItem.parentCode].forEach(function(ele,index){
        if (ele.systemFieldId === key) {
          ele.fixed = false;
        }
      })
    },

    /**
     *  右侧方法
     */

    checkedChange(e,item){
      var that = this
      console.log(e,item)
    },

    /**
     *  添加删除选项
     */
    delChildItem(index,ind,item) {
      var that = this
      console.log(index,ind,item)
      item.fieldContent.splice(ind,1)
    },
    addChildItem(index,ind,item) {
      var that = this
      console.log(index,ind,item)
      item.fieldContent.forEach(function(ele,index) {
        if (ele.name) {}
      })

      // 多选
      if (item.systemFieldId == "k404"|| item.systemFieldId == '-1'&&item.fieldType==1) {
        if (ind == 19) {
          that.$message.error({
            duration: 1000,
            message: "最多可添加 20 项"
          })
        }else {
          console.log('item.systemFieldId>>>',item.systemFieldId,item.fieldType)
          if (item.systemFieldId == '-1'&&item.fieldType==1){
            item.fieldContent.push(
              {'type':'checkbox','name':'请输入选项'},
            )

            // 判断重复字段
            console.log(item.fieldContent)
            var arrValues = item.fieldContent.map(ite=>ite.name) // 返回对象中键值集合的数组
            console.log("所有name:",arrValues)
            if (that.isRepeat(arrValues)) {
              item.fieldContent.splice(item.fieldContent.length-1,1)
              arrValues.splice(item.fieldContent.length-1,1)
              that.$message.error({
                duration: 1000,
                message: "选项不能重复"
              })
              console.log(item.fieldContent,arrValues)

              return;
            }
            return;
          }
          item.fieldContent.push(
            {'type':'checkbox','name':'请输入选项'},
          )

          // 判断重复字段
          console.log(item.fieldContent)
          var arrValues = item.fieldContent.map(ite=>ite.name) // 返回对象中键值集合的数组
          console.log("所有name:",arrValues)
          if (that.isRepeat(arrValues)) {
            item.fieldContent.splice(item.fieldContent.length-1,1)
            arrValues.splice(item.fieldContent.length-1,1)
            that.$message.error({
              duration: 1000,
              message: "选项不能重复"
            })
            console.log(item.fieldContent,arrValues)

            return;
          }

        }
        return;
      }

      // 单选
      if (ind == 4) {
        that.$message.error({
          duration: 1000,
          message: "最多可添加 5 项"
        })
        return;
      }

      item.fieldContent.push(
        {'type':'radio','name':'请输入选项'},
      )
      // 判断重复字段
      console.log(item.fieldContent)
      var arrValues = item.fieldContent.map(ite=>ite.name) // 返回对象中键值集合的数组
      console.log("所有name:",arrValues)
      if (that.isRepeat(arrValues)) {
        item.fieldContent.splice(item.fieldContent.length-1,1)
        arrValues.splice(item.fieldContent.length-1,1)
        that.$message.error({
          duration: 1000,
          message: "选项不能重复"
        })
        console.log(item.fieldContent,arrValues)

        return;
      }

    },

    // 改变输入框的值,子组件触发方法
    itemInput(val) {
      var that = this
      console.log(val,val.c3Index)

      // 判断组块子级
      if (!!val && val.child == 'child') {
        // 如果是标题
        if (!!val && val.title == 'title') {
          console.log(that.tempaletDataList[that.childIndex],that.currentChildIndex)
          that.tempaletDataList[that.childIndex].sonList[that.currentChildIndex].fieldName = val.value;
          return;
        }

        // 如果是/
        console.log(that.tempaletDataList[that.childIndex].sonList[that.currentChildIndex])
        if (!!val && val.flag == 'k303') {
          that.tempaletDataList[that.childIndex].sonList[that.currentChildIndex].fieldContent[val.c3Index].name = val.value;
          return;
        }
        that.tempaletDataList[that.childIndex].sonList[that.currentChildIndex].fieldDescription = val.value;

        return;
      }

      // 如果是标题
      if (!!val && val.title == 'title') {
        that.tempaletDataList[that.currentIndex].fieldName = val.value;
        return;
      }
      // 如果是年收入/
      if (!!val && val.flag == 'k303') {
        that.tempaletDataList[that.currentIndex].fieldContent[val.c3Index].name = val.value;
        return;
      }
      that.tempaletDataList[that.currentIndex].fieldDescription = val;
    },

    // 自定义复选(单行输入框)
    changeCheck(e,ind,item) {
      var that = this
      console.log(e,ind,item)
      // item[ind].checked = e
      // if (e) {
      //   item[ind].checked = 'unchecked'
      // }else {
      //   item[ind].checked ='checked';
      // }

      console.log(item)
    },

    // 自定义单选(日期)
    changeRadio(e,ind,item) {
      var that = this
      console.log(e, ind ,item )

    },

    // 判断添加重复字段
    isRepeat(arr) {
      var hash = {};
      for(var i in arr) {
        if(hash[arr[i]]){
           return true;
         }
         hash[arr[i]] = true;
      }
      return false;
    },


    //路由跳转
    changeRoute(route) {
      this.$router.push(route);
    },

    // 检查
    checkTag(data) {
      var that = this
      var tag = {}
      tag.flag = true;
      tag.bodyFlag = true;
      tag.filedFlag = true;
      data.forEach(function(ele,index){
        ele.isMust = ele.isMust == true? 1: 0; //是否必填（0：不是，1：必填）
        ele.sortNum = index + 1; //排序
        // console.log(">>>>>>>>>>>>>>>>>>>>" ,ele.fieldName )
        if (ele.fieldName == '') {
          tag.filedFlag = false
          tag.name = ele.fieldName || ''
          return false;
        }
        if (!!ele.enterpriseIds && (ele.enterpriseIds == null || !ele.enterpriseIds.length)) {
          tag.flag = false
          tag.name = ele.fieldName
        }

        if (ele.systemFieldId == 'k203' && !ele.babyIds.length) {
          console.log(ele.babyIds)
          tag.bodyFlag = false
          tag.name = ele.fieldName || '宝宝'
        }

        // 判断组块
        if (ele.systemFieldId == -1 && ele.fieldType == 5 ) {
          ele.sonList.forEach(function(el,index){
            if (el.fieldName == '') {
              tag.filedFlag = false
              tag.name = el.fieldName || ''
              return false;
            }
            if (el.enterpriseIds == null || !el.enterpriseIds.length) {
              tag.flag = false
              tag.name = el.fieldName
            }
          })
        }
      })
      return tag
    },

    guid() {
        return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
            return v.toString(16);
        });
    },

    // 保存
    saveAndBack() {
      var that = this
      console.log(that.tempaletDataList);
      var data = JSON.parse(JSON.stringify(that.tempaletDataList))

      // 检查商户选中
      if (!data||!data.length) {
        that.$message.error({
          duration: 1000,
          message: '请配置开卡字段'
        })
        return;
      }
      // console.log(that.checkTag(data))
      var tagObj = that.checkTag(data)
      console.log(tagObj)

      // 检查空字段
      if (!tagObj.filedFlag) {
        that.$message.error({
          duration: 1000,
          message: tagObj.name+'字段标题不能为空'
        })
        return;
      }

      // 检查宝宝
      if (!tagObj.bodyFlag) {
        that.$message.error({
          duration: 1000,
          message: tagObj.name+'字段至少选择一个选项'
        })
        return;
      }



      data.forEach(function(ele,index){
        ele.isMust = ele.isMust == true? 1: 0; //是否必填（0：不是，1：必填）
        // 判断可修改
        ele.fieldEdited = ele.fieldEdited==true? 1:0
        ele.sortNum = index + 1; //排序
        if (!!ele.enterpriseIds && ele.enterpriseIds.length) {
          ele.enterpriseIds = ele.enterpriseIds.join(',')
        }

        if (ele.babyIds) {
          ele.babyIds = ele.babyIds.join(',')
        }

        if (ele.fieldContent) {
          ele.fieldContent = JSON.stringify(ele.fieldContent)
        }

        if (ele.ruleContent) {
          ele.ruleContent = JSON.stringify(ele.ruleContent)
        }

        if (ele.systemFieldId != -1||(ele.systemFieldId == -1)&&ele.fieldType != 5) {
          ele.parentFieldId = '-1';
        }

        // 日期
        if (ele.systemFieldId == -1 && ele.fieldType == 4) {
          if (ele.typeValue == "年-月") {
            ele.regularRule = '0000010';
          }else{
            ele.regularRule = '0000100';
          }
        }

      })

      // 判断重复字段
      var flagArr = data.map(item=>item.fieldName)
      if (that.isRepeat(flagArr)) {
        that.$message.error({
          duration: 1000,
          message: '标题字段名不能重复'
        })
        return;
      }

      console.log(data)
      // that.saveAllData(data)
    },

    // 保存数据
    saveAllData(data) {
      var that = this
      var para =  {
        params: JSON.stringify(data)
      }

      postRequest('/api-admin/save-card-filed-template',para)
      .then((res) => {
        console.log( res.data)
        var resData = res.data
        if (resData.errorCode == 0) {

          showMsg.showmsg('保存成功','success')
          that.changeRoute('/memberCardSet')
          return;
        }
        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);

        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    // 获取模板所有字段
    getTempInfo() {
      var that = this
      var para = {

      }
      postRequest('/api-admin/member-card-filed-template',para)
      .then((res) => {
        console.log( res.data)
        var resData = res.data
        if (resData.errorCode == 0) {

          var data = resData.result.cateList
          data.forEach(function(el,ind){
            el.fieldList.forEach(function(ele,index){
              if (!!ele.fieldContent && ele.fieldContent != -1) {
                if (ele.fieldContent.indexOf("'") != '-1') {
                  ele.fieldContent = JSON.parse(ele.fieldContent.replace(/'/g, '"'))
                }else {
                  ele.fieldContent = JSON.parse(ele.fieldContent)
                }
                // ele.fieldContent = JSON.parse(ele.fieldContent.replace(/'/g, '"'))

              }
              if (!!ele.ruleContent && ele.ruleContent != -1) {
                if (ele.ruleContent.indexOf("'") != '-1') {
                  ele.ruleContent = JSON.parse(ele.ruleContent.replace(/'/g, '"'))
                }else {
                  ele.ruleContent = JSON.parse(ele.ruleContent)
                }
                // ele.ruleContent = JSON.parse(ele.ruleContent.replace(/'/g, '"'))
              }

              // 判断必选
              ele.isMust = ele.isMust==1? true:false

              // 判断可修改
              ele.fieldEdited = ele.fieldEdited==1? true:false

              // 判断商户全选
              if (!!ele.enterpriseIds && ele.enterpriseIds != ''&& ele.enterpriseIds != null && !!ele.enterpriseIds.length) {
                // console.log(ele.enterpriseIds)
                ele.enterpriseIds = ele.enterpriseIds.split(',')
              }else{
                ele.enterpriseIds = []
              }

              // console.log(ele.enterpriseIds)

              ele.isIndeterminate = false;

              if (!!ele.enterpriseIds&&ele.enterpriseIds.length == that.merchantOptions.length) {
                ele.checkAll = true;
              }else {
                ele.checkAll = false;
              }

              if (!!ele.enterpriseIds&&!!ele.enterpriseIds.length&&ele.enterpriseIds.length < that.merchantOptions.length){
                ele.isIndeterminate = true;
              }




              // 字段不一样,统一下字段
              if (!ele.systemFieldId) {
                ele.systemFieldId = ele.opencardFieldId
              }

              // 判断禁用 fixed 字段
              // console.log(that.setList)
              if (that.setList.indexOf(ele.systemFieldId)!=-1) {
                ele.fixed = true
              }else{
                ele.fixed = false;
              }

              // 如果是 k10开头
              if (ele.systemFieldId.indexOf('k10') != -1) {
                that.baseInfo.push(ele)
              }
              // 如果是 k20开头
              if (ele.systemFieldId.indexOf('k20') != -1) {
                // 宝宝信息
                if (ele.systemFieldId == 'k203') {
                  console.log("ele.babyIds:",ele.babyIds)
                  ele.babyIds = []
                }
                that.familyInfo.push(ele)
              }
              // 如果是 k30开头
              if (ele.systemFieldId.indexOf('k30') != -1) {
                that.assetInfo.push(ele)
              }
              // 如果是 k40开头
              if (ele.systemFieldId.indexOf('k40') != -1) {
                that.otherInfo.push(ele)
              }

              // 自定义不是从接口返回
              // if (ele.systemFieldId == -1) {
              //   that.defineInfo.push(ele)
              // }
              console.log(that.familyInfo)
            })
          })

          //


          // showMsg.showmsg('设置成功','success')
          return;
        }
        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);

        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    // 获取已经保存模板信息
    getInfo() {
      var that = this
      var para = {

      }
      postRequest('/api-admin/get-card-field-template-detail',para)
      .then((res) => {
        console.log( res.data)
        var resData = res.data
        if (resData.errorCode == 0) {
          that.setList = [];
          var data = resData.result
          data.forEach(function(ele,index){

            if (!!ele.fieldContent && ele.fieldContent != -1) {
              // console.log(ele.fieldContent,ele.fieldContent.indexOf("'"))
              if (ele.fieldContent.indexOf("'") != '-1') {
                ele.fieldContent = JSON.parse(ele.fieldContent.replace(/'/g, '"'))
              }else {
                ele.fieldContent = JSON.parse(ele.fieldContent)
              }


            }
            if (!!ele.ruleContent && ele.ruleContent != -1) {
              console.log(ele.ruleContent,ele.ruleContent.indexOf("'"))
              if (ele.ruleContent.indexOf("'") != '-1') {
                ele.ruleContent = JSON.parse(ele.ruleContent.replace(/'/g, '"'))
              }else {
                ele.ruleContent = JSON.parse(ele.ruleContent)
              }

              if (ele.systemFieldId==-1 && ele.fieldType == 0) {
                ele.ruleContent.forEach(function(el,ind){
                  el.select = el.select == 1? true:false
                })
              }
            }

            // 判断必选
            ele.isMust = ele.isMust==1? true:false
            // 判断可修改
            ele.fieldEdited = ele.fieldEdited==1? true:false

            // 判断商户全选
            if (!!ele.enterpriseIds&&ele.enterpriseIds != ''&& ele.enterpriseIds != null) {
              ele.enterpriseIds = ele.enterpriseIds.split(',')
            }
            if (ele.enterpriseIds.length == that.merchantOptions.length) {
              ele.checkAll = true;
            }else {
              ele.checkAll = false;
            }


            // 判断半选
            ele.isIndeterminate = false;

            if (!!ele.enterpriseIds&&ele.enterpriseIds.length == that.merchantOptions.length) {
              ele.checkAll = true;
            }else {
              ele.checkAll = false;
            }

            if (!!ele.enterpriseIds&&!!ele.enterpriseIds.length&&ele.enterpriseIds.length < that.merchantOptions.length){
              ele.isIndeterminate = true;
            }

            // 如果是生日
            if(ele.modifyLimitStatus != '' || ele.modifyLimitStatus==0){
              ele.modifyLimitStatus = String(ele.modifyLimitStatus)
            }

            // 宝宝信息
            if (!!ele.babyIds) {
              ele.babyIds = ele.babyIds.split(',')
            }else {

              console.log("ele.babyIds:",ele.babyIds)
              ele.babyIds = []
            }

            // 判断禁用,把已经获取的字段添加到数组中,以后判断是否禁用
            that.setList.push(ele.systemFieldId)

            // 判断自定义部分 regularRule
            // if (ele.systemFieldId == -1 ) {
            //   var regularArr = ele.regularRule.split('')
            //   ele.zh = regularArr[0];
            //   ele.num = regularArr[1];
            //   ele.char = regularArr[2];
            //   ele.symb = regularArr[3];
            //   ele.ymd = regularArr[4];
            //   ele.ym = regularArr[5];
            //   ele.email = regularArr[6];
            // }

            // 日期
            if (ele.systemFieldId == -1 && ele.fieldType == 4) {
              if (ele.regularRule == '0000010') {
                ele.typeValue = "年-月";
              }else{
                ele.typeValue = "年-月-日";
              }
            }


            // 判断组块
            if (ele.systemFieldId == -1 && ele.fieldType == 5 ) {
              if (ele.sonList == null || !ele.sonList) {
                ele.sonList  = []
              }
              if (!!ele.sonList&&ele.sonList.length) {
                ele.sonList.forEach(function(el,index){
                  if (!!el.fieldContent && el.fieldContent != -1) {
                    if (el.fieldContent.indexOf("'") != '-1') {
                      el.fieldContent = JSON.parse(el.fieldContent.replace(/'/g, '"'))
                    }else {
                      el.fieldContent = JSON.parse(el.fieldContent)
                    }
                    // el.fieldContent = JSON.parse(el.fieldContent.replace(/'/g, '"'))

                  }
                  if (!!el.ruleContent && el.ruleContent != -1) {
                    if (el.ruleContent.indexOf("'") != '-1') {
                      el.ruleContent = JSON.parse(el.ruleContent.replace(/'/g, '"'))
                    }else {
                      el.ruleContent = JSON.parse(el.ruleContent)
                    }
                    // el.ruleContent = JSON.parse(el.ruleContent.replace(/'/g, '"'))
                  }

                  // 判断必选
                  el.isMust = el.isMust==1? true:false

                  // 判断商户全选
                  if (!!el.enterpriseIds&&el.enterpriseIds != ''&& el.enterpriseIds != null) {
                    el.enterpriseIds = el.enterpriseIds.split(',')
                  }
                  if (el.enterpriseIds.length == that.merchantOptions.length) {
                    el.checkAll = true;
                  }else {
                    el.checkAll = false;
                  }

                  // 日期
                  if (el.systemFieldId == -1 && el.fieldType == 4) {
                    if (el.regularRule == '0000010') {
                      el.typeValue = "年-月";
                    }else{
                      el.typeValue = "年-月-日";
                    }
                  }

                  // 判断半选
                  el.isIndeterminate = false;

                  if (!!el.enterpriseIds&&el.enterpriseIds.length == that.merchantOptions.length) {
                    el.checkAll = true;
                  }else {
                    el.checkAll = false;
                  }

                  if (!!el.enterpriseIds&&!!el.enterpriseIds.length&&el.enterpriseIds.length < that.merchantOptions.length){
                    el.isIndeterminate = true;
                  }
                })
              }
            }
          })

          //
          console.log(data)

          that.tempaletDataList = data

          // 获取模板所有字段
          // that.getTempInfo()
          // showMsg.showmsg('设置成功','success')
          return;
        }
        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);

        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

  },
  watch: {
    isDragging (newValue) {
      var that = this
      if (newValue){
        that.delayedDragging= true
        return
      }
      that.$nextTick( () =>{
        that.delayedDragging =false
      })
    }
  },
  components: {
    draggable,
    AddInput
  },
  mounted() {
    var that = this;
    // 获取已经配置的数据
    that.getInfo()
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
}

</script>
<style lang="less" scoped>
.template-wrap {
  width: 100%;
  /*height: 100%;*/
  min-height: 860px;
  padding: 0;
  margin: 0;
  background: url('../../assets/template-bg.jpg') no-repeat center center;
  background-size: 100% 100%;

  .b-t-1 {
    border-top: 1px solid #E4E7ED;
  }

  .template-contain {
    width: 1200px;
    margin: 0 auto;
  }

  .template-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    height: 80px;
    align-items: center;

    .flex-1 {
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      -o-flex: 1;
      flex: 1;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      align-items: center;
    }

    .flex-r {
      justify-content: flex-end;
    }

    .template-title-span {
      color: #fff;
      font-size: 30px;
      padding-left: 18px;
    }

    .el-button--default.is-plain {
      background: rgba(255,255,255, 0);
      color: #fff;
      &:hover{
        color: #1890ff;
      }
    }
  }

  .template-body {
    width: 100%;
    position: relative;
    overflow: hidden;

    .template-cell {

    }

    .el-tab-pane {
      height: 660px;
      overflow-y: scroll;
    }

    /* 左侧 */
    .template-cell-l {
      width: 350px;
      float: left;
      height: 740px;
      padding-top: 40px;

      .el-tabs{
        /deep/ .el-tabs__item {
          width: 50%;
          width: 175px;
          /*padding: 0;*/
          color: rgba(255,255,255, .5);
          &.is-active {
            color: #1890ff;
          }
        }
      }

      .compenent-item {
        position: relative;
        width: 148px;
        height: 42px;
        margin: 0 15px 15px 0;
        line-height: 40px;
        padding: 0 10px;
        display: inline-block;
        text-align: center;
        cursor: move;
        color: #fff;
        padding: 0;
        overflow: hidden;
        font-size: 12px;
        border: 1px dashed rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.1);
        &.fixed-item {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }

      #list5 {
        .compenent-item {
          text-align: left;
          padding: 0 16px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          overflow: hidden;
          span,.bg-icon {
            display: inline-block;
            vertical-align: middle;
          }
          .bg-icon {
            position: absolute;
            top: 50%;
            right: 16px;
            -webkit-transform: translate(0,-50%);
            -ms-transform: translate(0,-50%);
            -o-transform: translate(0,-50%);
            transform: translate(0,-50%);
            width: 17px;
            height: 17px;
            background: url('../../assets/icon-template.png') no-repeat center center;
            background-size: 100%;
            &.bg-icon-one {
              background-position: 0 -16px;
            }
            &.bg-icon-two {
              background-position: 0 0;
            }
            &.bg-icon-three {
              background-position: 0 -50px;
            }
            &.bg-icon-four {
              background-position: 0 -182px;
            }
            &.bg-icon-five {
              background-position: 0 -67px;
            }
            &.bg-icon-six {
              background-position: 0 -84px;
            }
            &.bg-icon-seven {
              background-position: 0 -33px;
            }
            &.bg-icon-eight {
              background-position: 0 -99px;
            }
          }
        }
      }
      .filed-item-title {
          padding: 15px 0;
          font-size: 14px;
          color: #FFFFFF;
      }
    }
    /* 中间 */
    /* 模板 */
    .template-cell-m {
      float: left;
      width: 410px;
      height: 740px;
      margin: 0 20px;
      position: relative;

      .view-content {
        position: relative;
      }

      .templet-null-img {
        width: 249px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
      }
    }

    .drag-wrap {
      min-height: 530px;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .phone-container{
      margin-top:40px;
    }
    .phone-view{
      background: url(../../assets/iphone.png) no-repeat;
      background-size: 100%;
      width: 410px;
      height: 740px;
      /*margin: 0 20px;*/
      position: relative;
    }

    .phone-show-content{
      width: 330px;
      height: 537px;
      position:absolute;
      left:41px;
      top: 83px;
      overflow-y: auto;
    }

    .opend-card-item {
      height: 46px;
      line-height: 46px;
      background: #fff;
      border-bottom: 1px solid #e7e7eb;
      font-size: 14px;
      position: relative;

      &.sex::after {
        content: '';
        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }

    .opend-card-group-title {
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
    }

    .opend-card-item {
      height: 46px;
      line-height: 46px;
      background: #fff;
      border-bottom: 1px solid #e7e7eb;
    }

    .phone-list-item{
      height:44px;
      line-height:44px;
      background: #fff;
      margin-bottom:5px;
    }

    .item-title {
      width: 100px;
      float: left;
      padding-left: 10px;
    }

    .filed-item {
      background: #fff;
      height: 46px;
      width: 100%;
      height: auto;
      background: #fff;
      position: relative;
      cursor: move;
      padding: 0px;
      margin: 0;
      font-size: 12px;
      color: #292929;

      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      &.active-item {
        border: 1px solid #1890ff;
      }

      &+.filed-item {
        margin-top: 5px;

        &.li-block {
          margin-top: 15px
        }
      }
      /*删除*/
      .item-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        background: #1890ff;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        display: none;
        z-index: 2;
      }
      &:hover{
        border: 1px dashed #1890ff;
        .item-close {
          display: block;
        }
      }


    }
    /* 组块 */
    .block {
      min-height: 308px;
      background: #f0eff4;

      .block-head {
        width: 100%;
        background: #f5f5f8;
        padding: 0;
        height: 35px;

        .opencard-item-title {
          height: 35px;
          line-height: 35px;
         /* &.block-pre-wrap{
            line-height: 12px;
            word-break: break-all;
            white-space: pre-wrap;
            padding-top: 7px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
          }*/
        }
      }
      .drag-wrap {
        min-height: 250px;
      }
    }



    .opencard-drag {
      background: #fff;
      height: 46px;
    }

    .opencard-item-title{
      width: 90px;
      height: 46px;
      line-height: 46px;
      text-align: left;
      float: left;
      padding-left: 10px;
      overflow: hidden;
      white-space: nowrap;
      &.title-pre-wrap {
        line-height: 15px;
        word-break: break-all;
        white-space: pre-wrap;
        padding-top: 9px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      /*&.block-pre-wrap{
        line-height: 12px;
        word-break: break-all;
        white-space: pre-wrap;
        padding-top: 9px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }*/
    }

    .show-warm-text{
      color:#C8C8CD;
      width:185px;
      text-align: left;
      display:inline-block;
      white-space: nowrap;
      height:46px;
      line-height:46px;

      &.select-flag {
        width: 217px;
        text-align: right;
      }
    }


    /* 右侧 */
    .template-cell-r{
      width: 400px;
      float: left;
      overflow: hidden;
      padding-top: 40px;

      .el-tabs {
        /deep/.el-tabs__item {
          width: 175px;
          /* padding: 0; */
          /*color: rgba(255, 255, 255, 0.5);*/
        }

        /deep/.el-tabs__nav-wrap::after {
          content: none;
        }
      }

      .label-txt {
        margin: 0 10px;
        font-size: 14px;
        color: #fff;
      }

      .margin-t-15 {
        margin-top: 15px;
      }

      .margin-t-30 {
        margin-top: 30px;
      }

      .margin-l-15 {
        margin-left: 15px;
      }

      .margin-b-15 {
        margin-bottom: 15px;
      }

      .w-60 {
        width: 60px;
      }

      .w-120 {
        width: 120px;
      }

      .w-316 {
        width: 316px;
      }

      .w-340 {
        width: 340px;
        /deep/ .el-input__inner {
          color: #fff;
          background-color: rgba(255,255,255,.1);
        }
      }

      .opt-btn {
        cursor: pointer;
        color: #C9D3DF;

        &.add-item:hover {
          /*color: #1890ff;*/
        }
        &.del-item:hover {
          /*color: #F56C6C;*/
        }
      }

      .flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
      }

      .flex-wrap {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
      }

      .staffRecords-limit {
        .flex();
        .flex-wrap();

        .checkbox-cell {
          min-width: 50%;
        }
      }

      .checkbox-cell {
        margin-bottom: 15px;
        color: #fff;
      }

      .el-checkbox {
        /deep/ span.el-checkbox__label {
          color: #fff;
        }
        &.is-disabled {
          /deep/ span.el-checkbox__label {
            color: #fff;
          }
        }

      }

      .el-radio {
        /deep/ span.el-radio__label {
          color: #fff;
        }
        &.is-disabled {
          /deep/ span.el-radio__label {
            color: #fff;
          }
        }

      }

      .el-input {
        /deep/ .el-input__inner {
          color: #fff;
          background-color: rgba(255,255,255,.1);
        }

        .is-disabled{

          /deep/ .el-input__inner {
            color: #fff;
            background-color: rgba(255,255,255,.1);
          }
        }
      }

      .el-checkbox {
        color: #fff;
      }

      .edit-view {
        /*height: 700px;*/
        /*overflow-y: auto;*/
        /*margin-top:40px;*/
      }

      .edit-item {
        color: #fff;
        padding-bottom: 10px;

        .tip {
            margin-left: -40px;
            color: rgba(255,255,255,0.7);
            width: 30px;
            display: inline-block;
            text-align: right;
            margin-right: 10px;
            font-size: 12px;
        }
      }

      .edit-item-title {
        color: #FFFFFF;
        font-size: 14px;
        font-weight: normal;
        padding: 20px 0;

        &.edit-title-padding {
          padding-top: 15px;
        }
      }

      .edit-item-title span {
        font-size: 12px;
        margin-left:5px;
      }
    }
  }
}

</style>
