import CtlGridEditor from './CtlGridEditor'
import webix from 'webix'
import { CtlDatePicker } from './form/input/CtlDatePicker'
import * as YvanUI from './YvanUIExtend'
import { YvEventDispatchArgs } from './YvanEvent'

export default class CtlGridEditorDate extends CtlGridEditor {
  isPinned: any
  $el: any
  _id!: string
  _editor: any
  leaveReason: any
  formatter: any
  node: any
  // hasGetValue: boolean = false

  init(params: any) {
    super.init(params)
    this.node = params.node
    if (params.node.rowPinned) {
      this.isPinned = true
    }

    this._id = 'dd' + webix.uid()
    this.$el = $(`<div id="${this._id}"></div>`)[0]
    this.$el.addEventListener('keydown', this._onKeyDown.bind(this))
    // if (this.type === 'datetime') {
    //   this.$el.innerHTML = '<input type="datetime-local" style="width:100%;"/>'
    // }
    // else if (this.type === 'date') {
    //   this.$el.innerHTML = '<input type="date" style="width:100%;"/>'
    // }
  }

  _onValueChange() {
    this.value = this._editor._webix.getValue()
  }

  _onKeyDown(e: any) {
    const KEY_LEFT = 37
    const KEY_UP = 38
    const KEY_RIGHT = 39
    const KEY_DOWN = 40
    if (e.keyCode === 13 || e.keyCode === KEY_LEFT || e.keyCode === KEY_RIGHT || e.keyCode === KEY_UP || e.keyCode === KEY_DOWN) {
      // Tab键/回车键, 完全拦截，跑下一个焦点控件
      e.stopPropagation()
      // e.preventDefault()

      // if (typeof this.editParams.onValidate === 'function') {
      //   const r = this.editParams.onValidate(this.value)
      //   if (r) {
      //     //有校验错误，不让跳转
      //     return
      //   }
      // }

      // //写入离开原因的 code 编码
      // this.leaveReason = e.code
      // //这里会触发 this.getValue() 方法
      // this.vue.gridApi.stopEditing()
    }
  }

  _editValueOnChange(newValue: any, oldValue: any) {
    const str = this._editor._webix.getValue()
    this.value = new Date(str).getTime().toString()
    YvEventDispatchArgs(this.onChange, this, [this.value, this.data], this.vue._webix.$scope)
    this.vue._transactionUpdateRow(this.vue._gridData)
    // if (this.hasGetValue) {
    //   _.set(this.data, this.field, this.value)
    //   this.node.setDataValue('__ID__', _.uniqueId())
    // }
  }

  getGui() {
    return this.$el
  }

  afterGuiAttached(this: any) {

    let showValue = '';
    if (this.colDef.formatter) {
      if (typeof this.colDef.formatter === "function") {
        showValue = this.colDef.formatter(this.value, this.vue, this.data)
      }
      else if (YvanUI.formatter.hasOwnProperty(this.colDef.formatter)) {
        let formatterFunction: any = YvanUI.formatter[this.colDef.formatter]
        showValue = formatterFunction(this.value)
      }
    }
    else {
      showValue = this.value
    }

    const vjson = {
      ...this.editParams,
      view: this.type,
      value: showValue,
    }
    this._editor = CtlDatePicker.create(this.vue._module, vjson)
    _.merge(vjson, {
      on: {
        onChange: this._editValueOnChange.bind(this)
      }
    })
    webix.ui(vjson, this.$el)
    this._editor.focus()
    // YvGridEditor.afterGuiAttached.apply(this, arguments)
    // this.vv.focus()
    //setTimeout(() => {
    //    this.vv.open()
    //    this.vv.$nextTick(() => {
    //        debugger
    //    })
    //}, 1000)
  }

  getValue() {
    // if (typeof this.leaveReason === 'undefined') {
    //     //不是按导航键移动的, 需要触发校验
    //     if (typeof this.editParams.onValidate === 'function') {
    //         const r = this.editParams.onValidate(value)
    //         if (r) {
    //             //有校验错误，还原内容
    //             return this.origin
    //         }
    //     }
    // }
    //
    // //校验通过，调用 commit 并返回选定的新值
    // if (typeof this.editParams.onCommit === 'function') {
    //     this.editParams.onCommit({
    //         data: this.data,
    //         colDef: this.colDef,
    //         column: this.column,
    //         newValue: this.value,
    //         leaveReason: this.leaveReason,
    //     })
    // }
    // this.hasGetValue = true
    return this.value
  }

  destroy() {
    super.destroy()
    this.$el.removeEventListener('keydown', this._onKeyDown.bind(this))
    // this.vv.$destroy()
  }

  focusIn() {
    super.focusIn()
    // this.vv.focus()
  }

  focusOut() {
    super.focusOut()
  }
}