<template>
  <div class="select-container">
    <input class="input" @tap.stop="changeActive" type="text" :disabled="!filterable" v-model="myvalue"
      @input="handleInput" :placeholder="placeholderStr ? placeholderStr : placeholder" @blur="onBlur"
      @focus="onFocus" />
    <!-- <u-input class="input" @tap.stop="changeActive" :disabled="!filterable" :modelValue="myvalue" @change="handleInput"
      :placeholder="placeholderStr ? placeholderStr : placeholder" @blur="onBlur" @focus="onFocus" :inputBorder="false"
      :clearable="false" border="surround"></u-input> -->
    <div class="dropdown" v-if="showDropdown" style="z-index: 10000;">
      <div class="item" :class="active === index ? 'itemActive' : ''" v-for="(option, index) in selectOptions"
        :key="option[valueKey]" @click="handleSelect(option[label], index)">{{ option[label] }}
      </div>
      <div class="no-data" v-if="selectOptions.length === 0">无数据</div>
    </div>
    <!-- <image class="jiantou" :class="showDropdown ? 'jtactive' : ''" :src="require('./jiantou.png')" mode="" @tap.stop=""></image> -->
    <!-- <image class="close" v-if="clearable && (placeholderStr || inputValue)" :src="require('./close.png')" mode="" @tap.stop="onClose"></image> -->
    <view class="close" v-if="clearable && (placeholderStr || inputValue||myvalue)" @click.stop="onClose">
      <uni-icons type="clear" color="#c0c4cc" size="24" v-if="clearable && (placeholderStr || inputValue||myvalue)"
        tap.stop="onClose" />
    </view>
    <view class="jiantou" v-else>
      <uni-icons :type="showDropdown? 'top' : 'bottom'" size="14" color="#999" />
    </view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showDropdown: false,
        selectOptions: [],
        placeholderStr: '',
        active: null,
        myvalue: ''
      };
    },
    props: {
      inputValue: {
        type: String | Number,
        default: ''
      },
      options: {
        type: Array,
        default: () => []
      },
      clearable: {
        type: Boolean,
        default: false
      },
      filterable: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请选择关键字'
      },
      valueKey: {
        type: String,
        default: 'value'
      },
      label: {
        type: String,
        default: 'label'
      },
    },
    watch: {
      // options: {
      // 	handler: function(newVal, oldVal) {
      // 		//debugger
      // 		let _self = this;
      // 		_self.options = newVal;
      // 	},
      // 	immediate: true,
      // 	deep: true //对象内部的属性监听，也叫深度监听
      // },
      inputValue: {
        handler: function(newVal, oldVal) {
          let _self = this;
          //  debugger

          //if (newVal == oldVal) return;
          //setTimeout(function() {
          // 在这里写要执行的代码
          //if (_self.myvalue != newVal) {	}
          //	_self.myvalue = newVal;
          //	_self.$emit('update:inputValue', newVal);
          if (newVal) {
            const index1 = _self.options.findIndex((xx) => xx[this.valueKey] == newVal);
            if (index1 != -1) {
              _self.active = index1;
              _self.myvalue = _self.options[index1][this.label];
            }
            _self.$emit('update:inputValue', newVal);
          }
          if (newVal === '') {
            _self.active = null;
            _self.myvalue = '';
            _self.placeholderStr = '';
            _self.$emit('update:inputValue', newVal);
          }
          // else {
          // 							_self.active = null;
          // 							_self.myvalue = '';
          // 						}
          //_self.initialdata(); //初始化数据
          //	}, 300);

          //debugger
          // if (this.value) {
          // 	this.checkItemByKey(this.value)
          // } else {
          // 	this.$emit('change', '')
          // }

        },
        immediate: true,
        deep: true //对象内部的属性监听，也叫深度监听
      }
    },
    mounted() {
      //debugger
      // this.selectOptions = [...this.options];
      // if (this.inputValue) {
      // 	const index1 = this.selectOptions.findIndex((xx) => xx.value == this.inputValue);
      // 	if (index1 != -1) {
      // 		this.active = index1;
      // 		this.myvalue = this.selectOptions[index1].label;
      // 	}
      // }
      this.initialdata(); //初始化数据
    },
    methods: {
      initialdata() {
        //初始化数据
        this.selectOptions = [...this.options];
        if (this.inputValue) {
          const index1 = this.selectOptions.findIndex((xx) => xx[this.valueKey] == this.inputValue);
          if (index1 != -1) {
            this.active = index1;
            this.myvalue = this.selectOptions[index1][this.label];
          }
        }
      },

      handleInput() {
        //debugger
        const keyword = this.myvalue;
        // 根据关键词进行筛选数据
        // const filteredOptions = this.options.filter(item => item[this.valueKey].includes(keyword));

        const filteredOptions = this.options.filter(item => item[this.label].includes(keyword));
        this.showDropdown = true;
        this.selectOptions = filteredOptions;
      },
      handleSelect(option, index) {
        this.myvalue = option;
        // debugger
        this.$emit('update:inputValue', this.selectOptions[index][this.valueKey]);
        this.$emit('changeval', this.selectOptions[index][this.valueKey]);
        this.$emit('changeval2', this.selectOptions[index][this.valueKey], this.selectOptions[index][this.label])
        // this.$emit('update:inputValue', option);
        // this.$emit('changeval', this.selectOptions[index][this.valueKey])
        this.active = index
        this.showDropdown = false;
      },
      onBlur() {
        // debugger
        if (this.placeholderStr) {
          this.myvalue = this.placeholderStr
          //	this.$emit('update:inputValue', this.placeholderStr)
          //	this.$emit('changeval', this.selectOptions[index].value)
        }
        if (this.myvalue == '') {
          this.selectOptions = [...this.options]
        }
        setTimeout(() => {
          this.showDropdown = false;
        }, 200)
      },
      onFocus() {

        if (this.myvalue) {
          //debugger
          this.placeholderStr = this.myvalue
          this.myvalue = ''
          //this.$emit('update:inputValue', '')
        }
        if (this.myvalue == '') {
          this.selectOptions = [...this.options]
        }
        if (this.placeholderStr || this.myvalue) {
          this.selectOptions.forEach((item, index) => {
            if (item[this.valueKey] == this.placeholderStr || item[this.valueKey] == this.myvalue) {
              this.active = index
              return
            }
          })
        }

        this.showDropdown = true;
      },
      onClose() {
        this.placeholderStr = ''
        this.myvalue = ''
        this.$emit('clear', '')
        this.$emit('update:inputValue', '')
        this.$emit('changeval', '')
        this.active = null
        this.selectOptions = [...this.options]
        this.showDropdown = false;
      },
      changeActive() {
        if (this.filterable) return
        this.showDropdown = true
      }
    },
  };
