<template lang="pug">
  .flex.justify-between.w-full.h-fit
    .flex.gap-2.w-fit.h-fit
      .input
        base-input.search(
          v-model="searchClient",
          placeholder="Введите фамилию",
          @keyup.enter="searchLastName",
          size="M",
          :width="280",
          :icon-left="!searchClient"
        )
          template(v-slot:iconLeft, v-if="!searchClient")
            q-icon(name="app:search", size="18px")
      base-button(
        v-if="createdClientName === ''",
        @click="searchLastName",
        label="Поиск",
        width="96px"
      )
      base-button(
        v-if="searchClient.length > 0",
        type="secondary",
        @click="resetLastName",
        label="Сбросить",
        width="124px"
      )
    //- clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
    .flex.w-fit.h-10.gap-x-2
      base-button(
        type="secondary",
        width="64px"
      )
        q-icon(name="app:export", size="16px")
      base-button(
        @click="openForm",
        width="144px"
      )
        q-icon(name="app:plus", size="12px", left)
        span Создать
</template>

<script>
import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/base/BaseInput.vue";

export default {
  name: "ClientsTableHat",
  components: {
    BaseInput,
    ClientsTableHeaderActions,
    BaseButton,
  },
  props: {
    openForm: Function,
    isOpenActions: Number,
    clearingTextSearch: Boolean,
    changeClearingTextSearch: Function,
    createdClientName: String,
  },
  data() {
    return {
      searchClient: "",
    };
  },
  methods: {
    searchLastName() {
      if (this.searchClient.length >= 3 && !this.createdClientName)
        this.$emit("search", this.searchClient);
    },
    resetLastName() {
      this.searchClient = "";
    },
  },
  watch: {
    createdClientName() {
      if (this.createdClientName) this.searchClient = this.createdClientName;
    },
    searchClient() {
      if (!this.searchClient && !this.clearingTextSearch) {
        this.$emit("search");
      }
      if (this.clearingTextSearch) this.changeClearingTextSearch();
    },
    clearingTextSearch() {
      if (this.clearingTextSearch) {
        this.searchClient = "";
      }
    },
  },
};
</script>

<style lang="sass" scoped>
.input
  min-width: 280px
.on-left
  margin-right: 10px
.search :deep(.q-field__prepend)
  padding-right: 6px !important
</style>
