<template>
    <div class="editable-cell">
        <div
                v-if="editable.abled"
                class="editable-cell-input-wrapper"
        >
            <span v-if="record.attrValueType === 'TEXT'">
                <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"
                        @pressEnter="check"
                />
            </span>
            <span v-if="record.attrValueType === 'LONG'">
                <a-input-number style="width:100%" v-model="value" @change="numChange" :precision="0" :step="1"
                                @keyup.enter="check"/>
            </span>
            <span v-if="record.attrValueType === 'DATE'">
                <a-date-picker style="width: 100%" @change="dataChange" :defaultValue="value"/>
                <!-- <a-date-picker style="width: 100%" @change="dataChange" :defaultValue="moment(value,dateFormat)"/> -->
            </span>
            <span v-if="record.attrValueType === 'DOUBLE'">
                <a-input-number style="width:100%" v-model="value" @change="numChange" :step="1"
                                @keyup.enter="check"/>
            </span>
            <span v-if="record.attrValueType === 'BOOLEAN'">
                <a-select v-model="value" style="width: 100%" @change="numChange" :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>
            <a-icon
                    style="margin-right: 20px;margin-top:5px;"
                    type="check"
                    class="editable-cell-icon-check"
                    @click="check"
            />
            <a-icon
                    style="margin-top:5px;"
                    type="close"
                    class="editable-cell-icon-check"
                    @click="close"
            />
        </div>
        <div
                v-else
                class="editable-cell-text-wrapper"
                style="height:32px"
        >
            <span v-if="record.attrValueType === 'BOOLEAN'">{{booleanText[text]}}</span>
            <span v-else>
                 <a-tooltip placement="right">
                        <template slot="title">
                            <span>{{text}}</span>
                        </template>
                         {{ text || ' ' | ellipsis(9)}}
                    </a-tooltip>
            </span>
            <a-icon
                    style="top: 8px;"
                    type="edit"
                    class="editable-cell-icon"
                    @click="edit"
            />
        </div>

    </div>
</template>

<script>
  // TODO 暂时注释moment相关代码
  // import moment from 'moment'
  import { getDomainValue } from "@/api/graph/domain";

  export default {
    props: {
      text: String,
      editable: Object,
      record: null
    },
    data () {
      return {
        isShow: true, // 默认显示，只有当查询接口没有返回结果，显示正常的input 。
        booleanText: this.$const.booleanText,
        dateFormat: this.$const.dateFormat,
        value: '',
        fetching: false,
        notFoundContent: '无返回结果',
        searchResult: []
      }
    },
    watch: {
      ['editable.abled'] () {
        if (this.record.attrValueType === 'DATE' && !this.value) {
          // this.value = moment().format(this.dateFormat)
          this.value = this.dateFormat
        } else {
          this.value = this.text
        }
      }
    },
    methods: {
      // moment,
      // dataChange (moment, data) {
      //   this.value = data
      // },
      dataChange (data) {
        this.value = data
      },
      numChange (num) {
        this.value = num
      },
      handleChangeSelect (value) {
        this.value = value
      },
      handleChange (e) {
        const value = e.target.value
        this.value = value
      },
      close () {
        this.$emit('close', this.record)
      },
      check () {
        // 这个if的判断，是判断整形和浮点型时，输入的值的范围是否正确
        if (this.value.length === 0) {
          this.$message.error('请选择或输入值')
          return false
        }
        try {
          if (this.record.attrValueType === 'LONG' || this.record.attrValueType === 'DOUBLE') {
            const rule = JSON.parse(this.record.domain)
            if (!rule.minValue && !rule.maxValue) {  // 既没有最大限制，也没有最小限制
              this.$emit('change', this.value)
              return false
            }
            if (rule.minValue && !rule.maxValue) {  // 有最小限制，没有最大限制
              if (this.value < rule.minValue) {
                this.$message.error('不能比最小值还小')
                return false
              }
            }
            if (!rule.minValue && rule.maxValue) {  // 没有最小限制，有最大限制
              if (this.value > rule.maxValue) {
                this.$message.error('不能比最大值还大')
                return false
              }
            }
            if (rule.minValue && rule.maxValue) {  // 有最小限制，也有最大限制
              if (this.value < rule.minValue || this.value > rule.maxValue) {  //  既有最大限制，也有最小限制
                this.$message.error('值超出范围，请修改')
                return false
              }
            }

          }
        } catch (e) {
          // this.$message.error('枚举类型获取出错，请联系管理员')
          // return false
        }
        this.$emit('change', this.value)
      },
      edit () {
        this.editable.abled = true
      },
      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('枚举类型获取出错，请联系管理员')
        }
      }
    }
  }
</script>
