<template>
  <div class="ui-loading-panel q-pa-lg">
    <div class="ui-loading-panel__left-side q-mr-lg">
      <div class="text-h5 q-mb-md">{{ title }}</div>
      <ui-linear-progress :value="progress" />
      <div class="text-blue-grey q-mt-md">{{ description }}</div>
    </div>
    <ui-btn v-if="cancelable" @click="cancel" outline label="Отмена" />
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import UiLinearProgress from '../progress/UiLinearProgress.vue'
import UiBtn from '../buttons/UiBtn.vue'

@Component({
  components: { UiBtn, UiLinearProgress },
  inheritAttrs: false,
})
export default class UiLoadingPanel extends Vue {
  @Prop(String) title?: string
  @Prop(String) description?: string
  @Prop(Number) progress?: number
  @Prop(Boolean) cancelable?: boolean

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