<template>
  <ui-page-header :title="track.number">
    <template slot="afterTitle">
      <ui-btn-icon @click="copyTrackNumber" icon="las la-clipboard-check">
        <q-tooltip>
          Скопировать трек номер
        </q-tooltip>
      </ui-btn-icon>
    </template>
    <ui-btn-close @click="close" />
  </ui-page-header>
</template>

<script lang="ts">
import { Emit, Prop, Vue, Component } from 'vue-property-decorator'
import { QTooltip, copyToClipboard } from 'quasar'
import { Track } from '../dto/Track'
import UiBtnIcon from '../../../../lib-components/buttons/UiBtnIcon.vue'
import UiBtnClose from '../../../../lib-components/buttons/UiBtnClose.vue'
import UiPageHeader from '../../../../lib-components/UiPageHeader.vue'

@Component({
  components: { UiPageHeader, UiBtnClose, UiBtnIcon, QTooltip },
})
export default class TrackHeader extends Vue {
  @Prop(Object) track!: Track

  copyTrackNumber() {
    copyToClipboard(this.track.number)
  }

  @Emit()
  close() {
    return true
  }
}
</script>
