<script setup lang="ts">
import { computed, ref } from 'vue';
import { $t } from '@/locales';

defineOptions({ name: 'DictTypeSearch' });

interface Emits {
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const model = defineModel<Api.Dict.DictTypeSearchParams>('model', { required: true });

type StatusFilter = 'all' | Api.Dict.DictStatus;

const filterVisible = ref(false);

const statusFilter = computed<StatusFilter>({
  get() {
    return model.value.status ?? 'all';
  },
  set(value) {
    model.value.status = value === 'all' ? undefined : value;
  }
});

const statusOptions = computed(() => [
  { label: '全部', value: 'all' as const },
  { label: $t('page.system.common.status.enable'), value: 0 as const },
  { label: $t('page.system.common.status.disable'), value: 1 as const }
]);

function handleSearch() {
  emit('search');
}

function handleKeywordInput(value: string) {
  const keyword = value.trim() || undefined;

  model.value.name = keyword;
  model.value.type = keyword;
}

function handleClear() {
  model.value.name = undefined;
  model.value.type = undefined;
  handleSearch();
}

function handleStatusChange(value: StatusFilter) {
  statusFilter.value = value;
  filterVisible.value = false;
  handleSearch();
}
</script>

<template>
  <ElCard class="card-wrapper" body-class="px-12px py-10px">
    <ElForm :model="model" @submit.prevent>
      <div class="relative">
        <ElInput
          :model-value="model.name ?? model.type ?? ''"
          class="dict-type-search-input"
          clearable
          :placeholder="$t('page.system.dict.typeSearchPlaceholder')"
          @update:model-value="handleKeywordInput"
          @clear="handleClear"
          @keyup.enter="handleSearch"
        />

        <div class="absolute right-8px top-1/2 z-10 flex items-center gap-2px -translate-y-1/2">
          <ElPopover v-model:visible="filterVisible" placement="bottom-end" trigger="click" :width="132">
            <template #reference>
              <ElButton
                link
                class="relative h-24px min-w-24px w-24px"
                :type="statusFilter === 'all' ? 'default' : 'primary'"
              >
                <icon-mdi-filter-variant class="text-15px" />
                <span
                  v-if="statusFilter !== 'all'"
                  class="absolute right-2px top-2px h-6px w-6px rounded-full bg-primary"
                ></span>
              </ElButton>
            </template>

            <div class="flex flex-col gap-6px py-4px">
              <button
                v-for="item in statusOptions"
                :key="String(item.value)"
                type="button"
                class="flex items-center justify-between rounded-8px px-10px py-7px text-left text-13px transition-colors duration-200"
                :class="
                  statusFilter === item.value ? 'bg-primary/10 text-primary' : 'text-[#606266] hover:bg-[#f5f7fa]'
                "
                @click="handleStatusChange(item.value)"
              >
                <span>{{ item.label }}</span>
                <icon-mdi-check v-if="statusFilter === item.value" class="text-14px" />
              </button>
            </div>
          </ElPopover>

          <ElTooltip :content="$t('common.search')">
            <ElButton link class="h-24px min-w-24px w-24px" type="primary" @click="handleSearch">
              <icon-ic-round-search class="text-15px" />
            </ElButton>
          </ElTooltip>
        </div>
      </div>
    </ElForm>
  </ElCard>
</template>

<style scoped lang="scss">
.dict-type-search-input {
  :deep(.el-input__wrapper) {
    padding-right: 76px;
  }

  :deep(.el-input__clear) {
    margin-right: 8px;
  }
}
</style>
