const getTargetEl = (el, nodeName = 'TD') =>
  el.nodeName === nodeName ? el :
    el.parentElement ? getTargetEl(el.parentElement, nodeName) : undefined;

function createInput(options) {
  const input = document.createElement('input');
  input.className = options.inputClass || 'td-input';
  input.type = options.inputType || 'text';
  input.value = typeof options.value === 'function' ? options.value() : options.value;
  return input;
}

const targets = [];

function handle(el, binding) {
  const options = binding.value || {};
  const targetEl = getTargetEl(el, options.nodeName || 'TD');
  if (targetEl) {
    let target = targets.find(v => v.el === targetEl);
    if (!target) {
      target = {options, el: targetEl};
      targets.push(target);
      let inputEl;
      targetEl.style.position = 'relative';
      targetEl.addEventListener(options.type || 'click', () => {
        if (!inputEl) {
          inputEl = createInput(target.options);
          targetEl.appendChild(inputEl);
          inputEl.focus();
          inputEl.onblur = () => {
            target.options.input && target.options.input(inputEl.value);
            targetEl.removeChild(inputEl);
            inputEl = undefined;
          };
        }
      });
    } else {
      target.options = options;
    }
  }
}

const TdInput = {
  inserted: handle,
  update: handle,
};

/**
 * v-td-input="{value: () => row.name, input: v => row.name = v }"
 */
Vue.directive('td-input', TdInput);

var Main = {
      data() {
        return {
          label: '日期(表头可编辑)',
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')