<template>
  <div class="vm-crud-search-key">
    <Input
      class="vm-crud-search-key__input"
      :model-value="keyword"
      :placeholder="placeholder || crudLabel('searchKey', crud.dict.label)"
      @update:model-value="onInput"
      @keydown.enter.prevent="search"
    />
    <button type="button" class="vm-crud-search-key__btn" @click="search">
      {{ crudLabel('search', crud.dict.label) }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCrud } from './useCrud'
import { crudLabel } from './style'

defineOptions({ name: 'vm-search-key' })

const props = defineProps<{
  placeholder?: string
  prop?: string
}>()

const crud = useCrud()
const keyword = ref('')
const field = props.prop || crud.dict.search.keyWord

function onInput(v: string | number | null) {
  keyword.value = v == null ? '' : String(v)
}

function search() {
  crud.setParams({ [field]: keyword.value || undefined }, true)
}
</script>

<style lang="scss" scoped>
.vm-crud-search-key {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.vm-crud-search-key__input) {
  height: var(--vm-control-height) !important;
  width: 200px;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: var(--muted) !important;
  box-shadow: none !important;

  &:focus,
  &:focus-visible {
    border-color: var(--focus-border) !important;
    box-shadow: none !important;
  }
}

.vm-crud-search-key__btn {
  height: var(--vm-control-height);
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;

  &:hover {
    background: var(--brand-deep);
  }
}
</style>
