<template>
  <v-card class="card">
    <v-card-title class="cardTitle">
        <p>{{ $store.state.animal.label }}</p>
    </v-card-title>
    <v-chip v-for="g in selectedGroups" class="chip" :color="g.color"
      ><v-icon :icon="g.icon"></v-icon>{{ g.title }}</v-chip
    >

    <v-card-text>
      <p class="info">
      Raza: {{ getLabel("breed", $store.state.animal.breedId) }}<br>
      Color: {{ getLabel("color", $store.state.animal.colorId) }}<br>
    </p>
      <v-text-field
        class="infoBox"
        v-model="$store.state.animal.warning"
        density="compact"
        hide-details
        :key="$store.state.key"
        :class="{ 'alert' : notEmpty( $store.state.animal.warning ) } "
      ></v-text-field>
      <v-text-field
        v-model="$store.state.animal.remark"
        class="infoBox"

        density="compact"
        hide-details
        :key="$store.state.key"
        :class="{ 'alert' : notEmpty( $store.state.animal.remark ) } "
      ></v-text-field>
    </v-card-text>
  </v-card>
</template>

<script>
import {
  formatSelect,
  formatSelectAddress,
  saveAnimal,
  t,
  getGroups,
  getLabel,
} from "../../services/service";
import { useStore } from "vuex";
const store = useStore();

export default {
  name: "animalDetailCoral",
  computed: {
    breed() {
      return formatSelect(this.$store.state.breed);
    },
    gender() {
      return formatSelect(this.$store.state.gender);
    },
    color() {
      return formatSelect(this.$store.state.color);
    },
    hair() {
      return formatSelect(this.$store.state.hair);
    },
    address() {
      return formatSelectAddress(this.$store.state.address);
    },
    group() {
      return formatSelect(this.$store.state.group);
    },
    selectedGroups: {
      get() {
        return getGroups(this.$store.state.animal.selectedGroups);
      },
      set(value) {
        this.selectedGroupsLocal = value;
        var a = [];
        value.forEach((element) => {
          a.push(element.value);
        });
        this.$store.state.animal.selectedGroups = a.toString();
      },
    },
  },
  methods: {
    notEmpty(s) {
      console.log(s)
      var r = false;
      if (s != "" ){r = true}
      console.log(r)
      return r;
    }
  },
  data() {
    return {
      tag: [(v) => v.length >= 3 || "Min Length"],
    };
  },
  setup() {
    return {
      store,
      t,
      getLabel,
    };
  },
};
</script>

<style scoped>
.cardTitle {
  text-align: center;
  line-height: 100px;
  height: 100px;
  font-size: 80px;
  font-weight: bold;
  background-color: lightgray;
  color: black;
  padding-top: 30px;
}
.info{
  font-size: 55px;
  line-height: 1.1em;
  padding-bottom: 15px;
}

.v-text-field >>> input {
    font-size: 55px;
    font-weight: 100;

}





.infoBox{
  font-size: 55px;
  line-height: 1em;
  height: 2em;
  padding-bottom: 15px;
}

.chip{
  font-size: 55px;
  height: 1.5em;
}
.card {
  height:50vh ;
}

.alert{
  background-color: red;
}

</style>
