<template>
  <div class="dashboard-import-modal px-xxl py-xl">
    <BaseText class="mb-l">{{ $_tr('title') }}</BaseText>

    <global-form
      form-id="sop-import-form"
      endpoint="bclh/sop/import"
      :success-log="$_tr('logs.success')"
      @onRequestSuccess="onSuccess"
    >
      <template #fields>
        <input-attachment
          model-name="file"
          form-id="sop-import-form"
          :accept="acceptedFiles"
        />
      </template>
    </global-form>
  </div>
</template>

<script>
import refreshListing from '@inside-listings/mixins/refresh-listing-mixin'
import GlobalFormMixin from '@inside-forms/mixins/global-form-mixin'

import { BaseText } from 'inside-collection/atoms'

export default {
  name: 'dashboard-import-modal',
  $_i18nRootPath: 'customs.DASHBOARD_UPLOAD_MODAL',
  components: {
    BaseText
  },
  mixins: [refreshListing, GlobalFormMixin],
  data() {
    return {
      currentFile: null,
      acceptedFiles:
        'xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
    }
  },
  methods: {
    onSuccess() {
      setTimeout(() => {
        this.$_refresh(this.heritedData.listingId)

        this.closeModal(this.heritedOptions.modalName)
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
.dashboard-import-modal {
  > .ds-base-text-container {
    font-size: var(--font-size-h5);
  }

  .input__attachment-container {
    margin: var(--spacing-m) auto 0;
    text-align: center;

    .btn {
      width: 370px;
      max-width: 90%;
      text-align: center;
    }
  }
}
</style>
