<template>
  <div class="template-wrap" :style="{ height: bodyHeight}">
    <div class="template-contain">
      <!-- 模板body -->
      <div class="template-body">
        <!-- 中间 -->
        <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> -->
                    <div
                        :options="{group:{name:'people', pull:false, put:false },sort: false}"
                        v-model="tempaletDataList"
                        class="drag-wrap"
                        >
                        <li
                          :class="['filed-item',currentIndex == index? 'active-item': '','li-block']"
                          v-for="(item,index) in tempaletDataList"
                          >
                          <!-- 删除 -->
                          <!-- <span
                            v-if= "item.fieldCode != 'baseInfo'"
                            class="item-close p-item-close"
                            >
                            <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">
                                <div
                                  :options="{group:{name:'people', pull:false, put:false },sort: false}"
                                  v-model="item.children" :class="['drag-wrap','block-wrap',item.fieldCode]"
                                  >

                                  <li
                                    :class="['filed-item','child-filed-item',(currentChildKey == childItem.fieldCode && currentChildIndex == ind)? 'active-item': '']"
                                    v-for="(childItem,ind) in item.children"
                                    >
                                    <!-- 删除 -->
                                    <!-- <span
                                      class="item-close child-item-close"
                                      v-if="childItem.fieldCode!='clerkPhone'">
                                      <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.fieldOperations.startName.length>6? 'title-pre-wrap': '']">{{childItem.fieldOperations.startName}}</div>
                                        <div class="draged-item-show">
                                          <span class="show-warm-text show-warm-text-flag select-flag">{{childItem.fieldOperations.startDescription}}<i class="el-icon-arrow-right"></i></span>
                                        </div>
                                      </div>
                                      <div class="b-t-1">
                                        <div :class="['opencard-item-title',childItem.fieldOperations.endName.length>6? 'title-pre-wrap': '']">{{childItem.fieldOperations.endName}}</div>
                                        <div class="draged-item-show">
                                          <span class="show-warm-text show-warm-text-flag select-flag">{{childItem.fieldOperations.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 select-flag"><i class="iconfont icon-icon"></i></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>
                                </div>
                              </ul>
                            </div>
                          </template>

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

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import showMsg from '@/common/js/showmsg';
import errMsg  from '@/common/js/error';

export default {
  name: "staffRecordsTemplate",
  data() {
    return {
      bodyHeight: (document.documentElement.clientHeight || document.body.clientHeight) + 'px',
      selectKey: '',

      // 基本信息
      baseInfo: [],
      // 工作信息
      jobInfo: [],
      // 个人信息
      selfInfo: [],
      // 学历信息
      eduInfo: [],
      // 合同信息
      contractInfo: [],
      // 紧急联系人
      contactInfo: [],
      // 个人材料
      personalInfo: [],
      // 自定义
      defineInfo: [],

      // 中间数据集合
      currentIndex: 0, //当前选择的 item
      // children
      currentChildKey: null,
      currentChildIndex: null,
      childIndex: 0,

      tempaletDataList: [],

    }
  },
  created() {
  },
  methods: {

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

    /**
     * 简单数组-->父子数组对象
     */
    treeData(data){
      let tree = data.filter((father)=>{                  //循环所有项
        let branchArr = data.filter((child)=>{
          return father.fieldCode == child.parentCode;    //返回每一项的子级数组
        });
        if(branchArr.length>0){
          father.children = branchArr;    //如果存在子级，则给父级添加一个children属性，并赋值
        }
        return father.parentCode == 0;        //返回第一层
      });
      // 排序
      tree.sort(function(a,b){
        return a.sort - b.sort;
      })

      tree.forEach(function(ele,index){
        ele.children.sort(function(a,b){
          return a.sort - b.sort;
        })
      })
      return tree;
    },

    /**
     * 处理已存配置信息
     */
    handleGetInfo(result) {
      const that = this;
      let data = JSON.parse(result).result
      data.forEach(function(ele,index){
        ele.fixed = parseInt(ele.fixed) === 1? true : false;
        ele.isMust = parseInt(ele.isMust) === 1? true : false;
        ele.fieldEdited = parseInt(ele.fieldEdited) === 1? true : false;
        ele.systemFlag = true;
        ele.fieldOperations = !!ele.fieldOperations? JSON.parse(ele.fieldOperations): {};
        ele.staffRecordsIds = !!ele.staffRecordsIds? JSON.parse(ele.staffRecordsIds): [];
      })
      // console.log(JSON.stringify(that.treeData(data)))
      that.tempaletDataList = that.treeData(data)
    },
  },
  watch: {

  },
  components: {

  },
  mounted() {
    const that = this;

    // js 调用客户端方法
    let param = {'enterpriseId': that.$route.query.enterpriseId};
    let method = "getUserArchivesTempletContent";
    let data = { 'method': method, 'param': param }
    that.$bridge.callhandler('apiHandler', data, (data) => {
      // 处理返回数据
      console.log("js 调用成功");
      // console.log(data);
      that.handleGetInfo(data)
    })

    that.$bridge.registerhandler('jsHandler', (data, responseCallback) => {
      let json = JSON.parse(data)
      let method = json['method']
      let param = json['param']

      let paramStr = JSON.stringify(param)
      let evalMethod = method + "(paramStr)"

      let result = eval(evalMethod);
      responseCallback(result)
    })

    function appInvocationMethod(param) {
      // console.log("app 调用成功");
      return {'userId': '123456','name':'张琦'}
    }

  }
}

</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: 100%;
    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 {

    }

    /* 中间 */
    /* 模板 */
    .template-cell-m {
      width: 100%;
      /*height: 740px;*/
      position: relative;

      .view-content {
        position: relative;
      }

    }

    .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%;
      background-color: #f0eff4;
      width: 100%;
      /*height: 740px;*/
      /*margin: 0 20px;*/
      position: relative;
    }

    .phone-show-content{
      width: 100%;
      /*height: 537px;*/
      position:relative;
      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;*/
        .p-item-close {
          display: block;
        }
      }

      &.child-filed-item {
        &:hover {
          .child-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: 25px;
      }
    }

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

    .draged-item-show {
      display: inline-block;
      vertical-align: top;
      width: calc(100% - 100px);
    }

    .opencard-item-title{
      width: 90px;
      height: 46px;
      line-height: 46px;
      text-align: left;
      float: left;
      padding-left: 10px;
      overflow: hidden;
      white-space: nowrap;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      &.title-pre-wrap {
        line-height: 15px;
        word-break: break-all;
        white-space: pre-wrap;
        padding-top: 9px;
      }
      /*&.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: 100%;
        text-align: right;
      }
    }


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

      .tip {
        color: rgba(255,255,255,0.7);
      }
    }


  }
}

</style>
