<template>
  <div class="editor">
      <draggable v-model="comList"  @add="onAdd"   @update="onDragEnd"  group="itxst" animation="300" style="width:100%;">
          <transition-group>
            <template v-for="(it,index) in comList">
              <div class="layers" draggable :key="index" :class="comIndex==index?'active-layer':''">
                  <div class="main" @click="onSetActive(index)">
                      <component
                      :is="it.type"
                      :com="it"
                      :coms="comList"
                      :currentIndex="index"
                      :isAdmin="isAdmin"
                      :insertCmd="insertCmd"
                      @onUpdate="onUpdate"
                      @onUpdateAttr="onUpdateAttr"
                      @onUpdateProdAttr="onUpdateProdAttr"
                      :isEdit="it.isEdit"
                      />
                  </div>
                  <div class="label">
                    {{it.name}}
                    <div class="del">
                        <svg-icon @click="onEdit(index,1)" v-if="it.isEdit!==1" icon-class="edit" style="color:#FFF;margin-right:10px;"/>
                        <svg-icon @click="onEdit(index,2)" v-else  icon-class="view" style="color:#FFF;margin-right:10px;"/>
                        <svg-icon @click="onRemove(index)" icon-class="delete" style="color:#FFF;margin-left:10px;"/>
                    </div>
                  </div>
              </div>
            </template>
            <template v-if="comList.length<=0">
                <div class="editor-empty" :key="-1"> <el-empty description="请拖放组件至当前页面" /></div>
            </template>
          </transition-group>

      </draggable>
  </div>

</template>

<script>
  import draggable from 'vuedraggable'
  import Table from "./components/Table"
  import TextArea from "./components/TextArea"
  import Empty from "./components/Empty"
  export default{
    name:"editor",
    emits:['onSetActiveIndex','onDelete','onInsert','onLoadArticle','onRebuild','onSetComs'],
    components:{
      Table,TextArea,draggable,Empty
    },
    props:{
      coms:{
        type:Array,
        default:null
      },
      comIndex:{
        type:Number,
        default:0,
      },
      templateCate:{
        type:Array,
        default:()=>{
          return [];
        }
      },
      insertCmd:{
        type:Object,
        default:null,
      },
      isAdmin:{
        type:Number,
        default:2
      },
    },
    watch:{
        'coms':{
          handler(val){
             if(val==null)return;
             this.comList=JSON.parse(JSON.stringify(val));
          },
          immediate: true,//立即执行
          deep: true
        },
        'comIndex':{
          handler(val){
            if(val<=0)return;
            this.comList=this.comList.map((it)=>{
              it.isEdit=2;
              return it;
            })
          },
          immediate: true,//立即执行
          deep: true
        }

    },
    data(){
      return{
        showEditor:false,
        operation:'',
        id:0,
        comList:[],
      }
    },


    methods:{
      //更新产品属性
      onUpdateProdAttr(comIndex,attrIndex,data){


        this.comList[comIndex].attrs[attrIndex].content=data;

        let attrName=this.comList[comIndex].attrs[attrIndex].attrs.name;
        let attrType=this.comList[comIndex].attrs[attrIndex].attrs.type;

        for(var i=0;i<this.comList.length;i++){
          for(var j=0;j<this.comList[i].attrs.length;j++){
            if(this.comList[i].attrs[j].type=='ProductAttr'){
                if(this.comList[i].attrs[j].attrs.name==attrName && this.comList[i].attrs[j].attrs.type==attrType){
                  this.comList[i].attrs[j].content=data;
                }
            }
          }
        }
        this.$emit("onRebuild",this.comList);
      },

      onUpdateAttr(comIndex,attrIndex,data){

        this.comList[comIndex].attrs[attrIndex].content=data;

        let dataType=this.comList[comIndex].attrs[attrIndex].type;
        let dataId=this.comList[comIndex].attrs[attrIndex].data;

        for(var i=0;i<this.comList.length;i++){
          for(var j=0;j<this.comList[i].attrs.length;j++){
            if(this.comList[i].attrs[j].type==dataType && this.comList[i].attrs[j].id==dataId){
              this.comList[i].attrs[j].content=data;
            }
          }
        }
        this.$emit("onRebuild",this.comList);
      },
      onRemove(index){
        this.$emit("onDelete",index);
      },
      onEdit(e,state){
        this.comList=this.comList.map((it)=>{
          it.isEdit=2;
          return it;
        })
        if(state==1){
          this.comList[e].isEdit=1;
          this.onSetActive(e);
        }

        this.$emit("onRebuild",this.comList);
      },
      onAdd(e){
        e.preventDefault();
        e.stopPropagation();
        this.$emit("onRebuild",this.comList);
      },
      onDragEnd(e) {
        e.preventDefault();
        e.stopPropagation();
        this.$emit("onRebuild",this.comList);
      },
      onUpdate(index,content){
         let _this=this;
         this.coms[index].content=content;
      },
      //激活当前层
      onSetActive(e){
        this.$emit("onSetActiveIndex",e);
      }

    }
  }
</script>
<style lang="scss">
@import './editor.scss';
</style>
