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

<script setup lang="ts">
import { vFocus } from '@/utils/directives/useVFocus';

// 搜索的关键词
const value = defineModel<string>('value', { required: true });
// focus 是否默认调出键盘
const focus = defineModel<boolean>('focus', { default: false });
/**
 * @description 搜索方法
 */
const searchMethod = defineModel<any>('search', {
  type: Function
});

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

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

function handleSearchAction() {
  emit('search');
  searchMethod.value && searchMethod.value();
}

function handleCancelClick() {
  emit('cancel');
}
</script>

<style scoped lang="scss">
@use '@/assets/css/theme';

.search-container {
  border-radius: 18px;
  //border: solid 1.5px var(--primary-color);
  outline: solid 1.5px var(--primary-color);
  background-color: #fff;
  display: grid;
  grid-template-columns: 1fr 60px;
  padding: 0 10px;
  overflow: hidden;
  position: relative;

  :deep(.van-search) {
    padding: 0;
    //border-radius: 10;
    background-color: #fff;
  }

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

  .search {
    margin: 0 10px;
    cursor: pointer;
    display: flex;
    justify-self: center;
    align-items: center;
    font-weight: 500;
    font-size: 15px;
    color: var(--primary-color);

    &::after {
      content: '|';
      position: absolute;
      right: 19%;
      top: 5px;
      //transform: translateY(-50%);
      font-weight: bold;
      color: #e7dedf; // 竖线颜色与搜索文字一致
      pointer-events: none; // 确保不影响点击事件
    }
  }
}
</style>
