<template>
  <tr class="billi-primary-50" v-if="edit">
    <td >
      {{item.key}}
    </td>

    <td >
      <input type="text" v-model="newItem.name" name="key" >
    </td>

    <td >
      <input type="text" v-model="newItem.description" name="key" >
    </td>

    <td class="billi-primary"
      @click="toggleEdit"
    ><i class="fa-solid fa-floppy-disk"></i></td>
  </tr>

  <tr v-else>
    <td >{{item.key}}</td>
    <td >{{item.name}}</td>
    <td >{{item.description}}</td>
    <td class="bg-secondary text-white"
        @click="toggleEdit"

    ><i class="fa-solid fa-pen"></i></td>
  </tr>


</template>

<script>
import NameKey from "@/store/classes/NameKey";

export default {
  name: "NameKeyListItem",
  data() {
    return {
      edit: false,
      newItem: {},
    }
  },
  props: {
    item: {
      type: NameKey,
      required: true
    },
    storeType: {
      type: String,
      required: true
    }
  },
  methods: {
    toggleEdit() {
      this.edit = !this.edit;
      if(this.edit) {
        this.newItem = {...this.item};
      } else {
        this.$store.dispatch("storeNameKeyObject", {
          storeType: this.storeType,
          item: this.newItem,
          itemOld: this.item
        })
      }
    }
  }
}
</script>

<style scoped>

</style>