<template>
  <v-row dense no-gutters>

    <v-col>
      <slot name="prepend"></slot>
    </v-col>

    <v-col cols="6">
      <v-text-field
        class="mr-5"
        dense
        label="Name"
        :value="name"
        :readonly="true"
      ></v-text-field>
    </v-col>

    <v-col>
      <v-checkbox
        class="mr-3"
        label="Read"
        v-model="operations.read"
        :readonly="readonly"
      ></v-checkbox>
    </v-col>

    <v-col>
      <v-checkbox
        class="mr-3"
        label="Write"
        v-model="operations.write"
        :readonly="readonly"
      ></v-checkbox>
    </v-col>

    <v-col>
      <v-checkbox
        class="mr-3"
        label="Edit"
        v-model="operations.edit"
        :readonly="readonly"
      ></v-checkbox>
    </v-col>

    <v-col>
      <!-- Just to fill the twelve-column grid -->
      <!--
      NOTE: this column could also be used for
      a popdown menu with additional operations
      if needed.
      -->
    </v-col>

    <v-col>
      <slot name="append"></slot>
    </v-col>

  </v-row>

</template>

<style scoped>
</style>

<script>
import { Organisations } from '@dougal/organisations';

export default {
  name: "DougalOrganisationsItem",

  props: {
    name: String,
    value: Object,
    readonly: Boolean,
  },

  data () {
    return {
      operations: {...this.value}
    }
  },

  watch: {
    value: {
      handler (newValue) {
        this.operations = {...this.value};
      },
      deep: true,
    },

    operations: {
      handler (newValue) {
        if (["read", "write", "edit"].some( k => newValue[k] != this.value[k] )) {
          // Only emit if a value has actually changed
          this.$emit("input", {...newValue});
        }
      },
      deep: true,
    },
  },

  methods: {
    reset () {
    }
  },

  mounted () {
    this.reset();
  }

}
</script>
