<template>
  <view class="search-wrapper" :style="{ padding: wrapPd }">
    <view class="search-input bdR16">
      <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
      <input type="text" :placeholder="place" placeholder-style="#8C8C8C" :focus="isFocus" v-model="searchText" :disabled="isDisabled" @input="change" />
      <view class="search-text" v-if="searchText || flag" @tap="search">{{ text }}</view>
    </view>
    <slot>
      <view class="search-screen" v-if="props.screen" @tap="tapScreen">
        <image src="/static/iconImg/icon-filter.svg" mode="scaleToFill" />
        筛选
      </view>
    </slot>
  </view>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { debounce } from '@/util/debounce'
const props = defineProps({
  screen: {
    type: Boolean,
    default: false,
  },
  place: {
    type: String,
    default: '搜索代理商名、代理商号、联系人手机号',
  },
  bgColor: {
    type: String,
    default: '#fff',
  },
  wrapPd: {
    type: String,
    default: '30rpx',
  },

  isFocus: { type: Boolean, default: false },
  isDisabled: { type: Boolean, default: false },
})

onMounted(() => {
  focus.value = props.isFocus
})
const focus = ref(false)
const text = ref('搜索')
const searchText = ref('')
const flag = ref(false)
// 点击筛选触发回调
const emits = defineEmits(['screen', 'search', 'resetSearch'])
const tapScreen = () => {
  emits('screen')
}
const change = () => {
  text.value = '搜索'
}
// 点击触发事件
function search() {
  flag.value = true
  if (text.value === '搜索') {
    if (!searchText.value.trim()) return uni.showToast({ title: '请输入搜索条件', icon: 'none' })
    text.value = '取消'
    emits('search', searchText.value)
  } else {
    searchText.value = ''
    text.value = '搜索'
    emits('resetSearch', 'reset')
  }
}
defineExpose({ searchText })
</script>
<style lang="scss" scoped>
.search-wrapper {
  display: flex;
  align-items: center;
  .search-input {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 21rpx;
    background-color: #fff;
    input {
      flex: 1;
      font-size: 27rpx;
    }
    image {
      margin: 0 10rpx 0 10rpx;
      width: 30rpx;
      height: 30rpx;
    }
    .search-text {
      font-size: 30rxp;
      padding: 0 10rpx;
      color: $primaryColor;
    }
  }
  .search-screen {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.6);
    image {
      width: 36rpx;
      height: 36rpx;
      margin: 0 15rpx;
    }
  }
}
</style>
