<template>
  <Dropdown @on-click='clickEvent' class="drop-down-div">
    <a href="javascript:void(0)">
    	<Button type="primary" v-if="label">
            {{label}}	
            <Icon :type="icon"></Icon>
        </Button>
      <Icon :type="icon" v-if="!label"/>
    </a>
    <DropdownMenu slot="list">
      <DropdownItem v-for="menu in menus" :name="JSON.stringify(menu)" :disabled="menu.disabled">
        <Icon :type="menu.icon"></Icon>
        {{menu.label}}
      </DropdownItem>
    </DropdownMenu>
  </Dropdown>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit,Watch } from "vue-property-decorator";


@Component
export default class CsDropDown extends Vue {
 @Prop({type:Array,default:[]}) private menus!:Array<any>;
 @Prop({type:Object,default:{}}) private data!:object;
 @Prop({type:String,default:'ios-more-outline'}) private icon!:string;
 @Prop() private click!:Function;
 @Prop() private label!:string;
  clickEvent(menu) {
      var obj = JSON.parse(menu)
      if(!obj.disabled){
        this.click(obj.action, this.data)
      }
  }
}
</script>

