<template>
  <div>
    <v-card tile :loading="jobkindsLoading">
      <v-card-title>
        Dienstarten
        <v-spacer />
        <v-btn fab small color="primary" @click="add()">
          <v-icon>
            {{ plusIcon }}
          </v-icon>
        </v-btn>
      </v-card-title>
      <v-card-text>
        <v-card tile v-for="jobkind in jobkinds" :key="jobkind.id">
          <v-card-text class="black--text">
            <v-row class="ml-3 mr-3">
              {{ jobkind.name }}
              <v-spacer />
              <v-btn icon @click="editJobKind(jobkind)">
                <v-icon>
                  {{ editIcon }}
                </v-icon>
              </v-btn>
              <v-btn icon @click="deleteJobKind(jobkind)">
                <v-icon>
                  {{ deleteIcon }}
                </v-icon>
              </v-btn>
            </v-row>
          </v-card-text>
        </v-card>
      </v-card-text>
    </v-card>
    <v-dialog v-model="dialog">
      <v-card>
        <v-card-title>
          {{ title }}
        </v-card-title>
        <v-card-text>
          <v-text-field outlined label="Name" v-model="editedItem.name" />
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn text color="primary" @click="close()">Abbrechen</v-btn>
          <v-btn text color="primary" @click="save()">Speichern</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { mdiPencil, mdiDelete, mdiPlus } from '@mdi/js'
export default {
  name: 'JobKindManager',
  data() {
    return {
      editIcon: mdiPencil,
      deleteIcon: mdiDelete,
      plusIcon: mdiPlus,
      dialog: false,
      editedItem: {
        id: -1,
        name: null
      },
      defaultItem: {
        id: -1,
        name: null
      }
    }
  },
  methods: {
    ...mapActions({
      getAllJobKinds: 'jkm/getAllJobKinds',
      addingJobKind: 'jkm/addJobKind',
      updateJobKind: 'jkm/updateJobKind',
      deletingJobKind: 'jkm/deleteJobKind'
    }),
    add() {
      this.dialog = true
    },
    editJobKind(jobkind) {
      this.dialog = true
      this.editedItem = Object.assign({}, jobkind)
    },
    deleteJobKind(jobkind) {
      confirm("Willst du diese Dienstart wirklich löschen") && this.deletingJobKind(jobkind)
      this.close()
    },
    close() {
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.dialog = false
      }, 200)
    },
    save() {
      this.editedItem.id === -1 ? this.addingJobKind(this.editedItem) : this.updateJobKind(this.editedItem)
      this.close()
    }
  },
  computed: {
    ...mapGetters({
      jobkinds: 'jkm/jobkinds',
      jobkindsLoading: 'jkm/jobkindsLoading'
    }),
    title() {
      return this.editedItem.id === -1
        ? 'Neue Dienstart erstellen'
        : 'Dienstart bearbeiten'
    }
  },
  created() {
    this.getAllJobKinds()
  }
}
</script>

<style scoped></style>
