<template>
  <div>
    <q-btn
      :disable="disable"
      class="q-ml-sm"
      :class="{ hidden: !get(button.props, 'visible', true) }"
      outline
      v-bind="omit(button.props, 'disable')"
      @click="showModal = true"
    >
      <q-tooltip v-if="!!button.tooltip">
        {{ button.tooltip }}
      </q-tooltip>
    </q-btn>
    <q-dialog v-model="showModal" @before-show="preparationOpenDialog()">
      <q-card
        class="no-shadow"
        :style="{
          maxWidth: '80vw',
          width: '700px',
        }"
      >
        <q-form @submit="submit">
          <q-card-section>
            <q-select
              v-model="reason"
              :options="listTypesPause"
              label="Причина приостановки"
              filled
              option-label="reason"
              required
            />
          </q-card-section>
          <q-card-section v-if="reason">
            Срок продления: {{reason.numberTerm}} ({{ reason.inCalendarDays ? 'в календарных днях' : 'в рабочих днях' }})
          </q-card-section>

          <q-card-actions class="q-pa-md" align="left">
            <q-btn
              type="submit"
              label="Отправить"
              color="primary"
              unelevated
              :disable="!reason"
            />
          </q-card-actions>
        </q-form>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Prop } from 'vue-property-decorator';
import { get } from 'lodash';
import omit from 'lodash/omit';

export type Reason = {
  id: string, 
  reason: string,
  inCalendarDays: boolean,
  numberTerm: number
};

@Component({
  methods: {
    get,
    omit,
  }
})
export default class PauseButton extends Vue {
  @Prop() disable: boolean;
  @Prop() button: any;
  @Prop() listTypesPause: Reason[];

  showModal = false
  reason: null | Reason = null

  submit() {
    this.button.actions.click(this.reason)
  }

  preparationOpenDialog() {
    this.reason = this.listTypesPause.length === 1 ? this.listTypesPause[0] : null
  }
}
</script>