<template>
  <div>
    <b-row>
      <b-col md='9'>
        <div class="d-flex justify-content-start p-2 text-end akkurat-regular">
          Digite o código, nome ou preço do produto:
        </div>
      </b-col>
      <b-col>
        <div class="d-flex justify-content-start p-2 text-end akkurat-regular">
          Ordenar por:
        </div>
      </b-col>
    </b-row>
    <b-row>
      
      <b-col md="6">
        <b-form-input
          v-model="search"
          class="radius-theme"
          placeholder="Digite aqui sua pesquisa"
          @keyup="checkText"
        ></b-form-input>
      </b-col>

      <b-col md="3">
        <general-button icon="search" title="Pesquisar" @clicked="searchBy" />
      </b-col>

      <b-col md="3">
        <b-form-select
        
          class="radius-theme"
          v-model="selectedOrderBy"
          :options="orderOptions"
          @change="orderBy"
        ></b-form-select>
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
  name: 'product-list-header',
  data: () => ({
    search: '',
    selectedOrderBy: '',
    orderOptions: [
      { text: '--', value: '' },
      { text: 'Maior Preço', value: 'price_desc' },
      { text: 'Menor Preço', value: 'price_asc' },
    ],
  }),
  methods:{
    searchBy(){
      
      this.$emit('search',this.search);
    },
    orderBy(){
      this.$emit('order-by',this.selectedOrderBy);
    },
    checkText(){
      if(this.search.length == 0){

       this.searchBy();

      }
    }
  }
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';

.radius-theme {
  border-radius: $main-border-radius;
}
</style>
