<template>
  <div class="editable-cell">
    <div class="editable-cell-input-wrapper">
      <a-input :id="'input-' + obj.id" class="hide" :value="obj.value" @blur="handleBlur" @pressEnter="handleEnter"
               :maxLength="500"/>
    </div>
    <div :id="'name-' + obj.id" class="editable-cell-text-wrapper" @dblclick="handleDbClick">
      <span>
        {{ obj.value || ' ' }}
      </span>
    </div>
  </div>
</template>
<script>

import {toggleClass} from "@/utils/index";

export default {
  name: "EditTableCell",
  props: {
    obj: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      editable: false,
    };
  },
  methods: {
    /**
     * 处理双击事件
     */
    handleDbClick() {
      let _that = this;
      console.log('handleDbClick..')
      if (_that.$api.isLook === '1') return;
      let inputEle = document.getElementById("input-" + _that.obj.id);
      let nameEle = document.getElementById("name-" + _that.obj.id);
      toggleClass(inputEle, "hide");
      toggleClass(nameEle, "hide");
      inputEle.focus();
    },
    /**
     * 处理光标移出事件
     */
    handleBlur() {
      let _that = this;
      console.log('handleChange...');
      let inputEle = document.getElementById("input-" + _that.obj.id);
      let nameEle = document.getElementById("name-" + _that.obj.id);
      toggleClass(inputEle, "hide");
      toggleClass(nameEle, "hide");
      console.log('old:' + _that.obj.value);
      console.log('new:' + inputEle.value);
      _that.$emit('change', inputEle.value);
    },
    /**
     * 处理回车事件
     */
    handleEnter() {
      let _that = this;
      console.log('handleEnter...');
      document.getElementById("input-" + _that.obj.id).blur();
    },
  },
};
</script>
<style lang="less" scoped>

.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}

</style>
