<template>
  <span>
    <Button
      v-if="!checkAll"
      type="primary"
      size="small"
      ghost
      @click="selectAll"
    >
      <i
        class="fa fa-check-square-o"
        aria-hidden="true"
      />
      {{ $t('CHECK_ALL') }}
    </Button>
    <Button
      v-else
      type="primary"
      ghost
      size="small"
      @click="deSelectAll"
    >
      <i
        class="fa fa-square-o"
        aria-hidden="true"
      />

      {{ $t('UNCHECK_ALL') }}
    </Button>
  </span>
</template>

<script>
export default {
  name: 'CheckSelectAll',
  data() {
    return {
      checkAll: false,
    };
  },
  methods: {
    selectAll() {
      this.checkAll = true;
      this.$emit('select-all');
    },
    deSelectAll() {
      this.checkAll = false;
      this.$emit('deselect-all');
    },
  },
};
</script>
