<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
  <a-input
    v-if="!ifTextarea"
    ref="aComInputFilter"
    AutoComplete="off"
    :autofocus="autofocus"
    v-model:value="filterValue"
    @pressEnter="pressEnter"
    @keydown="onKeyUpDelete"
    @focus="inputFocus" />
  <a-textarea
    v-else
    class="input-textarea-span"
    ref="aComInputFilter"
    AutoComplete="off"
    :autosize="false"
    :autofocus="autofocus"
    v-model:value="filterValue"
    @pressEnter="pressEnter"
    @keydown="onKeyUpDelete"
    @focus="inputFocus" />
  <span style="position: absolute; top: -9999px; left: 0px; white-space: pre; font-size: 12px">
    >
    {{ filterValue }}
  </span>
  <!-- 是否不为空选项 -->
  <div v-if="isEmptyItem.isShowEmptyDiv" class="show-is-empty-content">
    <div class="ns-input-filter-list">
      <p class="is-disabled"> 是否是空值 </p>
      <ul class="filter-list-text">
        <li
          @click.stop="chooseIsEmptyLabel(item)"
          v-for="(item, index) in isEmptyItem.showEmptyOption"
          :key="index">
          {{ item.label }}
        </li>
      </ul>
      <p class="is-disabled"> 注:也可直接输入关键字</p>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, toRaw, watch, onMounted } from 'vue';
  import * as utils from './input-filter-util';

  export default defineComponent({
    name: 'NsInputFilterInput',
    props: {
      value: String,
      chooseItem: {
        type: Object,
        default: () => {},
      },
      spanIndex: Number,
      autofocus: Boolean,
    },
    emits: ['change', 'pressEnter', 'chooseIsEmptyLabel', 'keydown', 'focus'],
    setup(props, ctx) {
      // console.log('NsInputFilterInput');
      // console.log(props);
      const focusObj = ref({
        focus: true,
      });
      //span点击 input为textArea
      // const ifTextarea = ref(typeof props.spanIndex != 'undefined' ? true : false);
      const ifTextarea = ref(false);

      const aComInputFilter = ref(null);

      onMounted(() => {
        if (props.autofocus) {
          aComInputFilter.value != null
            ? aComInputFilter.value.input.focus({
                cursor: 'start', // 聚焦在文本的开始位置
              })
            : '';
        }
      });

      let isEmptyItem = ref(props.chooseItem);
      let filterValue = ref(toRaw(props.value));
      let inputWidth = computed(() => {
        if (typeof filterValue.value == 'undefined') {
          return 8 + 'px';
        }
        return DataLength(filterValue.value) + 'px';
      });
      //计算字符长度
      const DataLength = (fData: string) => {
        return utils.DataLength(fData);
      };

      //回车
      function pressEnter() {
        // console.log('filterValue.value');
        // console.log(filterValue.value);
        ctx.emit('pressEnter', filterValue.value, props.spanIndex, false, true);
      }

      //删除
      function onKeyUpDelete(event: { key: string }) {
        if (event.key == 'Backspace') {
          if (typeof filterValue.value != 'undefined' && filterValue.value != '') {
            return;
          }
          ctx.emit('keydown', props.spanIndex);
        }
      }

      /**
       * 空值与不为空值选中
       */
      function chooseIsEmptyLabel(item: any) {
        ctx.emit('chooseIsEmptyLabel', item, filterValue.value);
      }

      function inputFocus() {
        ctx.emit('focus');
      }

      //需要监听的数据
      watch(
        () => filterValue.value,
        (newValue) => {
          if (newValue != '' && newValue.split('：').length > 1) {
            if (newValue.split('：')[1] != '') {
              if (isEmptyItem.value.showEmptyOption.length > 0)
                isEmptyItem.value.isShowEmptyDiv = false;
            } else {
              if (isEmptyItem.value.showEmptyOption.length > 0)
                isEmptyItem.value.isShowEmptyDiv = true;
            }
          } else {
            if (isEmptyItem.value.showEmptyOption.length > 0)
              isEmptyItem.value.isShowEmptyDiv = false;
            // if (typeof props.spanIndex != 'undefined') {
            //   console.log('出现过滤标签');
            //   ctx.emit('showFilterLabel', newValue, props.spanIndex);
            // }
          }
          ctx.emit('change', newValue, props.spanIndex);
        },
      );
      return {
        inputWidth,
        filterValue,
        focusObj,
        isEmptyItem,
        aComInputFilter,
        ifTextarea,
        pressEnter,
        onKeyUpDelete,
        chooseIsEmptyLabel,
        inputFocus,
      };
    },
  });
</script>
<style lang="less" scoped>
  .ant-input:focus {
    border: transparent !important;
    box-shadow: none !important;
  }
  .show-is-empty-content {
    position: absolute;
    z-index: 9;
    left: v-bind(inputWidth);
  }
  .ns-input-filter-list {
    border-radius: 0;
    background-color: #fff;
    box-shadow: 0 0 16px 0 rgb(54 58 80 / 16%);
    min-width: 150px;
    color: rgba(0, 0, 0, 0.9);
  }
  .filter-list-text {
    overflow-y: auto;
    padding: 0;
    list-style: none;
    color: rgba(0, 0, 0, 0.9);
    margin: 0px;
  }
  .is-disabled {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
    font-size: 12px;
    margin-bottom: 0px;
    padding: 6px 10px;
  }
  .filter-list-text > li:first-child,
  .filter-list-text > li:last-child {
    border-radius: 0 0 0 0;
  }
  .filter-list-text > li:hover {
    background-color: #ebeef2;
  }
  .filter-list-text > li {
    margin-bottom: 0;
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    display: block;
    cursor: pointer;
  }
  .input-textarea-span {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    height: 28px;
    font-size: 12px;
    border: 1px solid rgb(207, 213, 222);
    border-radius: 0px;
    background-color: rgb(255, 255, 255);
    color: rgba(0, 0, 0, 0.9);
    transition: color 0.2s ease-in-out 0s, background-color, border;
    padding: 3px 0px !important;
    min-height: 22px !important;
    line-height: 22px !important;
    resize: none;
  }
</style>
