<template>
  <base-material-dialog
    :value="value"
    icon="mdi-home"
    title="Gerät bearbeiten"
    :sub-title="id ? id : 'NEU'"
    color="rgb(255, 4, 29)"
    :actions="[doc && isMaster ? 'del' : '', isMaster ? 'save' : '', 'cancel']"
    @del="del"
    @save="save"
    @close="close"
    @esc="close"
  >
    <v-row v-if="!isMaster">
      Kein Zugriff! {{ isMaster }}
    </v-row>
    <v-row v-else>
      <v-col
        cols="12"
        sm="6"
        md="9"
      >
        <v-text-field
          v-model="data.name"
          label="Gerätename"
        />
      </v-col>
      <v-col
        cols="12"
        sm="6"
        md="3"
      >
        <v-image-input
          ref="logo"
          v-model="data.logo"
          :image-quality="0.60"
          :image-height="128"
          :image-width="128"
          overlay-padding="10px"
          overlay-border-width="2px"
          overlay-border-color="#f00"
          upload-icon="fa-cloud-upload"
          flip-horizontally-icon="fa-arrows-h"
          flip-vertically-icon="fa-arrows-v"
          rotate-clockwise-icon="fa-redo"
          rotate-counter-clockwise-icon="fa-undo"
          image-min-scaling="contain"
          clearable
        />
      </v-col>
    </v-row>
  </base-material-dialog>
</template>

<script>
import { useAuth } from '@/plugins/auth'
import { useEditDialog } from '@/plugins/editdialog'

export default {
  name: 'EditApparatus',
  props: {
    value: {
      type: Boolean,
      required: true
    },
    id: {
      type: String,
      default: null
    }
  },

  setup (props, context) {
    return {
      ...useAuth(context),
      ...useEditDialog(props, context, 'Apparatus(id: $id) { _id name logo }', ['name', 'logo'])
    }
  },

  methods: {
    update () {
      return {
        mutation: `mutation($id: UUID!, $name: String, $logo: String) {
          ApparatusUpdate(id: $id, name: $name, logo: $logo) {
            _id name logo
          }
        }`
      }
    },
    create () {
      return {
        mutation: `mutation($name: String!, $logo: String) {
          ApparatusCreate(name: $name, logo: $logo) {
            _id name logo
          }
        }`
      }
    }
  }
}
</script>

<style lang="sass">
  $dialog-elevation: 0
</style>
