import CtlGridEditor from './CtlGridEditor'
import webix from 'webix'
import { CtlCombo } from './form/select/CtlCombo'
import { YvEventDispatchArgs } from './YvanEvent'

export default class CtlGridEditorCombo extends CtlGridEditor {
  isPinned: any
  options: any
  $el: any
  _id!: string
  _editor: any
  leaveReason: any

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

    // let select = document.createElement('select');
    // for (let i = 0; i < this.options.length; i++) {
    //   const element = this.options[i];
    //   $(select).append(`<option value =${element.id}>${element.text}</option>`)
    // }
    // $(select).val(params.value);
    // $(select).css('height', '100%');
    // $(select).css('width', '100%');
    // this.$el = select
    this._id = 'dd' + webix.uid()
    this.$el = $(`<div id="${this._id}"></div>`)[0]
    // this.$el.addEventListener('change', this._comboValueChange.bind(this))
    this.$el.addEventListener('keydown', this._onKeyDown.bind(this))
  }

  // _comboValueChange() {
  //   this.value = $(this.$el).val()
  // }

  _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()
    }
  }

  getGui() {
    return this.$el
  }

  _editValueOnChange(newValue: any, oldValue: any) {
    this.value = newValue
    YvEventDispatchArgs(this.onChange, this, [this.value, this.data], this.vue._webix.$scope)
    this.vue._transactionUpdateRow(this.vue._gridData)
  }

  _editGetRemoteData(sender: any, data: any) {
    if ((data && data.length > 0)) {
      delete this.editParams.dataSource
      this.editParams.options = data
      this.colDef.valueFormatter = (params: any) => {
        if (_.size(params.data) <= 0) return
        const optionItem = _.find(data, item => {
          const id = _.toString(item['id'])
          return id && id === _.toString(params.value)
        })
        if (optionItem) {
          //找到text属性值
          return optionItem['text']
        }
        return params.value
      }
    }

  }

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

  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,
    //     })
    // }
    return this.value
  }

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

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

  focusOut() {
    super.focusOut()
  }
}