<template>
  <div class="search-wrap" data-weiling-mobile-ui-wl-search>
    <template v-if="showType === 'search'">
      <div :class="searchClass">
        <div class="search-icon">
          <WlPic :src="icon" />
        </div>
        <div class="search-input">
          <input
            type="text"
            :placeholder="placeholder"
            v-model="fieldValue"
            ref="inputRef"
            @input="onDebounceSave"
            @change="onContentChange"
            @focus="is_focus = true"
            @blur="is_focus = false"
            @compositionend="compositionend"
            @compositionstart="compositionstart"
          />
        </div>
        <div
          class="search-close-icon"
          v-if="closable && fieldValue"
          @click="onClear"
        >
          <WlPic :src="deleteIcon" />
        </div>
      </div>
      <div class="action">
        <slot name="action"></slot>
      </div>
    </template>
    <template v-if="showType === 'default'">
      <div class="default-search" @click="onClickDefault">
        <div class="default-search-content">
          <WlSvgIcon type="search" width="18" height="18" color="#c1c1c1" />
          <span class="search-text">{{ placeholder }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2023-12-18 13:51:15
 */
export default {
  name: "WlSearch",
};
</script>

<script setup lang="ts">
import { computed, ref, watch, watchEffect } from "vue";
import { TShowType } from "../type";
import { onDebounce } from "@mobileUI/utils";
import deleteIcon from "@mobileUI/assets/images/delete.png";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import searchIcon from "@mobileUI/assets/images/search-icon.png";
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";

type Props = {
  modelValue?: string;
  icon?: string;
  placeholder?: string;
  closable?: boolean;
  needBorder?: boolean;
  showType?: TShowType;
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
  icon: searchIcon,
  placeholder: "搜索",
  closable: true,
  needBorder: true,
  showType: "search",
});

const emit = defineEmits<{
  (e: "onClear");
  (e: "onClickDefault");
  (e: "onChange", val: string);
  (e: "onBlurChange", val: string);
  (e: "onChinaChange", val: string);
  (e: "update:modelValue", val: string);
}>();

const fieldValue = ref("");
const is_focus = ref(false);
const inputRef = ref(null);
// 是否正在输入中文字符
let isChinaInput = false;

const searchClass = computed(() => {
  return {
    search: true,
    "search-focus": is_focus.value,
    "search-border": props.needBorder,
  };
});

const onClickDefault = () => emit("onClickDefault");

const onClear = () => {
  fieldValue.value = "";
  emit("update:modelValue", "");
  emit("onChange", "");
  emit("onClear");
};

const onDebounceSave = onDebounce((event) => {
  if (!isChinaInput) {
    const val = event.target.value;
    emit("update:modelValue", val);
    emit("onChange", val);
  }
}, 300);

const onContentChange = onDebounce((event) => {
  const val = event.target?.value;
  emit("update:modelValue", val);
  emit("onBlurChange", val);
}, 300);
const compositionend = () => {
  isChinaInput = false;
};
const compositionstart = () => {
  isChinaInput = true;
};
const onFocus = () => {
  inputRef.value?.focus();
};

defineExpose({
  onFocus,
  inputEl: inputRef,
});

watch(
  () => fieldValue.value,
  (val) => {
    emit("update:modelValue", val);
  },
);

watchEffect(() => {
  fieldValue.value = props.modelValue;
});
</script>

<style lang="scss">
.search-wrap[data-weiling-mobile-ui-wl-search] {
  @extend %flex-middle;

  .search {
    flex: 1;
    height: 42px;
    border-radius: j(10);
    overflow: hidden;
    @extend %flex-middle;

    &-border {
      border: j(1) solid var(--wl-line-color-dark);
    }

    &-focus {
      border-color: $theme-blue-color;
    }

    &-icon {
      width: j(16);
      height: j(16);
      margin: j(6) j(2) j(6) j(8);
    }

    &-input {
      flex: 1;

      > input {
        width: 100%;
        background-color: transparent;
        border: 0;

        &:focus {
          outline: none;
        }
      }
    }

    &-close-icon {
      width: j(18);
      height: j(18);
      padding: j(10);
      cursor: pointer;
      box-sizing: content-box;
    }
  }

  .action {
    flex-shrink: 0;
  }

  .default-search {
    background-color: #f4f9fd;
    padding: j(12) j(15);
    cursor: pointer;
    width: 100%;

    &-content {
      height: j(36);
      border-radius: j(6);
      background-color: #fff;
      @extend %flex-middle-center;

      .search-text {
        padding-left: j(3);
      }
    }
  }
}
</style>
