import { Component, EventEmitter, Output, ViewChild, Renderer } from '@angular/core';
import { NavParams,Platform, NavController } from 'ionic-angular'
import { KeyboardOption } from '../type'
import { BaseLog as Log } from 'base-log';
const log = new Log('KeyboardNumberComponent');

const defaultOption: KeyboardOption = {type:'int'}

@Component({
  selector: 'keyboard-number',
  template:`
<div *ngIf="type=='int'" class="keyboard-number keyboard-container">
  <div class="grid-row">
    <a class="grid-int" (click)="input(1)">1</a>
    <a class="grid-int" (click)="input(2)">2</a>
    <a class="grid-int" (click)="input(3)">3</a>
  </div>
  <div class="grid-row">
    <a class="grid-int" (click)="input(4)">4</a>
    <a class="grid-int" (click)="input(5)">5</a>
    <a class="grid-int" (click)="input(6)">6</a>
  </div>
  <div class="grid-row">
    <a class="grid-int" (click)="input(7)">7</a>
    <a class="grid-int" (click)="input(8)">8</a>
    <a class="grid-int" (click)="input(9)">9</a>
  </div>
  <div class="grid-row">
    <a class="grid-int grid-safe-area-bottom">&nbsp;</a>
    <a class="grid-int grid-safe-area-bottom" (click)="input(0)">0</a>
    <a class="grid-int grid-safe-area-bottom" #back><span class="ion-ios-backspace-outline f22"></span></a>
  </div>
</div>

<div *ngIf="type=='float'" class="keyboard-number keyboard-container">
  <div class="grid-all-float">
    <div class="grid-col-float">
      <div class="grid-float" (tap)="input(1)">1</div>
      <div class="grid-float" (tap)="input(4)">4</div>
      <div class="grid-float" (tap)="input(7)">7</div>
      <div class="grid-float grid-safe-area-bottom" (tap)="input('.')"><span class="dot"></span></div>
    </div>
    <div class="grid-col-float">
      <div class="grid-float" (tap)="input(2)">2</div>
      <div class="grid-float" (tap)="input(5)">5</div>
      <div class="grid-float" (tap)="input(8)">8</div>
      <div class="grid-float grid-safe-area-bottom" (tap)="input(0)">0</div>
    </div>
    <div class="grid-col-float">
      <div class="grid-float" (tap)="input(3)">3</div>
      <div class="grid-float" (tap)="input(6)">6</div>
      <div class="grid-float" (tap)="input(9)">9</div>
      <div class="grid-float grid-safe-area-bottom" (tap)="close()">
        <!--<span class="close"></span>-->
        <span class="ion-md-arrow-dropdown"></span>
        <!--<span style="font-size:12px;">关闭</span>-->
      </div>
    </div>
    <div class="grid-col-float">
      <div class="grid-backspace" #back>
        <span class="ion-ios-backspace-outline"></span>
      </div>
      <div class="grid-confirm" (tap)="confirm()">确定</div>
    </div>
  </div>
</div>
`,
  providers:[]
})
export class KeyboardNumberComponent {
  option: KeyboardOption = defaultOption;
  type:string
  values = []
  pressTimer
  outterTimer
  innerTimer
  cursorTimer
  cursorElem
  @ViewChild('back') back
  constructor(
    params: NavParams,
    public platform:Platform,
    public navCtrl:NavController,
    public renderer:Renderer
  ) {
    this.option = Object.assign({},this.option,params.data);
    if(this.option.cursor)
      this.cursorElem = this.option.cursor._elementRef.nativeElement;
    this.type = this.option.type;
  }

  onPresent = () => {
    if(!this.option.input) log.info('必须指定键盘所绑定的输入框');
    this.values = this.option.input && this.option.input.value
      ? ('' + this.option.input.value).split('') : [];
    if(this.option.cursor) this.startCursor();
    this.bindEvents();
  }


  // 开启光标
  startCursor = () => {
    this.moveCursor();
    this.showCursor();
    this.outterTimer = setTimeout(()=>{
      this.hideCursor();
      this.innerTimer = setTimeout(()=>{
        this.startCursor();
      },500);
    },500);
  }

