<template>
  <div>
    <div style="margin: 40px">
      <dropdown-search
        :searchVisible="true"
        :elements="specificDays"
        label="label"
        :disabled="false"
        v-model="seleccion_number"
        @input="callBack"
      />
    </div>
    <div style="margin: 40px">
      <dropdown-search
        :searchVisible="true"
        :elements="specificDays2"
        label="text"
        filterby="text"
        value_select="val"
        :disabled="false"
        v-model="seleccion_number_obj"
        @input="callBack"
      />
    </div>
    <div style="margin: 40px">
      <dropdown-multi-select
        :options="specificDays"
        filterBy="label"
        :disabled="true"
      />
    </div>
    <div style="margin: 40px">
      <dropdown-search
        :searchVisible="true"
        :elements="longOptions"
        label="label"
        :disabled="false"
        v-model="selectValue"
      />
    </div>
    <div style="margin: 40px">
      busqueda por axios
      <dropdown-search
        :searchVisible="true"
        label="text"
        :elements="opcionesServer"
        :disabled="false"
        :loadDataServer="true"
        @inputServer="buscarElementos"
        v-model="selectValueServer"
      />
      {{ selectValueServer }}
    </div>
  </div>
</template>

<script>
import DropdownSearch from "../components/Dropdowns/DropdownSearch";
import DropdownMultiSelect from "@/components/Dropdowns/DropdownMultiSelect";
export default {
  name: "DropdownSearchView",
  data() {
    return {
      specificDays: [
        { value: 1, label: "Cabo Negro" },
        { value: 2, label: "Cabo Negro 2" }
      ],
      specificDays2: [
        { val: 1, text: "Cabo Negro" },
        { val: 2, text: "Cabo Negro 2" }
      ],
      longOptions: [
        { value: "cabo-negro", label: "Cabo Negro" },
        { value: "cabo-negro-3", label: "Cabo Negro" },
        { value: "cabo-negro-4", label: "Cabo Negro" },
        { value: "cabo-negro-5", label: "Cabo Negro" },
        { value: "cabo-negro-6", label: "Cabo Negro" },
        { value: "cabo-negro-7", label: "Cabo Negro" },
        { value: "cabo-negro-8", label: "Cabo Negro" },
        { value: "cabo-negro-9", label: "Cabo Negro" },
        { value: "cabo-negro-2", label: "Cabo Negro 2" }
      ],
      seleccion_number: 1,
      seleccion_number_obj: { val: 2, text: "Cabo Negro" },
      seleccion: { value: "cabo-negro-2", label: "Cabo Negro 2" },
      selectValue: { value: "cabo-negro-2", label: "Cabo Negro 2" },
      selectValueServer: null,
      disabled: true,
      opcionesServer: []
    };
  },
  methods: {
    callBack(val) {
      console.log("call back item", val);
    },
    buscarElementos(val) {
      console.log("texto", val);
      let array = [
        { val: 1, text: "Cabo Negro" },
        { val: 2, text: "Cabo Negro 2" }
      ];
      setTimeout((this.opcionesServer = array), 5000);
    }
  },
  components: {
    DropdownSearch,
    DropdownMultiSelect
  }
};
</script>

<style scoped></style>
