<template>
  <section class="search-container">
    <van-search
      v-model="value"
      :placeholder="placeholder"
      style="--van-search-padding: 0"
      @search="handleSearchActino"
    >
    </van-search>
    <p class="search" @click="handleSearchActino">
      搜索
    </p>
<!--    <el-text>搜索</el-text>-->
  </section>
</template>

<script setup lang="ts">
// 搜索的关键词
const value = defineModel<string>('value', { required: true });
/**
 * @description 搜索方法
 */
const searchMethod = defineModel<any>('search', {
  type: Function
});

const placeholder = defineModel('placeholder', {
  type: String,
  default: '请输入搜索关键词'
});

const emit = defineEmits(['search']);

function handleSearchActino() {
  emit('search');
  searchMethod.value && searchMethod.value();
}
</script>

<style scoped lang="scss">
.search-container {
  :deep(.van-search) {
    padding: 0;
    //margin: 0 10px;
    border-radius: 0;
    background-color: #fff;
  }

  .search {
    margin: 0 10px;
    cursor: pointer;
    display: flex;
    justify-self: center;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    color: var(--primary-color);
    &::after {
      content: '|';
      position: absolute;
      right: 11vh;
      top: 1vh;
      //transform: translateY(-50%);
      font-weight: bold;
      color: #E7DEDF; // 竖线颜色与搜索文字一致
      pointer-events: none; // 确保不影响点击事件
    }
  }

  :deep(.van-search__content){
    background-color: #fff;
  }

  border-radius: 18px;
  border: solid 1px var(--primary-color);
  background-color: #fff;

  //width: 100vw;
  display: grid;
  grid-template-columns: 1fr 60px;
  //padding: 0 10px;
  margin: 0 10px;
  overflow: hidden;
}

</style>
