<template>
  <v-flex v-if="model" md6>

    <v-flex md12 xs12 px-0 my-2>
      <b class="subheading grey--text">{{ title }}</b>
    </v-flex>

    <v-layout
      v-for="(field, index) in Object.keys(fields)"
      :key="index"
      row
      wrap>
      <v-flex md4 xs6>
        <b>{{ field }}</b>
      </v-flex>
      <v-flex md8 xs6>

        <span
          v-if="fields[field] === 'system_id'"
          class="active-link"
          @click="onClickBioModel()">
          {{ $get(model, fields[field]) }}
        </span>

        <span v-else>
          {{ $get(model, fields[field]) }}
        </span>

      </v-flex>
    </v-layout>

  </v-flex>
</template>

<script>
import { SHOW_PANEL } from '@/store/actions/panels'

export default {
  name: 'IseDetails',
  props: {
    title: {
      type: String,
      default: ''
    },
    model: {
      type: Object,
      default: () => {}
    },
    fields: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    onClickBioModel () {
      const bioModelId = this.$get(this.model, 'system_id')
      this.$store.dispatch(SHOW_PANEL, {
        bioModel: bioModelId
      })
    }
  }
}
</script>
