<template>
   <div class='show-type'>
      <button-group v-show="!showTypeDir">
            <i-button  class="collapse-btn" type="primary" @click="clickCollapse('left')">
                <icon type="ios-arrow-back"/>
            </i-button>
      </button-group>
      <button-group v-show="showTypeDir">
          <el-tooltip :content="$t('components.appbuild.custom')">
              <i-button icon="md-build" type="primary" @click="handleClick"></i-button>
          </el-tooltip>
          <i-button class="collapse-btn" type="primary" @click="clickCollapse('right')">
              <icon type="ios-arrow-forward"/>
          </i-button>
      </button-group>  
      </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component({
})
export default class AppBuild extends Vue {

    /**
     * 工具栏伸缩
     *
     * @protected
     * @type {boolean}
     * @memberof AppBuild
     */
    public showTypeDir: boolean = false;


    /**
     * 点击伸缩
     *
     * @param {*} type
     * @memberof AppBuild
     */
    public clickCollapse(type: string) {
        this.showTypeDir = Object.is(type, 'left') ? true : false;
    }

    /**
     * 工具点击
     * 
     *@memberof AppBuild
     */
    public handleClick(){
      this.$emit("handleClick")
    }
}
</script>

<style lang="less">
@import './app-build.less';
</style>