<template>
  <div class="action-bar-wrapper">
    <div class="action-bar-info">
      <Icon type="arrow-left-a" @click.native="goBack" v-if="pageBar.isBack"></Icon>
      <span>{{pageBar.title}}</span>
    </div>
    <div class="action-bar-buttons">
      <Button size="small" @click.native="item.handle()" v-for="(item,index) in list" :key="index" :type="item.theme" :icon="item.icon">{{item.text}}</Button>
    </div>
  </div>
</template>
<style lang="less">
.t-action-btn {
  &:not(:last-child) {
    margin-right: 12px
  }
  i {
    font-size: 16px;
    color: #828282;
  }
  &+strong {
    position: relative;
    top: -5px;
    left: 5px;
  }
}

.action-bar-wrapper {
  position: absolute;
  right:15px;
  top:6px;
  z-index:1;
  .action-bar-buttons {
    width: 100%;
    height: 38px;
    line-height: 38px;
    text-align: right;
    button {
      margin-right: 5px
    }
  }
  .action-bar-info {
    position: absolute;
    top: 0;
    line-height: 38px;
    span {
      font-size: 20px;
      color: #6b6b6b;
    }
    i {
      font-size: 24px;
      color: #cacaca;
      margin-right: 10px;
      cursor: pointer
    }
  }
}
</style>
<script>
export default {
  components: {

  },
  data() {
    return {
      list: [],
      pageBar: {
        title: '',
        isBack: false
      }
    }
  },
  computed: {

  },
  created: function() {
    $channel.$on('ActionBarEvent', (data) => {
      this.list = data;
    })
    $channel.$on('SetPageConfig', (data) => {
      this.pageBar = data;
    });
  },
  beforeMount: function() {

  },
  mounted: function() {

  },
  beforeDestroy: function() {

  },
  destroyed: function() {

  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  },
  watch: {

  },
  directives: {

  }
}
</script>
