<template>
<span>
  <div class="sh-modal header-global-h zindex-10 display-f width-0100 position-a align-items-c top-60 padding-l-16 padding-r-16 bg-color-w-0100">
    <div class="display-f align-items-c padding-t-30 margin-r-30">
      <img class="hidden-xs-down" src="../../img/logo-drive.svg" alt="Drive logo">
    </div>
    <div class="display-f align-items-c ellipsis">
      <div class="border-radius-25 bg-color-p-020 color-p-0100 text-trans-u font-size-xs padding-t-6 padding-b-6 padding-r-16 padding-l-16">Imasa</div>
      <span class="margin-l-10 icon-folder"></span>
      <span class="margin-l-10 font-weight-sb ellipsis">098R17_Galgas rodamiento rotopala</span>
    </div>

    <div class="margin-l-auto display-f align-items-c">
      <button class="js-new-project margin-l-30 cinput hover-link frwbtn" title="Nuevo proyecto"  v-tippy>
        <span class="icon-file-plus font-size-l"></span>
      </button>

      <button class="js-export margin-l-30 cinput hover-link frwbtn" title="Exportar datos"  v-tippy>
        <span class="icon-arrow-out font-size-l"></span>
      </button>

      <button class="js-pdf margin-l-30 cinput hover-link frwbtn" title="Generar PDF"  v-tippy>
        <span class="icon-file-pdf font-size-l"></span>
      </button>

      <button class="margin-l-30 cinput hover-link position-r frwbtn" title="Añadir horas" @click="show = !show" v-tippy>
        <span class="icon-plus font-size-xs position-a bottom-10"></span>
        <span class="icon-clock font-size-l padding-l-10"></span>
      </button>
    </div>
    <!-- <modal-horas ref="toggleHours"></modal-horas> -->
  </div>
  <div class="padding-header-global-h display-f height-0100">
    <navegador-detalle :id="id"> </navegador-detalle>
    <tabla-horas></tabla-horas>
    <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave">
      <modal-horas v-if="show" ref="toggleHours" class="padding-t-60" ></modal-horas>
    </transition>
  </div>
</span>
</template>

<script>
import NavegadorDetalle from './NavegadorDetalle.vue'
import NavProyecto from './NavProyecto.vue'
import TablaHoras from './TablaHoras.vue'
import ModalHoras from './ModalHoras.vue'
import Velocity from 'velocity-animate'
export default {
  name: 'horas',
  props: ['id'],
  components: {
    'navegador-detalle': NavegadorDetalle,
    'nav-proyecto': NavProyecto,
    'tabla-horas': TablaHoras,
    'modal-horas': ModalHoras
  },
  data () {
    return {show: false}
  },
  methods: {
    beforeEnter: function (el) {
      Velocity(el.style.width = 0)
    },
    enter: function (el, done) {
      Velocity(el, { width: 450 }, { duration: 300 }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, {width: 0}, { complete: done })
    }
  }
}
</script>

<style scoped lang="scss">
</style>