  // 停止光标
  stopCursor = (isShow?) => {
    clearTimeout(this.cursorTimer);
    clearTimeout(this.outterTimer);
    clearTimeout(this.innerTimer);
    if(isShow){
      this.showCursor();
    }else{
      this.hideCursor();
    }
  }

  // 维持光标显示
  keepCursor = () => {
    this.stopCursor(true);
    clearTimeout(this.cursorTimer);
    this.cursorTimer = setTimeout(()=>{
      this.startCursor();
    },500);
  }

  // 显示光标
  showCursor = () => {
    if(this.cursorElem)  this.renderer.setElementStyle(this.cursorElem,'display','block');
  }

  // 隐藏光标
  hideCursor = () => {
    if(this.cursorElem)  this.renderer.setElementStyle(this.cursorElem,'display','none');
  }

  // 移动光标
  moveCursor = () => {
    if(this.cursorElem){
      const count = this.values.length;
      const moveSize = this.option.cursor.moveSize;
      let moveDistance;
      if(this.type == 'float'){
        let dotCount = 0;
        for (var i = 0, n = this.values.length; i < n; i++) {
          if(this.values[i] == '.') dotCount ++;
        }
        moveDistance = (count-dotCount)*moveSize + dotCount*moveSize/2;
      }else{
        moveDistance = count*moveSize;
      }
      this.renderer.setElementStyle(this.cursorElem,'left',moveDistance + 'px');
    }
  }

  // 确认事件
  @Output() confirmEvent = new EventEmitter();
  confirm = () => {
    this.confirmEvent.emit(this.option.input.value);
    this.unBindEvents();
    this.stopCursor();
  }

  // 取消事件
  @Output() cancelEvent = new EventEmitter();
  close = () => {
    this.cancelEvent.emit(this.option.input.value);
    this.unBindEvents();
    this.stopCursor();
  }

  // 点击背景关闭弹窗
  closeByBackdrop = (event) => {
    if(event.target['offsetParent'] && event.target['offsetParent'].className == 'keyboard-wrapper') return;
    const className = event.target['className'];
    if(className.indexOf('back-button') == -1) this.cancelEvent.emit(this.option.input.value);
    this.unBindEvents();
    this.stopCursor();
  }

  bindEvents = () => {
    this.platform.doc().addEventListener('touchstart', this.closeByBackdrop);
    this.platform.doc().addEventListener('touchmove', this.disableScroll); //锁住滚动
    this.back.nativeElement.addEventListener('touchstart', this.longPress);
    this.back.nativeElement.addEventListener('touchmove', this.clearTimer);
    this.back.nativeElement.addEventListener('touchend', this.clearTimer);
  }

  unBindEvents = () => {
    this.platform.doc().removeEventListener('touchstart', this.closeByBackdrop);
    this.platform.doc().removeEventListener('touchmove', this.disableScroll);
    this.back.nativeElement.removeEventListener('touchstart', this.longPress);
    this.back.nativeElement.removeEventListener('touchmove', this.clearTimer);
    this.back.nativeElement.removeEventListener('touchend', this.clearTimer);
  }

  disableScroll = (e) => {
    e.preventDefault();
    e.stopPropagation();
  }

  // 长按清空
  longPress = () => {
    this.delete();
    this.pressTimer = setTimeout(()=>{
      this.clear();
    },600);
  }

  // 清理长按计时
  clearTimer = () => {
    clearTimeout(this.pressTimer);
  }

  // 清空
  clear = () => {
    this.values = [];
    this.writeValue();
  }

  // 删除
  delete = () => {
    this.keepCursor();
    this.values.pop();
    this.writeValue();
  }

  // 输入值
  input = (value) => {
    this.keepCursor();
    if(this.option.length && this.values.length >= this.option.length) return;
    this.values.push(value);
    this.writeValue();
  }

  // 将值写入表单
  writeValue = () => {
    this.moveCursor();
    this.option.input.value = this.values.join('');
    if(this.option.change) this.option.change(this.option.input.value);
  }
}