<template>
  <div>
    <a-input-group compact style="width: 100%">
      <a-input
        v-model:value="searchText" :class="validInput" :style="{ width: inputWidth }" @input="textChange($event)" @keyup.up="selectUp"
        @keyup.down="selectDown" @keyup.enter="selectEnter" @keyup.esc="autoCompleteVisible = false"
      />
      <a-button @click="showSearchDialog">
        <template #icon>
          <SearchOutlined />
        </template>
      </a-button>
    </a-input-group>

    <div>
      <Modal v-model:show="modal" :full="true" :title="titleName" @ok="searchDialogOk" @cancel="searchDialogCancel">
        <InfoWindow
          ref="info" :info-window-no="infoWindowNo" :where-clause-source="whereClauseSource"
          :field-value="fieldValue" :is-search-widget="true" @data-selected="dataSelected"
        />
      </Modal>
    </div>
    <SearchAutoCompleteWidget
      ref="autoComplete" :key="'search-auto-complete-widget' + infoWindowNo"
      v-model:show="autoCompleteVisible" :info-window-no="infoWindowNo" :where-clause-source="whereClauseSource"
      class="auto-complete" @select-data="dataSelected"
    />
    <Loading v-if="loading" />
  </div>
</template>
<script>

import WindowClientUtil from '../../resource/dictionary/WindowClientUtil.js';
import { SearchOutlined } from '@ant-design/icons-vue';


export default {

  components: {
    SearchOutlined,
  },
  /**
     * fieldName: 过滤字段Id
     * infoWindowNo: 查询窗口Id
     * fieldValue: 显示的值
     * 		{
     * 			displayValue: ['Jack'],
     * 			fieldType: 'Key',
     * 			id: 1
     * 		}
     * titleName: 弹出窗口的标题
     * displayName: 文本框中显示的字段
     */



  props: {

    fieldName: {
      type: String,
      default: null,
    },
    infoWindowNo: {
      type: String,
      default: null,
    },
    titleName: {
      type: String,
      default: null,
    },
    displayName: {
      type: String,
      default: null,
    },
    whereClauseSource: {
      type: Object,
      default: function () {
        return null;
      },
    },
    fieldValue: {
      type: Object,
      default: function () {
        return null;
      },
    },
  },


  emits: ['valueChanged', 'dataSelected'],



  data: function () {
    return {
      labelNames: [],
      isVisible: [],
      searchText: '',
      leftPosition: 0,
      loading: false,
      modal: false,
      autoCompleteVisible: false,
    };
  },

  computed: {



    /**
         * 是否是有效的数据
         */
    validInput: function () {
      var isValid = true;
      if (this.searchText != undefined && this.searchText.length > 0) {
        if (this.fieldValue != undefined && (this.fieldValue.id == undefined || this.fieldValue.id <= 0)) {
          isValid = false;
        } else if (this.fieldValue != undefined && (this.fieldValue.displayValue != undefined && this.fieldValue.displayValue[0] != this.searchText)) {
          isValid = false;
        }
      }

      return {
        'invalid-input': isValid == false,
      };
    },

    inputWidth: function () {
      return 'calc(100% - 32px)';
    },
  },

  watch: {
    redraw: function () {
      console.log('filter search widget redraw');
      this.reCalVisible();
    },

    fieldValue: {
      handler(currentValue, oldValue) {
        console.log('currentValue:' + JSON.stringify(currentValue));
        this.searchText = this.initSearchText(currentValue);
        console.log('searchText:' + this.searchText);
      },
      deep: true,
    },

    fieldName: function () {
      // 当filterSchemaLineId发生变化的时候，选择的值设置成undefined		
      // bug fixed by jack 20180201
      this.searchText = undefined;
    },
  },

  created: function () {

  },

  mounted: function () {
    if (this.fieldValue == undefined) {
      this.searchText = undefined;
    } else {
      this.searchText = this.initSearchText(this.fieldValue);
    }
  },

  methods: {
    selectDown: function () {
      this.$refs.autoComplete.selectDown();
    },

    selectUp: function () {
      this.$refs.autoComplete.selectUp();
    },

    selectEnter: function () {
      var _self = this;

      var data = _self.$refs.autoComplete.getSelectData();
      if (data != undefined) {
        _self.dataSelected(data);
        _self.autoCompleteVisible = false;
      } else {
        if (_self.searchText == undefined || _self.searchText.length == 0) {
          if (_self.autoCompleteVisible == true) {
            _self.autoCompleteVisible = false;
          } else {
            _self.$refs.autoComplete.initSearch('');
          }
        }
      }
    },

    // 显示搜索对话框
    showSearchDialog: function () {
      var _self = this;
      this.modal = true;

      _self.autoCompleteVisible = false;

    },

    searchDialogOk: function () {

    },

    searchDialogCancel: function () {

    },

    // 输入的文本发生改变
    textChange: function (e) {
      var text = e.target.value;
      console.log('textChange： ' + text);
      if (text == undefined || text.length == 0) {
        var newFieldValue = {
          id: null,
          displayValue: [],
          fieldType: 'Key',
        };
        this.$emit('valueChanged', newFieldValue);
      }
      this.$refs.autoComplete.initSearch(text);
    },

    // 数据已经选择
    dataSelected: function (modelData) {
      var _self = this;
      _self.modal = false;

      _self.autoCompleteVisible = false;
      var displayName = _self.displayName;
      console.log('modelData:' , modelData.data);
      console.log('displayName:' , displayName);
      if (modelData == undefined) {
        return;
      }

      console.log('已经选择了数据:' + modelData.id);
      var displayValue;
      if (modelData.data != undefined && modelData.data.name != undefined && modelData.data.name.displayValue[0]) {
        displayValue = modelData.data.name.displayValue[0];
      } else {
        displayValue = modelData.data[_self.displayName].displayValue[0];
      }

      var newFieldValue = {
        id: modelData.id,
        displayValue: [displayValue],
        fieldType: 'Key',
      };

      if (newFieldValue.displayValue.length > 0) {
        _self.searchText = newFieldValue.displayValue[0];
      }
      this.$emit('valueChanged', newFieldValue);
      this.$emit('dataSelected', modelData);
    },

    initSearchText: function (tempFieldValue) {
      if (tempFieldValue == undefined || tempFieldValue.displayValue == undefined || tempFieldValue.displayValue.length == 0) {
        return '';
      } else {
        return tempFieldValue.displayValue[0];
      }
    },
  },
};
</script>

<style scoped>
.auto-complete {
  left: 0px;
  top: 34px;
}

.invalid-input {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
</style>
