<template>
  <v-dialog :model-value="modelValue" max-width="460" @update:model-value="$emit('update:modelValue', $event)">
    <v-card>
      <v-card-title>Mass edit</v-card-title>
      <v-card-text>
        <v-select v-model="localChanges.status" :items="statusItems" clearable label="Status" />
        <v-text-field v-model="localChanges.location" label="Location" />
        <v-text-field v-model="localChanges.department" label="Department" />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="$emit('update:modelValue', false)">Cancel</v-btn>
        <v-btn color="primary" @click="$emit('apply', localChanges)">Apply</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props: {
    changes: { type: Object, required: true },
    modelValue: { type: Boolean, default: false },
    statusItems: { type: Array, required: true }
  },
  emits: ['apply', 'update:modelValue'],
  data() {
    return {
      localChanges: { ...this.changes }
    };
  },
  watch: {
    changes: {
      handler(value) {
        this.localChanges = { ...value };
      },
      deep: true
    }
  }
};
</script>
