<template>
  <div :class="_class">
    <div :class="joinBtnClass" @click="onAction('join')">
      <Icon icon="right"/>
      <span v-if="text[0]">{{ text[0] }}</span>
    </div>
    <div :class="removeBtnClass" @click="onAction('remove')">
      <Icon icon="left"/>
      <span v-if="text[1]">{{ text[1] }}</span>
    </div>
  </div>
</template>

<script>
  import FormSize from '../scripts/mixins/form-size';
  import WatchCurValue from '../scripts/mixins/wacth-cur-value';
  import Icon from '../icon';

  const name = 'hive-transfer-action';

  export default {
    name,
    components: {
      Icon,
    },
    mixins: [FormSize, WatchCurValue],
    props: {
      text: {
        type: Array,
        default: function() {
          return ['', ''];
        },
      },
      prefixClass: {
        type: String,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      selectedKeys: {
        type: Array,
        default: function() {
          return [[], []];
        },
      },
      onAction: {
        type: Function,
      },
    },
    data() {
      return {

      };
    },
    computed: {
      prefixClassName() {
        return `${this.prefixClass}__action`;
      },
      _class() {
        return this.prefixClassName;
      },
      joinDisabled() {
        return this.disabled || this.selectedKeys[0].length === 0;
      },
      removeDisable() {
        return this.disabled || this.selectedKeys[1].length === 0;
      },
      joinBtnClass() {
        return [
          `${this.prefixClassName}_button`,
          {
            [`${this.prefixClassName}_button--disabled`]: this.joinDisabled,
          },
        ];
      },
      removeBtnClass() {
        return [
          `${this.prefixClassName}_button`,
          {
            [`${this.prefixClassName}_button--disabled`]: this.removeDisable,
          },
        ];
      },
    },
    watch: {},

    methods: {
    },
  };
</script>
