<template>
  <div>
    <div class="row">
      <div class="col-md-11">
        <div class="input-group">
          <label v-if="!selectedItem" class="uniSelectLabel" for="weekInfoRegionSelect"
            >REGION</label
          >

          <select class="form-control uniSelect" @change="onChange()" v-model="selectedItem">
            <option v-for="(item, i) in items" :key="i" :value="item">{{
              item.name + " " + item.surname
            }}</option>
          </select>
        </div>
      </div>
      <div class="text-center col-1">
        <button v-on:click="onNew()" align="right" class="btn-solid-blue" style="margin-top:-20px">
          NEW
        </button>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";

export default {
  name: "SelectIndividual",
  data() {
    return { selectedItem: {} };
  },
  props: {
    currentUser: undefined
  },
  mounted() {
    this.getAllIndividuals();
    this.selectedItem = this.indiv;
    this.$emit("onSelectedItemItemChange", this.selectedItem);
  },
  computed: {
    ...mapState("individual", ["items", "indiv"])
  },
  methods: {
    ...mapActions("individual", ["getAllIndividuals"]),
    onChange() {
      this.$emit("onSelectedItemItemChange", this.selectedItem);
    },
    onNew() {
      this.selectedItem = {};
      this.$emit("onSelectedItemItemChange", this.selectedItem);
    }
  }
};
</script>
<style lang="scss" scoped>
.uniSelect {
  border-color: rgb(27, 117, 187);
  border-width: 2px;
}

.uniSelectLabel {
  position: absolute;
  z-index: 998;
  margin-left: 15px;
  margin-top: 7px;
  font-family: "muli";
  font-size: 15px;
  color: rgb(118, 118, 118);
}
</style>
