<template>
  <div class="row-tools">
    <template v-for="(item, index) in data">
      <a
        v-if="item"
        :key="index"
        :class="`t-action-btn${item.class ? ' ' + item.class : ''}`"
        @click="item.handle"
      >
        <Tooltip
          v-if="item.type == 'icon' && !item.loading"
          :content="item.text"
          :transfer="true"
          placement="top"
        >
          <Icon :type="item.icon" :color="item.color"></Icon>
        </Tooltip>
        <label
          v-else-if="item.type != 'icon' && !item.loading"
          style="cursor: pointer;"
        >
          {{ item.text }}
        </label>
        <Icon
          v-if="item.loading"
          type="load-c"
          class="ivu-load-loop"
          style="color: #d4d4d4;"
        ></Icon>
      </a>
    </template>
  </div>
</template>
<script>
export default {
  name: 'RowTools',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>
<style lang="less" scoped>
.row-tools {
  a {
    color: #F99C34;
    background: transparent;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    transition: color .2s ease;
  }
  .t-action-btn{
    i {
      font-size: 16px;
      color: #F99C34;
    }
    &:not(:last-child){
      margin-right: 6px;
    }
    
  }
}

</style>
