<template>
  <div class="dashboard-panel-element rounded-0 pt-0">
    <div>
      <b-row class="border-bottom mb-3 py-2 mx-0">
        <b-col class="p-0">
          <b-button
            variant="link"
            class="d-flex align-items-center text-decoration-none"
            :to="{ name: 'SvTransferListingPaginated', params: { page: 1 } }"
            data-qa="svTransfer-transferDetails-back-btn"
          >
            <icon name="back-arrow" class="mr-2" />
            <span class="font-size-5">{{ $t('Common.Back') }}</span>
          </b-button>
        </b-col>
      </b-row>
    </div>

    <div>
      <b-overlay :show="isLoading('loadingSvTransferDetails')" variant="white" opacity="0.96">
        <template v-slot:overlay>
          <b-spinner class="mx-2 text-primary" />
          <strong class="h4 text-primary">{{ $t('Common.Loading') }}</strong>
        </template>

        <b-row>
          <b-col cols="12" class="mb-4">
            <div class="bg-note px-3">
              <b-row>
                <b-col cols="12" md="9" lg="8" xl="7">
                  <b-row class="py-2">
                    <b-col lg="4">
                      {{ $t('SvTransfer.TransferTo') }}
                    </b-col>
                    <b-col class="font-weight-bolder">
                      <span>
                        [{{ $helpers.getValue(getSvTransferDetails, 'user_to.old_member_id', '') }}]
                        {{ $helpers.getValue(getSvTransferDetails, 'user_to.name', '-') }}
                      </span>
                    </b-col>
                  </b-row>

                  <b-row class="py-2">
                    <b-col lg="4">
                      {{ $t('Common.Sales.SalesDocumentNo') }}
                    </b-col>
                    <b-col class="font-weight-bolder">
                      {{ getSvTransferDetails.document_no || '-' }}
                    </b-col>
                  </b-row>

                  <b-row class="py-2">
                    <b-col lg="4">
                      {{ $t('Common.Sales.TransactionNo') }}
                    </b-col>
                    <b-col class="font-weight-bolder">
                      {{ getSvTransferDetails.transaction_number || '-' }}
                    </b-col>
                  </b-row>

                  <b-row class="py-2">
                    <b-col lg="4">
                      {{ $t('SvTransfer.CreatedAt') }}
                    </b-col>
                    <b-col class="font-weight-bolder">
                      {{ getCreatedAtDate }}
                    </b-col>
                  </b-row>

                  <b-row class="py-2">
                    <b-col lg="4">
                      {{ $t('SvTransfer.CreatedBy') }}
                    </b-col>
                    <b-col class="font-weight-bolder">
                      {{ getSvTransferDetails.created_by || '-' }}
                    </b-col>
                  </b-row>
                </b-col>

                <b-col cols="12" md="3" lg="4" xl="5">
                  <b-row class="py-2">
                    <b-col lg="7" xl="3">
                      {{ $t('Common.Terminology.TotalBV') }}
                    </b-col>
                    <b-col class="font-weight-bolder">
                      {{ getSvTransferDetails.total_bv || '0.00' }}
                    </b-col>
                  </b-row>

                  <b-row class="py-2">
                    <b-col lg="7" xl="3">
                      {{ $t('Common.Terminology.TotalSv') }}
                    </b-col>
                    <b-col class="font-weight-bolder">
                      {{ getSvTransferDetails.total_sv || '0' }}
                    </b-col>
                  </b-row>

                  <b-row class="py-2">
                    <b-col lg="7" xl="3">
                      {{ $t('Common.Terminology.TotalCbp') }}
                    </b-col>
                    <b-col class="font-weight-bolder">
                      {{ getSvTransferDetails.total_cbp_point || '0.0000' }}
                    </b-col>
                  </b-row>
                </b-col>
              </b-row>
            </div>
          </b-col>

          <b-col>
            <b-table
              hover
              outlined
              show-empty
              caption-top
              stacked="md"
              responsive=""
              :fields="getTableField"
              :items="getSvTransferredProductList"
            >
              <template v-slot:table-caption>
                {{ $t('Eshop.Listing.Title') }}
              </template>

              <template v-slot:empty>
                <div class="text-center text-primary my-2">
                  <strong class="h4">{{ $t('Common.RecordNotFound') }}</strong>
                </div>
              </template>

              <template v-slot:cell(index)="row">
                {{ row.index + 1 }}
              </template>
            </b-table>
          </b-col>
        </b-row>
      </b-overlay>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'SvTransferDetails',
  props: {
    recordId: { type: [String, Number], required: true },
  },
  data() {
    return {
      svTransferDetails: {},
    }
  },
  computed: {
    ...mapGetters(['isLoading']),
    getTableField() {
      return [
        { key: 'index', label: this.$t('Common.Table.No') },
        { key: 'sku', label: this.$t('Common.ProductCode') },
        { key: 'name', label: this.$t('Common.Product.ProductName') },
        { key: 'quantity', label: this.$t('Common.Quantity'), class: 'text-md-right' },
        { key: 'bv', label: this.$t('Common.Terminology.Bv'), class: 'text-md-right' },
        { key: 'sv', label: this.$t('Common.Terminology.Sv'), class: 'text-md-right' },
        {
          key: 'cbp_point',
          label: this.$t('Common.Terminology.Cbp'),
          class: 'text-md-right',
        },
      ]
    },
    getSvTransferDetails() {
      return this.svTransferDetails || {}
    },
    getSvTransferredProductList() {
      return this.getSvTransferDetails.items || []
    },
    getCreatedAtDate() {
      return (
        (this.svTransferDetails.created_at && moment(this.svTransferDetails.created_at).format('DD MMM YYYY')) || '-'
      )
    },
  },
  mounted() {
    this.loadSvTransferDetails(this.recordId).then(result => {
      this.svTransferDetails = result || {}
    })
  },
  methods: {
    ...mapActions(['loadSvTransferDetails']),
  },
}
</script>
