<template>
  <div>
    <h3 class="title pa-2">Consultar {{ name }}</h3>
    <span class="sub-title pa-2">Administração de cadastro</span>
    <div
      class="d-flex align-center pa-8"
      style="background-color: #c6d7f7; height: 200px;"
    >
      <v-row>
        <v-responsive max-width="344">
          <v-text-field
            variant="underlined"
            ref="textField"
            class="py-0"
            :showDiv="showDiv"
            :label="`${label}`"
            v-model="search"
          >
          </v-text-field>
        </v-responsive>
        <slot></slot>
        <slot name="append"></slot>
        <slot name="append-outer"></slot>
        <v-btn
          style="color: #fff"
          class="ma-2 font-weight-bold"
          color="#769fdb"
          @click="$emit('pesquisar', search)"
        >
          Pesquisar
        </v-btn>
        <v-btn
          style="color: #fff"
          class="ma-2 font-weight-bold"
          @click="$emit('showDiv', true)"
          color="#769fdb"
        >
          Novo
        </v-btn>
        <v-btn
          style="color: #fff"
          class="ma-2 font-weight-bold"
          @click="$emit('showDiv', false)"
          color="#769fdb"
        >
          Voltar
        </v-btn>
        <v-checkbox
          label="Pesquisar desabilitados"
          class="font-weight-bold"
          v-model="selected"
          @change="$emit('disableSearch', selected)"
        ></v-checkbox>
      </v-row>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from "vue";
export default defineComponent({
  name: "zc-search",
  props: {
    name: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    modelValue: {
      type: String,
      required: true
    },
    showDiv: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const showDiv = ref(false);
    const selected = ref(false);
    const search = ref(props.modelValue);
    watch(
      () => props.modelValue,
      (newValue) => {
        search.value = newValue;
      }
    );
    watch(
      () => search.value,
      (newValue) => {
        emit("update:modelValue", newValue);
      }
    );
    return {
      showDiv,
      selected,
      search
    };
  }
});
</script>

<style>
.title {
  color: #e17958;
  font-size: 16px;
  font-weight: 700;
}

.sub-title {
  color: #e17958;
  font-size: 12px;
  font-weight: 700;
}
</style>
