<template>
  <div class="custom-search-input">
    <tm-input
      class="search-input"
      placeholder="请输入…"
      color="#F9F9FD"
      :round="1"
      prefix="tmicon-search"
      prefixColor="#46299D"
      :prefixLabel="props?.first_talk_record_infos?.receiver_name"
      v-model.lazy="state.searchText"
      @input="inputSearchText"
      :showClear="true"
      @clear="clearInput"
    ></tm-input>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, reactive, watch } from 'vue'
const props = defineProps({
  searchText: String,
  first_talk_record_infos: Object,
})
const state = reactive({
  searchText: '', //搜索内容
})
const emits = defineEmits(['inputSearchText'])

watch(
  () => props.searchText,
  (newSearchText) => {
    state.searchText = newSearchText
  },
)

//清除输入的搜索内容
const clearInput = () => {
  inputSearchText('')
}

//输入搜索文本
const inputSearchText = (e) => {
  emits('inputSearchText', e)
}
</script>
<style scoped lang="scss">
.custom-search-input {
  width: 100%;
  .search-input {
    width: 100%;
  }

  .search-input::v-deep .tmicon-times-circle-fill::before {
    content: '\e82a';
    color: #d2d2d5;
  }
}
</style>