<template lang="pug">
  .flex.justify-between.w-full.h-fit
    .flex.gap-2.w-fit.h-fit
      .input
        base-input(
          :with-icon="true",
          icon-position="left",
          v-model="searchClient",
          placeholder="Введите фамилию",
          @keyup.enter="searchLastName",
          outlined
        )
          .flex.items-center.cursor-pointer
            .icon-search
      q-btn(
        v-if="createdClientName === ''",
        @click="searchLastName",
        color="primary",
        label="Поиск",
        padding="8px 24px",
        no-caps
      )
      q-btn(
        v-if="searchClient.length > 0",
        outline,
        @click="resetLastName",
        color="primary",
        label="Сбросить",
        padding="8px 24px",
        no-caps
      )
    //- clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
    .flex.w-fit.h-10.gap-x-2
      q-btn(
        outline,
        icon="icon-download",
        color="primary",
        size="12px",
        padding="8px 24px",
      )
      q-btn(
        @click="openForm",
        color="primary",
        icon="add",
        label="Создать",
        padding="6px 24px",
        no-caps
      )
</template>

<script>
import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton";
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
</style>
