<style>

</style>
<template>
<!-- :class="[show?openclass:'',showfocus?focusclass:'']" -->
<li :class="[show?openclass:'',showfocus?focusclass:'']"
 :data-id="indexid">
  <span v-on:click="toggle()">{{listobj.name}}</span>
  <ul v-if="listobj.children" v-show="listobj.show">
    <listboxs v-for="item in listobj.children"
     :listobj.sync="item" :openclass="openclass" :focus="focus"
     :focusclass="focusclass" 
     :indexid="indexid+$index" ></listboxs>
  </ul>
</li>
</template>
<script>
module.exports={
  props:{
    listobj:{
      type:Object,default:{}
    },openclass:{
      type:String,default:''
    },focus:{
      type:String,default:''
    },focusclass:{
      type:String,default:''
    },indexid:{
      type:String,default:''
    }
  },
  methods:{
    toggle:function(){
      var a = Object.assign({}, this.listobj, {
      show:!this.listobj.show })
      this.$set('listobj',a);
      this.$dispatch('listboxcall',this.listobj);
      this.$dispatch('setfocus',this.indexid);

    }
  },computed:{
    show:function(){
      return this.listobj.show && this.listobj.children
    },showfocus :function(){
      return this.indexid==this.focus;
    }
  },ready:function(){

  }
}
</script>