</script>

<style scoped>
  .select-container {
    position: relative;
  }

  .select-container>image {
    width: 50rpx;
    height: 28rpx;
    position: absolute;
    right: 20rpx;
    top: 24rpx;
    border-radius: 30rpx;
    z-index: 10;
  }

  .select-container>.close {
    position: absolute;
    right: 35rpx;
    width: 30rpx;
    height: 30rpx;
    top: 10rpx;
  }

  .input {
    width: 100%;
    height: calc(100% - 30rpx - 2px);
    padding: 18rpx 20rpx;
    border: 1px solid #ccc;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #333;
  }

  .dropdown {
    position: absolute;
    top: 76rpx;
    left: 0;
    width: calc(100% - 2px);
    max-height: 400rpx;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-top: none;
    font-size: 28rpx;
    color: #333;
    border-radius: 0 0 8rpx 8rpx;
    z-index: 90000;
  }

  .item {
    padding: 20rpx;
    background-color: #fff;
    cursor: pointer;
  }

  .no-data {
    padding: 20rpx;
    text-align: center;
    color: #999;
  }

  .select-container>.jiantou {
    position: absolute;
    right: 25rpx;
    width: 30rpx;
    height: 30rpx;
    top: 15rpx;
  }

  .jtactive {
    transform: rotate(-180deg);
  }

  .itemActive {
    color: #409eff;
    font-weight: 700;
  }
</style>