<template>
  <div class="com-list" v-if="coms.length>0">
    <div class="com-list-title">模块管理</div>
    <div class="com-items">
      <draggable v-model="coms" @update="datadragEnd" :options="{animation:200}" style="width:100%;">
        <template v-for="(it,index) in coms">
          <div :key="index" class="com-item" draggable>
            <div class="icon"><svg-icon icon-class='dashBoard1' /></div>
            <div class="name" @click="onSetActive(index)">{{it.name}}</div>
            <div class="remove" v-if="type!=='document'" @click="onRemove(index)"><svg-icon style="cursor: pointer;" icon-class="delete" /></div>
          </div>
        </template>
      </draggable>
    </div>

  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  export default {
    name: "comList",
    emits: ['onRemove','onRebuild','onSetActive'],
    components: {
      draggable
    },
    props: {
      coms: {
        type: Array,
        default: [],
      },
    },
    data() {
      return {
        type:''
      }
    },
    mounted(){
      this.type=this.$route.query.type
    },
    methods: {


      async datadragEnd(event) {
        event.preventDefault();
        let item=this.coms;
        this.$emit("onRebuild",item);
      },

      onSetActive(e){
        this.$emit("onSetActive",e);
      },
      onRemove(e) {
        this.$emit("onRemove", e);
      },
    }
  }
</script>

<style lang="scss">
  @import './index.scss';
</style>
