<template>
  <view class="k-search-bar">
    <view class="k-search-bar-input" :style="{ width: `${inputWidth}px` }">
      <view
        class="k-search-bar-form"
        :class="{ 'k-search-bar-form-show-search-btn': isShowSearchBtn }"
      >
        <k-icon
          name="search"
          class="k-search-bar-icon-position"
          :size="14"
          color="#333"
        />
        <input
          type="text"
          :placeholder="placeholder"
          v-model="inputVal"
          @input="onInput"
          @focus="onFocus"
          @blur="onBlur"
          :maxlength="maxlength"
          :disabled="disabled"
          :auto-focus="autoFocus"
        />
        <k-icon
          name="close"
          :size="16"
          class="k-search-bar-icon-clear"
          :class="{ 'k-search-bar-icon-clear-right': !isShowSearchBtn }"
          v-if="isShowClearIcon"
          @click="onClear"
        />
        <span
          class="k-search-bar-icon-search-btn"
          v-if="isShowSearchBtn"
          @tap="onInput"
          >搜索</span
        >
      </view>
    </view>
    <view v-if="isShowSelect" class="k-search-bar-select">
      <view
        class="k-search-bar-selector"
        v-if="inputIsShow"
        :class="{ empty: loading && dataListLength === 0 }"
      >
        <scroll-view
          scroll-y="true"
          class="k-search-bar-selector-scroll"
          :style="{ 'max-height': `${selectHeight}px` }"
        >
          <view
            class="k-search-bar-selector-loading"
            v-if="loading && dataListLength !== 0"
          >
            <view>{{ loadingText }}</view>
          </view>
          <!-- <view
            class="k-search-bar-selector-empty"
            v-if="loading && dataListLength === 0"
          >
            <view>加载中··· </view>
          </view> -->
          <view
            class="k-search-bar-selector-empty"
            v-if="!loading && dataListLength === 0"
            @tap="onClose"
            :style="{ height: `${emptyHeight}px` }"
          >
            <view v-if="!$slots.empty" class="empty-text">{{ emptyTips }}</view>
            <slot name="empty"></slot>
          </view>
          <view class="k-search-bar-selector-item-content">
            <view
              class="k-search-bar-selector-item"
              v-for="(item, index) in dataList"
              :key="index"
              @tap="onSelectorClick(index)"
            >
              <text>{{ item[showValue] }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
interface DataList {
  [key: string]: any;
}
import Vue from 'vue';
export default Vue.extend({
  name: 'k-search-bar',
  props: {
    placeholder: {
      type: String,
      default: '请输入',
    },
    infoList: {
      type: Array,
      default() {
        return [];
      },
    },
    value: {
      type: String,
      default: '',
    },
    showValue: {
      type: String,
      default: 'name',
    },
    emptyTips: {
      type: String,
      default: '暂无数据',
    },
    loading: {
      type: Boolean,
      default: false,
    },
    isShowSelect: {
      type: Boolean,
      default: true,
    },
    selectHeight: {
      type: Number,
      default: 300,
    },
    inputWidth: {
      type: Number,
      default: 270,
    },
    emptyHeight: {
      type: Number,
      default: 100,
    },
    loadingText: {
      type: String,
      default: '加载中··· ',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    maxlength: {
      type: Number,
      default: 140,
    },
    autoFocus: {
      type: Boolean,
      default: true,
    },
    isShowSearchBtn: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      inputIsShow: false,
      inputVal: '',
      dataList: [] as DataList[],
      isShowClearIcon: false,
    };
  },
  computed: {
    dataListLength(): number {
      return this.dataList.length;
    },
  },
  watch: {
    value: {
      handler(newVal: string) {
        this.inputVal = newVal;
      },
      immediate: true,
    },
    infoList: {
      handler(newVal: DataList[]) {
        this.dataList = newVal;
      },
      deep: true,
      immediate: true,
    },
    inputVal(val: string) {
      if (!val.length) {
        this.isShowClearIcon = false;
      } else {
        this.isShowClearIcon = true;
      }
    },
  },
  methods: {
    onClose(): void {
      this.inputIsShow = false;
    },
    onFocus(e: MouseEvent): void {
      if (this.dataList.length) {
        this.inputIsShow = true;
        this.isShowClearIcon = !!this.inputVal;
      }
      this.$emit('focus', e);
    },
    onBlur(e: MouseEvent): void {
      this.$emit('blur', e);
    },
    onSelectorClick(index: number): void {
      this.inputIsShow = false;
      this.isShowClearIcon = false;
      this.inputVal = this.dataList[index][this.showValue];
      this.$emit('change', this.dataList[index]);
    },
    onInput(): void {
      this.inputIsShow = true;
      this.$emit('input', this.inputVal);
    },
    onClear(e: MouseEvent): void {
      this.inputVal = '';
      this.$emit('clear', e);
    },
  },
});
</script>

<style scoped lang="scss">
.k-search-bar {
  position: relative;
  display: flex;
  align-items: center;

  .k-search-bar-input {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-left: 30rpx;

    .k-search-bar-form {
      position: relative;
      width: 100%;
      padding: 7rpx 66rpx;
      font-size: 28rpx;
      color: #999;
      border-radius: 60rpx;
      background-color: transparent;
      border: 1px solid #666;

      &.k-search-bar-form-show-search-btn {
        padding-right: 130rpx;
      }

      input {
        color: #333;
        caret-color: #5ae0aa;
        font-weight: 400;
        line-height: 39rpx;

        .uni-input-placeholder {
          color: #999;
        }
      }

      .k-search-bar-icon-position {
        position: absolute;
        top: 50%;
        left: 20rpx;
        transform: translate(0, -50%);
        font-weight: 500;
      }

      .k-search-bar-icon-clear {
        position: absolute;
        top: 50%;
        right: 90rpx;
        transform: translate(0, -50%);

        &.k-search-bar-icon-clear-right {
          right: 24rpx;
        }
      }

      .k-search-bar-icon-search-btn {
        position: absolute;
        top: 50%;
        right: 24rpx;
        transform: translate(0, -50%);
        font-size: 28rpx;
        line-height: 28rpx;
        color: #333;
      }
    }
  }

  .k-search-bar-select {
    .k-search-bar-selector {
      position: absolute;
      top: 84rpx;
      left: 0;
      box-sizing: border-box;
      width: 100%; // 下拉框宽度
      background: #f9faff;
      z-index: 999;

      .k-search-bar-selector-item-content {
        padding-left: 40rpx;
      }

      &:active {
        background-color: #f9faff;
      }

      &.empty {
        background-color: transparent;
      }

      .k-search-bar-selector-scroll {
        box-sizing: border-box;

        .k-search-bar-selector-empty {
          text-align: center;
          color: #333;
          font-size: 32rpx;
          background-color: #f5f7fd;

          .empty-text {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
          }

          &:last-child {
            border-bottom: none;
          }
        }

        .k-search-bar-selector-loading {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgba($color: #fff, $alpha: 0.5);
          color: #333;
          font-size: 32rpx;
        }

        .k-search-bar-selector-item {
          font-size: 32rpx;
          padding-top: 34rpx;
          padding-bottom: 30rpx;
          color: #333;
          border-bottom: 1px solid #dfe0e6;
        }

        *:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
