<template>
  <div>
    <!-- Empty object -->
    <leanisp-empty text="Selecione um item." icon="sim-off" v-if="!obj"/>

    <template v-else>
      <!-- Messages -->
      <!-- TODO: Create model of messages -->
      <!-- <b-message type="is-success" has-icon>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
      </b-message> -->

      <!-- Basic Information -->
      <div class="box is-shadowless p-3 mt-3 mb-2 ">
        <article class="media">
          <div class="media-content">
            <div class="content">
              <h1 class="is-size-5 has-text-weight-medium has-text-dark mt-1">{{obj.description}}</h1>
              <small>{{obj.code}}</small>
            </div>
          </div>
          <div class="media-right">
            <b-button icon-left="arrow-left-bold" @click="$emit('back')"/>
          </div>
        </article>
      </div>

      <!-- Tag List -->
      <b-taglist class="m-1 is-justify-content-right">
        <leanisp-tag v-for="(tag, index) in obj.tags" 
                     :tag="tag"
                     :key="index"/>

        <b-tag type="is-danger" v-if="obj.deleted">{{ $t('text.deleted') }}</b-tag>

        <b-taglist attached class="m-0 pr-3">
          <b-tag type="is-light">{{ $t('text.version') }}</b-tag>
          <b-tag type="is-dark">{{obj.version}}</b-tag>
        </b-taglist>
      </b-taglist>

      <!-- User and controllers -->
      <div class="box is-shadowless p-0 mb-3">
        <article class="media">
          <div class="media-left pl-2">
            <span class="image is-24x24 mt-2">
              <v-gravatar class="is-rounded" :email="obj.modifiedUser" :size="24" default-img="mm"/>
            </span>
          </div>
          <div class="media-content">
            <div class="content">
              <small class="is-lowercase">{{ obj.modifiedUser }}</small>
              <br/>
              <small class="">{{ obj.modifiedDate | moment("calendar")}}</small>
            </div>
            
          </div>
          <div class="media-right pt-1 pr-3">
            <b-dropdown position="is-bottom-left" append-to-body>
              <template #trigger="{ active }">
                  <b-button :icon-right="active ? 'arrow-up-drop-circle' : 'arrow-down-drop-circle'" />
              </template>

              <slot name="dropdown" v-if="!obj.deleted"/>

              <b-dropdown-item v-if="!obj.deleted" @click="deleteObject">
                <b-icon icon="delete" size="is-small"/> {{ $t('button.delete') }}
              </b-dropdown-item>
              <b-dropdown-item v-if="obj.deleted" @click="restoreObject">
                <b-icon icon="restore" size="is-small"/> {{ $t('button.restore') }}
              </b-dropdown-item>
              <b-dropdown-item @click="showDetailObect">
                <b-icon icon="cog" size="is-small"/> {{ $t('text.basic_data') }}
              </b-dropdown-item>
            </b-dropdown>
          </div>
        </article>
      </div>

      <!-- Conteúdo -->
      <div class="box is-shadowless p-1 pt-3 mb-3">
        <slot>
          <leanisp-event-list :events="obj.events" />
        </slot>
      </div>
    </template>

  </div>
</template>

<script>
import DetailObject from './DetailObject.vue'

export default {
    name: "LeanispDetail",
    props: ["obj"],
    methods: {
      deleteObject () {
        this.$buefy.dialog.confirm({
          message: this.$t('message.confirm_delete', [this.obj.description,this.obj.code]),
          cancelText: this.$t('text.no'),
          confirmText: this.$t('button.yes_delete'),
          hasIcon: true,
          type: 'is-danger',
          onConfirm: () => this.$emit("delete", this.obj.id)
        })
      },
      restoreObject () {
        this.$buefy.dialog.confirm({
          message: this.$t('message.confirm_restore', [this.obj.description,this.obj.code]),
          cancelText: this.$t('text.no'),
          confirmText: this.$t('button.yes_restore'),
          hasIcon: true,
          type: 'is-info',
          onConfirm: () => this.$emit("restore", this.obj.id)
        })
      },
      showDetailObect() {
        this.$buefy.modal.open({
          parent: this,
          component: DetailObject,
          width: 450,
          props: {obj: this.obj, modal: true}
        })
      }
    }
}
</script>