import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import EflyButton from '@/components/efly/button/button.vue';
@Component({
  components: {EflyButton},
})
export default class EflyButtonGroup extends Vue {
  @Prop({default: () => ''}) private size!: any;
  @Prop({default: () => '20px'}) private lineMargin!: any;

  private buttonTop: any = -1;       // 通过y轴判断是否进行了换行，不停的更换，遇到不一样的就是换行并是行头
  private buttonLineIndex: any = -1;
  private status: any = {
    opacity: 0,
  }

  private mounted() {
    // @ts-ignore
    this.calcButton();
    window.addEventListener('resize', ()=>{
      this.buttonTop = -1;
      this.buttonLineIndex = -1;
      this.calcButton();
    })
    let delay = setTimeout(()=>{
      this.status.opacity = 1;
      clearTimeout(delay)
    }, 100)
  }

  private created(){

  }

  /**
   * 计算button的ButtonGroup的属性
   */
  private calcButton(){
    let $children: any = this.$children
    for(let i in $children){
      if($children[i].$el.getBoundingClientRect().y !== this.buttonTop){
        this.buttonTop = $children[i].$el.getBoundingClientRect().y;
        $children[i].status.buttonGroundLineHeader = true;
        this.buttonLineIndex++;
        $children[i].status.buttonLineIndex = this.buttonLineIndex;
      } else {
        $children[i].status.buttonLineIndex = this.buttonLineIndex;
      }
      if($children[i].status.buttonLineIndex > 0){
        $children[i].lineMargin = this.lineMargin
      }
      $children[i].status.buttonGroup = true;
      $children[i].$forceUpdate();
    }
  }

  private destroyed(){
    window.removeEventListener('resize', ()=>{});
  }
}