<template>
  <div class="app-actionbar">
    <div class="app-actionbar-item" v-for="(item,index) in items" :key="index">
      <Badge
        v-if="item.counterService && item.counterService.counterData"
        :count="item.counterService.counterData[item.counterId]"
        type="info"
      >
        <i-button type="text" ghost @click="handleClick(item.viewlogicname)">
          <i v-if="item.iconcls != ''" :class="item.iconcls" />
          {{item.text}}
        </i-button>
      </Badge>
      <i-button v-else type="text" ghost @click="handleClick(item.viewlogicname)">
        <i v-if="item.iconcls != ''" :class="item.iconcls" />
        {{item.text}}
      </i-button>
    </div>
  </div>
</template>

<script lang="tsx">
import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
import { Subject } from "rxjs";

@Component({})
export default class AppActionBar extends Vue {
  /**
   * 传入操作栏模型数据
   *
   * @type {any}
   * @memberof AppActionBar
   */
  @Prop() public items!: any;

  /**
   * 触发界面行为
   *
   * @memberof AppActionBar
   */
  public handleClick($event: any) {
    this.$emit("itemClick", $event);
  }
}
</script>

<style lang='less'>
@import "./app-actionbar.less";
</style>