<template>
  <div class="editable-cell">
    <div v-if="editable" class="editable-cell-input-wrapper">
      <span class="fl mr5 editable-cell-icon">
         <a-icon type="check" title="保存" class="editable-cell-icon-check" @click="save"/>
      </span>
      <a-input :value="titleObj.name" @change="handleChange" @pressEnter="save"/>
    </div>
    <div v-else class="editable-cell-text-wrapper editable-cell-test-wrapper-ellipsis">
      <span class="fl mr5 editable-cell-icon">
        <a-icon type="edit" title="编辑" class="edit mr5" @click="edit"/>
        <a-icon type="delete" title="删除" class="remove" @click="remove"/>
      </span>
      <span :title="titleObj.name">
        {{ titleObj.name || '' }}
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: "EditTableTitle",
  props: {
    titleObj: {
      type: Object,
      default: {}
    },
    initTableTitleData: {
      type: Function,
      default: () => {
        return Function
      }
    }
  },
  data() {
    return {
      /** 编辑状态 */
      editable: false,
    };
  },
  methods: {
    /**
     * 处理输入框改变事件
     * @param e
     */
    handleChange(e) {
      this.titleObj.name = e.target.value;
    },
    /**
     * 保存
     */
    save() {
      let _that = this;
      if (!_that.titleObj.name) {
        this.$message.warning("名称不能为空");
        return;
      }
      _that.$api.updateVariantName({
        fmeaId: _that.$store.getters.rfmeaId,
        variantId: _that.titleObj.variantId,
        name: _that.titleObj.name,
      }).then((res) => {
        if (res.flag) {
          _that.$message.success(res.message, 1);
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      }).finally(() => {
        _that.editable = false;
      });
    },
    /**
     * 编辑
     */
    edit() {
      this.editable = true;
    },
    /**
     * 删除
     */
    remove() {
      let _that = this;
      _that.$confirm({
        title: "警告",
        content: "该变体的所有信息都将被删除，确定删除吗？",
        icon: "aaoopqa", //图标，不想用就随便写一个
        okText: "确定",
        cancelText: "取消",
        onCancel() {
        },
        onOk() {
          _that.$api.deleteVariant({
            fmeaId: _that.$store.getters.rfmeaId,
            variantId: _that.titleObj.variantId,
          }).then((res) => {
            if (res.flag) {
              _that.$message.success(res.message, 1);
              _that.initTableTitleData();
            } else {
              _that.$message.error(res.message, 1);
            }
          }).catch((error) => {
            _that.$message.error(error.response.data.message, 1);
          });
        },
      });
    },
  },

};
</script>
<style lang="less" scoped>

/deep/ .ant-input {
  width: 80%;
}

.editable-cell-test-wrapper-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.editable-cell-icon {
  display: none;
}

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

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

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

</style>
