<template>
  <div class="Detail">
    <div class="detail_title">
      {{this.parentIndex}}
      <span>{{obj.fieldNm}}</span>
    </div>
    <div class="detail_body">
      <div style="font-size: 17px;color: gray;margin-top: 20px;width: 100%;text-align: center;">
        <span v-if="listInner.length== 0">可拖入多个组合进行组合</span>
      </div>
      <el-form disabled ref="form" class="b-a" label-width="120px" label-position="left">
        <draggable style="min-height: 180px" @start="startFun" :clone="cloneData" :list="listInner" :options="{
          animation: 0,
          ghostClass: 'ghost',
          group: {
            // 只允许放置shared的控件,禁止pull
            put: ['shared']
          }}">
          <transition-group :class="" style="height: 100%;padding-top: 10px" type="transition"
                            :name="'flip-list'"
                            tag="div">
            <renders-inner :class="{'InnerActiveItem': currentItemIndex === `${index}${parentIndex}` && !isClickOut1}" v-for="(items, index) in listInner"
                           :key="index" :ele="items.obj.fieldTp" :obj="items.obj" :parent-index="parentIndex"
                           :index="index"
                           @ShowFormInner="selectForm"
                           @handleRemoveEle="removeEle"
                           @handleChangeVal="val => handleChangeVal(val,element)"></renders-inner>
          </transition-group>
        </draggable>
      </el-form>
    </div>
    <div class="detail_footer">
      <i class="el-icon-plus" style="color: #2eabff"></i>
      <span style="color: #2eabff">{{obj.btnText}}</span>
    </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import rendersInner from '../renderInner'

  export default {
    components: {
      draggable,
      rendersInner
    },
    name: "detail",
    inject: ['isClickOut'],
    props: {
      obj: {
        type: Object,
        default: {}
      },
      parentIndex: 0
    },
    watch: {
      'isClickOut1': function (val) {
        console.log(val);
        if (val) {
          //当点击外部之后把所有内部选中状态取消
          this.currentItemIndex = -1
        }
      }
    },
    data() {
      return {
        listInner: [],
        modalFormData: {
          fieldNm: '',
          fieldHint: '',
          required: 1,
          print: 1,
          major: 1,
        },
        // isClickOutData:this.isClickOut,
        currentItemIndex: -1,
        currentItemType: '',
        currentItemLabel: '',
        isFormShow: false,
        // isShowText:true
        isHaveClickOut:false
      }
    },
    computed: {
      // isClickOut1() {
      //   return this.isClickOut.isHaveClickOut;
      // }
    },
    methods: {
      isAddClickClass(index) {
        console.log(this.currentItemIndex);
        console.log(index);
        if (this.currentItemIndex === `${index}${this.parentIndex}` && !this.isClickOut1) {
          return 'InnerActiveItem'
        }
      },
      startFun(evt) {
        console.log('start123')
        // this.isShowText = false
      },
      cloneData(original) {
        console.log("ss");
        // 深拷贝对象，防止默认空对象被更改
        return JSON.parse(JSON.stringify(original))
      },
      // 拖拽表单2
      dragOptions() {
        return {
          animation: 0,
          ghostClass: 'ghost',
          group: {
            // 只允许放置shared的控件,禁止pull
            // put: ['shared']
          }
        }
      },
      //选中item
      selectForm(index, obj) {
        this.$bus.emit('clickOut',true);
        // if(document.getElementsByClassName('InnerActiveItem')){
        let classData = document.getElementsByClassName('InnerActiveItem')
        console.log(classData.length);
        // if (classData.length > 0) {
        //   console.log(classData);
        //
        // classData[0].classList.remove('InnerActiveItem')
        //   // classData.forEach((item) => {
        //   //   console.log(item);
        //   //   item.classList.remove('InnerActiveItem')
        //   // })
        // }
        this.currentItemIndex = `${index}${this.parentIndex}`
        this.$emit('ShowFormInner', index, obj, this.listInner, this.parentIndex);
        console.log(index);
        console.log(obj);

      },
      // 删除克隆控件
      removeEle(index) {
        console.log(index)
        this.listInner.splice(index, 1)
        if (this.listInner.length === 0) {
          this.isFormShow = false
        }
        this.currentItemIndex = -1
      },
      // 控件回填数据
      handleChangeVal(val, element) {

        console.log(element)
        // this.$set(this.formData, element.obj.name, val);
      },
    },
    created() {
      this.$bus.on('renderFormInner', (formdata, index,parentIndex) => {
        console.log(formdata);
        console.log(index);
        if(this.parentIndex == parentIndex){
          this.listInner[index].obj = Object.assign({},
            this.listInner[index].obj,
            formdata
          )
        }
      });
      this.$bus.on('clickOut',(val)=>{
        console.log(val);
        if (val) {
          //当点击外部之后把所有内部选中状态取消
          this.currentItemIndex = -1
        }
        this.isHaveClickOut = val
      });
    }
  }
</script>

<style lang="less" scoped>

  .Detail {
    min-height: 250px;
    position: relative;
    width: 100%;

    .detail_title {
      font-size: 16px;
      color: gray;
      margin-left: 10px;
    }

    .detail_body {
      min-height: 200px;
    }

    .detail_footer {
      bottom: 0;
      width: 100%;
      text-align: center;
    }
  }

  .InnerActiveItem {
    border: 1px solid #38adff;
  }


</style>
