import CtlGridEditor from './CtlGridEditor'
import webix from 'webix'
import { CtlSearch } from './form/input/CtlSearch'
import { YvEventDispatchArgs } from './YvanEvent'

export default class CtlGridEditorSearch extends CtlGridEditor {
  isPinned: any
  widget: any
  bindProperties: any
  $el: any
  _id!: string
  _editor: any
  leaveReason: any

  init(params: any) {
    super.init(params)
    this.bindProperties = _.cloneDeep(params.colDef.widget.bind)
    this.widget = _.cloneDeep(params.colDef.widget)
    const that = this
    _.assign(this.widget, {
      onConfirm(sender: any, data: any) {
        that.copyPropertiesToRow(data);
      }
    })
    delete this.widget.bind

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

  copyPropertiesToRow(data: any) {
    _.forOwn(this.bindProperties, (value, key) => {
      if (key === this.field) {
        this.value = _.get(data, value);
        this._editor.value = _.get(data, value);
      }
      _.set(this.data, key, _.get(data, value))
    })
    YvEventDispatchArgs(this.onChange, this, [this.value, this.data], this.vue._webix.$scope)
    this.vue._transactionUpdateRow(this.vue._gridData);
  }

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

  _onKeyDown(e: any) {
    if (e.keyCode === 13) {
      // Tab键/回车键, 完全拦截，跑下一个焦点控件
      e.stopPropagation()
      e.preventDefault()

      this._editor.search()
    }
    if (e.keyCode === 37 || e.keyCode === 39) {
      e.stopPropagation()
    }
    // else if (e.code === 'Tab') {
    //   // Tab键/回车键, 完全拦截，跑下一个焦点控件
    //   e.stopPropagation()
    //   e.preventDefault()

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

  getGui() {
    return this.$el
  }

  // _editValueOnChange(newValue: any, oldValue: any) {
  //   this.value = newValue
  // }

  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,
      value: this.value,
      widget: this.widget
    }
    this._editor = CtlSearch.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()
  }
}