<template>
  <div class="editable-cell">
    <div v-if="editable" class="editable-cell-input-wrapper">
      <a-input v-model:value="value" @pressEnter="check" v-if="!muliteType" />
      <a-input-search
        v-model:value="value"
        placeholder="请输入值"
        size="small"
        v-else
        @search="changeBtn"
      >
        <template #enterButton>
          <a-button>{{customTitle}}</a-button>
        </template>
      </a-input-search>
      <check-outlined class="editable-cell-icon-check" @click="check" />
    </div>
    <div v-else class="editable-cell-text-wrapper">
      {{ value || " " }}
      <edit-outlined class="editable-cell-icon" @click="edit" />
    </div>
  </div>
</template>

<script lang="ts">
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined
} from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import {
  defineComponent,
  PropType,
  ref,
  watch,
  watchEffect,
  createVNode
} from "vue";
const EditableCell = defineComponent({
  props: {
    text: String,
    customTitle: String,
    onChange: Function,
    title: String,
    minValue: {
      type: Number,
      default: 0
    },
    maxValue: {
      type: Number,
      default: 0
    },
    customValue: String,
    muliteType: {
      type: Boolean,
      default: false
    }
  },
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined
  },
  data() {
    return {
      value: this.text,
      editable: false,
      titles: this.title,
      preValue: this.text
    };
  },
  methods: {
    handleChange(e: any) {
      const value = e.target.value;
      this.value = value;
    },
    changeBtn() {
      this.value = this.customValue ?? "";
    },
    check() {
      let _self = this;
      if (this.value == undefined || this.value == null || this.value == "") {
        this.$message.error("请输入值");
        return;
      }
      if (this.minValue && this.value != this.customValue) {
        if (this.minValue > Number(this.value)) {
          this.$message.error(`最小值必须是${this.minValue}`);
          return;
        }
      }
      if (this.maxValue && this.value != this.customValue) {
        if (this.maxValue < Number(this.value)) {
          this.$message.error(`最大值必须是${this.maxValue}`);
          return;
        }
      }
      Modal.confirm({
        title: `修改${this.titles}`,
        icon: createVNode(ExclamationCircleOutlined),
        content: `是否确认修改${_self.titles}为${_self.value}`,
        onOk() {
          _self.preValue = _self.value;
          _self.editable = false;
          _self.$emit("change", _self.value);
        },
        onCancel() {
          _self.editable = false;
          _self.value = _self.preValue;
          _self.$message.success("你取消了修改");
        }
      });
    },
    edit() {
      this.editable = true;
    }
  }
});

export default EditableCell;
</script>
<style lang="scss">
.editable-cell-input-wrapper {
  .ant-input-group {
    width: 140px;
  }
}
.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;
    top: 5px;
    cursor: pointer;
  }

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

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

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

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
