<template>
  <view class="search-root">
    <view class="add-shopping" @tap="createGoods">
      <jx-icon icon="jiahao" color="#4eb331" />
      <text>新建</text>
    </view>

    <uni-search-bar
      cancelButton="none"
      clearButton="auto"
      placeholder="请输入关键字 例如：精华液"
      @confirm="confirm"
      @input="input"
      @clear="clear"
      v-model="text"
    />
  </view>
</template>

<script lang="ts" setup >
import toast from '@/utils/toast'
import { jx_trembling } from '@/utils/tools'
import { ref, watch } from 'vue'

/*************************************************
 * props
 */
interface propsType {
  isFilter: string | number
}
const props = defineProps<propsType>()

const text = ref<string>('')

let isInput = false
watch(
  () => props.isFilter,
  (val) => {
    if (val == 'hot' || val == 'audit') {
      isInput = true
    } else {
      isInput = false
    }
  }
)

/*************************************************
 * emit
 */
const emit = defineEmits<{
  (e: 'serachShopping', data: string): void
  (e: 'clearInpu', data: string): void
  (e: 'createGoods'): void
}>()

/*************************************************
 * 确定搜索
 */
let watchTimer: any = null
function confirm(e: AnyObject) {
  if (isInput) {
    let watchTimer = setTimeout(() => {
      text.value = ''
      clearTimeout(watchTimer)
    }, 500)
    return toast('该分类暂不支持搜索')
  }
  emit('serachShopping', e.value)
}

/*************************************************
 * 输入框加载
 */
function input(e: string) {
  if (isInput) {
    let watchTimer = setTimeout(() => {
      text.value = ''
      clearTimeout(watchTimer)
    }, 500)
    return toast('该分类暂不支持搜索')
  }
  trembling(e)
}
const trembling = jx_trembling((e: string) => {
  emit('serachShopping',  e)
}, 1000)

/*************************************************
 * 清空输入框
 */
function clear(e: AnyObject) {
  if (isInput) return
  emit('clearInpu', e.value)
}

/*************************************************
 * 新建商品
 */
function createGoods() {
  emit('createGoods')
}
</script>

<style lang="scss">
.search-root {
  box-sizing: border-box;
  background-color: $jx-primary;
  padding: 0 20rpx 2rpx 20rpx;
  height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .add-shopping {
    width: 80rpx;
    height: 80rpx;
    background-color: #fff;
    font-size: 20rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 50%;
    color: $jx-primary;
    line-height: 1;
    padding: 0;
  }
}
</style>