<template>
  <div class="dv-top-toolbar-button" :class="{active: active}" @mouseleave="mouseLeave" @mouseenter="mouseInt">
    <div class="dv-top-toolbar-button-handle" @click="handleClick">
      <icon class="dv-top-toolbar-button-icon" :name="icon"></icon>
      <span class="dv-top-toolbar-button-title" v-if="title">{{title}}</span>
      <icon class="dv-top-toolbar-button-down-icon" name="down" v-if="$slots.dropdown"></icon>
    </div>
    <transition name="el-zoom-in-top">
      <div class="drop-down" :class="[dropdownDirection]" v-if="$slots.dropdown && active">
        <div class="drop-down-inner">
          <slot name="dropdown" v-clickoutside="handleClickOutSide"></slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'DvTopToolbarItem',
    props: {
      title: {
        type: String
      },
      icon: {
        type: String
      },
      defaultActive: {
        type: Boolean,
        default: true
      },
      value: {
        type: Boolean
      },
      dropdownDirection: {
        type: String,
        default: 'left'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      disableSwitch: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        active: true
      };
    },
    watch: {
      value (value) {
        this.active = value;
      }
    },
    methods: {
      handleClickOutSide () {
        if (this.disableSwitch) {
          return;
        }
        this.active = false;
      },
      mouseInt (e) {
        if (this.$slots.dropdown) {
          this.active = true;
        }
      },
      handleClick (e) {
        if (this.disableSwitch) {
          this.$emit('click');
          return;
        }
        if (!this.disabled){
          this.setActive(!this.active);
        }
        e.stopPropagation();
        return false;
      },
      mouseLeave () {
        if (this.$slots.dropdown) {
          this.active = false;
        }
      },
      activate () {
        this.setActive(true);
      },
      deActivate () {
        this.setActive(false);
      },
      setActive (active) {
        this.active = active;
        this.$emit('changeActive', this.active);
        this.$emit('input', this.active);
      }
    },
    mounted () {
      this.setActive(this.defaultActive);
    }
  };
</script>

