<template>
  <div class="com-directory" v-if="coms!=null && coms.length>0 && size>0">
      <div class="com-title">目录信息</div>
      <div class="com-items">
          <template v-for="(it,index) in coms">
            <template v-for="(item,itemIndex) in it.attrs" v-if="item.type=='Directory'">
              <div class="com-item">
                  <div class="icon"><svg-icon icon-class='directory' /></div>
                  <div class="name">{{item.content!=""?item.content:item.name}}</div>
                  <!-- <div class="remove" @click="onRemove(index)"><svg-icon icon-class="delete" /></div> -->
              </div>
            </template>
          </template>
      </div>


  </div>
</template>

<script>
  export default{
    props:{
      coms: {
        type: Array,
        default: null,
      },
    },
    watch:{
      'coms':{
         handler(val){
            if(val==null)return;
            this.size=0;
            for(var i=0;i<val.length;i++){
               for(var j=0;j<val[i].attrs.length;j++){
                 if(val[i].attrs[j].type=='Directory'){
                   this.size++;
                 }
               }
            }
         },
         immediate:true,
         deep:true,
      },
    },
    data(){
      return{
         size:0,
      }
    },
  }
</script>


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