<!--suppress JSUnusedGlobalSymbols -->
<template>
  <div style="margin: 40px;">
    <div>
      <dropdown-multi-select
        v-model="returnItem"
        :options="specificDays"
        filterBy="label"
        :allSelect="false"
        @input="callBack"
        @hide="callBackClose"
      />

      <button-simple sm textButton="Reset" @click="reset"></button-simple>
      <button-simple
        sm
        textButton="Modificar v-model"
        @click="addValue"
      ></button-simple>
    </div>
    <div style="width: 150px; padding-top: 10px">
      <dropdown-multi-select
        :options="specificDays"
        filterBy="label"
        v-model="returnItem2"
        :allSelect="false"
      />
    </div>
    <div style="padding-top: 10px">
      <dropdown-multi-select
        v-model="seleccion"
        :options="variasOpciones"
        filter-by="label"
        :all-select="false"
        :trim="3"
      />
      <span>v-model: {{ seleccion }}</span>
    </div>

    <div style="padding-top: 10px">
      <dropdown-multi-select
        v-model="seleccion2"
        :options="variasOpciones"
        filter-by="label"
        :all-select="false"
        :trim="3"
        delimiter=" - "
      />
      <span>v-model: {{ seleccion2 }}</span>
    </div>
  </div>
</template>

<script>
/* eslint-disable vue/no-unused-components */

import IconBase from "../components/Icons/IconBase";
import PanelDefault from "../components/Panels/PanelDefault";
import DropdownSearch from "../components/Dropdowns/DropdownSearch";
import DropdownMultiSelect from "../components/Dropdowns/DropdownMultiSelect";
import CalendarRange from "../components/CalendarRange/Calendar";
import ButtonSimple from "../components/Buttons/ButtonSimple";
import ButtonIcon from "../components/Buttons/ButtonIcon";
import ButtonDividerIcon from "../components/Buttons/ButtonDividerIcon";
import RadioInline from "../components/RadioButtons/RadioInline";
import ModalSaglan from "../components/Modals/ModalSaglan";

export default {
  data() {
    return {
      checksvalue: [],
      selecis: null,
      setInicial: null,
      setEnd: null,
      dsfsdfds: [],
      optionsDropdown: [
        {
          hour: "01:00"
        },
        {
          hour: "02:00"
        },
        {
          hour: "03:00"
        },
        {
          hour: "04:00"
        },
        {
          hour: "05:00"
        },
        {
          hour: "06:00"
        }
      ],
      checksItem: [
        {
          id: 0,
          name: "Hoy",
          value: 0
        }
      ],
      returnItem: [
        { value: "cabo-negro", label: "Cabo Negro" },
        { value: "cabo-negro-2", label: "Cabo Negro 2" },
        { value: "espinal", label: "Espinal" }
      ],
      returnItem2: [],
      seleccion: [],
      seleccion2: [],
      specificDays: [
        { value: "cabo-negro", label: "Cabo Negro" },
        { value: "cabo-negro-2", label: "Cabo Negro 2" },
        { value: "espinal", label: "Espinal" }
      ],
      variasOpciones: [
        { value: "cabo-negro", label: "Cabo Negro" },
        { value: "cabo-negro-2", label: "Cabo Negro 2" },
        { value: "parque", label: "Parque" },
        { value: "tyare", label: "Tyare" },
        { value: "andres", label: "Andres" },
        { value: "oritec", label: "Oritec" },
        { value: "empanadas", label: "Empanadas" },
        { value: "espinal", label: "Espinal" }
      ],
      checks: [
        {
          id: 0,
          name: "Hoy",
          value: 0
        },
        {
          id: 1,
          name: "Ultima Semana",
          value: 7
        }
      ],
      object: "",
      selected: [],
      items: [],
      showModal: false
    };
  },
  components: {
    "icon-base": IconBase,
    "calendar-range": CalendarRange,
    "panel-default": PanelDefault,
    "dropdown-search": DropdownSearch,
    "dropdown-multi-select": DropdownMultiSelect,
    ButtonSimple,
    ButtonIcon,
    ButtonDividerIcon,
    RadioInline,
    ModalSaglan
  },
  methods: {
    callBackClose(val) {
      console.log("selección completa", val);
    },
    addValue() {
      console.log("add");
      this.returnItem = [{ value: "espinal", label: "Espinal" }];
    },
    reset() {
      console.log("reset");
      this.returnItem = [];
    },
    callBack(val) {
      console.log("call back", val);
    },
    receivedSelected(value) {
      this.selected = value;
    },
    receivedSItems(value) {
      console.log(value);
    },
    receivedElements(value) {
      this.selected = value;
    },
    testFunction() {
      console.log(1);
    }
  }
};
</script>
