<template>
  <enrol-grid-8-4>
    <template slot="left-big">
      <div class="w-100" id="order-review-item-list">
        <order-item
          :show-item-image="showItemImage"
          :show-item-cv="showItemCv"
          :order-item="orderItem"
          :show-note-for-foc-pwp-items="showNoteForFocPwpItems"
          :currency-symbol="currencySymbol"
          :has-cv-transfer-option="hasCvTransfer"
          v-model="value.cvTransferList"
        />
        <slot />
      </div>
    </template>
    <template slot="right-small">
      <div class="sticky-top">
        <order-summary
          :summary-count="summaryCount"
          :summary-amount="summaryAmount"
          :show-ewallet="showEwallet"
          :ewallet-amount="ewalletAmount"
          :grand-total="getCartTotalPriceFormatted"
          :show-continue-button="showContinueButton"
          :continue-action="continueAction"
          :continue-text="continueText"
          :continue-disabled="continueDisabled"
          :show-promo-code="showPromoCode"
          :promo-code="promoCode"
          :apply-promo-code="applyPromoCode"
          :currency-symbol="currencySymbol"
        />
      </div>
    </template>
  </enrol-grid-8-4>
</template>
<script>
// TODO: remove this element and use global template
import enrolGrid84 from '@/app/enrolment/_global/components/templates/layouts/enrol-grid-8-4'
import orderItem from '@/app/_global/components/blocks/OrderItem'
import orderSummary from '@/app/_global/components/blocks/OrderSummary'
import OrderPageTemplatePropsMixin from '@/app/_global/mixins/orderPageTemplatePropsMixin'
import { mapGetters } from 'vuex'

export default {
  name: 'OrderPageElements',
  components: {
    enrolGrid84,
    orderItem,
    orderSummary,
  },
  props: {
    hasCvTransfer: { type: Boolean, default: false },
    value: {
      type: Object,
      default: () => ({
        cvTransferList: [],
      }),
    },
  },
  data() {
    return {
      affixMinWidth: 0,
      cvTransferList: [],
    }
  },
  mixins: [OrderPageTemplatePropsMixin],
  computed: {
    ...mapGetters('eshop', ['getCartTotalPriceFormatted']),
  },
  methods: {
    getData() {
      return {
        cvTransferList: this.cvTransferList,
      }
    },
  },
  watch: {
    value: {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true,
    },
  },
}
</script>
