<template>
    <div class="editable-cell">
    <span v-if="record.attrValueType === 'TEXT' || !record.attrValueType">
      <a-select
              v-if="record.domain && isShow"
              showSearch
              :value="value"
              placeholder="请输入关键词"
              :defaultActiveFirstOption="false"
              :showArrow="false"
              @focus="handleFocus"
              @change="handleChangeSelect"
              style="width: 100%"
              :notFoundContent="fetching ? undefined : notFoundContent"
      >
        <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
        <a-select-option
                v-for="(d, $index) in searchResult"
                :value="d"
                :key="$index"
        >{{ d }}</a-select-option
        >
      </a-select>
      <a-input
              v-else
              v-model="value"
              @change="handleChange"
              :suffix="record.attrUnit"
              @pressEnter="check"
      />
    </span>
    <span class="number-input-box" v-if="record.attrValueType === 'LONG'">
      <a-input-number
              style="width:100%"
              v-model="value"
              @change="numChange"
              :precision="0"
              :formatter="value => `${value}`"
              :step="1"/>
              <div class="num-unit">{{record.attrUnit ? record.attrUnit : ''}}</div>
    </span>
        <span v-if="record.attrValueType === 'DATE'">
      <a-date-picker
              style="width: 100%"
              @change="dataChange"
              :defaultValue="value ?moment(value, dateFormat):moment().isAfter(moment(null,dateFormat))"
      />
    </span>
    <span class="number-input-box" v-if="record.attrValueType === 'DOUBLE'">
      <a-input-number
              style="width:100%"
              v-model="value"
              @change="doubleChange"
              :formatter="value => `${value}`"
              :step="1"
      />
      <div class="num-unit">{{record.attrUnit ? record.attrUnit : ''}}</div>
    </span>
        <span v-if="record.attrValueType === 'BOOLEAN'">
      <a-select
              v-model="value"
              style="width: 100%"
              @change="booleanChange"
              :allowClear="true"
      >
        <a-select-option value="true">{{
          booleanText["true"]
        }}</a-select-option>
        <a-select-option value="false">{{
          booleanText["false"]
        }}</a-select-option>
      </a-select>
    </span>
    </div>
</template>

<script>
  import moment from "moment";
  import { getDomainValue } from '@/api/graph/domain'

  export default {
    name: "attrEditInput",
    props: {
      record: null,
      pValue: String
    },
    data() {
      return {
        isShow: true,
        notFoundContent: "",
        fetching: false,
        searchResult: [],
        value: this.pValue ? this.pValue : '',
        dateFormat: this.$const.dateFormat,
        booleanText: this.$const.booleanText,
        editing: false // 当前是否有过修改
      };
    },
    methods: {
      moment,
      handleFocus() {
        const vm = this;
        vm.fetching = true;
        try {
          if (this.record.domain) {
            const domainKey = JSON.parse(this.record.domain).domainKey;
            if (!domainKey) {
              this.$message.error("枚举类型获取出错，请联系管理员");
              return false;
            }
            getDomainValue(domainKey).then(data => {
              if (data) {
                vm.fetching = false;
                vm.searchResult = data;
              } else {
                vm.isShow = false;
              }
            });
          } else {
            vm.fetching = false;
          }
        } catch (e) {
          this.$message.error("枚举类型获取出错，请联系管理员");
        }
      },
      check() {
        // 这个if的判断，是判断整形和浮点型时，输入的值的范围是否正确
        if ((!this.value || this.value.length === 0) && this.record.notNull) {
          this.$message.error(this.record.attrClsName + "请选择或输入值");
          return false;
        }
        try {
          if (
            (this.record.attrValueType === "LONG" ||
            this.record.attrValueType === "DOUBLE")
          ) {
            if (!this.record.domain) {
              this.$emit("change", this.record, this.value);
              return true
            }
            const rule = JSON.parse(this.record.domain);
            if (!rule.minValue && !rule.maxValue) {
              // 既没有最大限制，也没有最小限制
              if (this.editing) {
                this.$emit("change", this.record, this.value);
              }
              return true;
            }
            if (rule.minValue && !rule.maxValue) {
              // 有最小限制，没有最大限制
              if (this.value < rule.minValue) {
                this.$message.error(this.record.attrClsName + "不能比最小值还小");
                return false;
              }
            }
            if (!rule.minValue && rule.maxValue) {
              // 没有最小限制，有最大限制
              if (this.value > rule.maxValue) {
                this.$message.error(this.record.attrClsName + "不能比最大值还大");
                return false;
              }
            }
            if (rule.minValue && rule.maxValue) {
              // 有最小限制，也有最大限制
              if (this.value < rule.minValue || this.value > rule.maxValue) {
                //  既有最大限制，也有最小限制
                this.$message.error(this.record.attrClsName + "值超出范围，请修改");
                return false;
              }
            }
            this.value = this.value.toString().replace(/[^\d.]/g, "") // 去除除了数字之外的值
          }
        } catch (e) {
          this.$message.error(this.record.attrClsName + "枚举类型获取出错，请联系管理员");
        }
        if (this.editing) {
          this.$emit('change', this.record, this.value)
        }
        return true
      },
      dataChange(moment, data) {
        this.value = data
        this.editing = true
      },
      booleanChange(data) {
        this.value = data
        this.editing = true
      },
      numChange(num) {
        let Reg=/^[-+]?\d+$|^\d*$/;
        Reg.test(num)
        if(Reg.test(num)){
          this.value = num
          this.editing = true
        }else{
          this.value = 0
          this.$message.error('请输入整数')
        }
      },
      doubleChange(num) {
        let Reg=/^(-|\+)?(\d{1,8})?([.]\d*)?$/;
        Reg.test(num)
        if(Reg.test(num)){
          this.value = num
          this.editing = true
        }else{
          this.value = 0
          this.$message.error('请输入整数')
        }
      },
      handleChangeSelect(value) {
        this.value = value
        this.editing = true
      },
      handleChange(e) {
        this.value = e.target.value
        this.editing = true
      },
    }
  };
</script>

<style scoped>
.ant-input-number{ position: relative; }
</style>
<style>
.number-input-box .num-unit{ position: absolute; right: 30px; top: 1px; background: #fff; height: 30px; line-height: 30px; }
.number-input-box .ant-input-number .ant-input-number-input-wrap .ant-input-number-input{ padding-right: 55px; }
.number-input-box .ant-input-number-handler-wrap{ opacity: 1 !important; }
</style>
