<template>
  <b-modal v-model="productDetailShowModal" no-close-on-backdrop hide-footer centered size="lg" @hidden="closeModal()">
    <b-container class="p-0 nh-75" v-bar="vueSidebarConfig">
      <product-detail
        :simple="simple"
        :short-btn="shortBtn"
        :pid="pid"
        :product_type="productType"
        :sale_type="salesTypes.length > 0 ? salesTypes[0] : 'registration'"
        :sales-types="salesTypes"
        :wp-cv="wpCv"
      />
    </b-container>
  </b-modal>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import ProductDetail from '@/app/eshop/product-detail/components/ProductDetail'
export default {
  name: 'ProductDetailModal',
  props: {
    pid: { type: String, default: '' },
    productType: { type: String, default: '' },
    simple: {
      type: Boolean,
      default: false,
    },
    shortBtn: {
      type: Boolean,
      default: false,
    },
    wpCv: {
      type: Number,
      default: 0,
    },
    salesTypes: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      vueSidebarConfig: {
        preventParentScroll: true,
        resizeRefresh: true,
      },
    }
  },
  components: {
    ProductDetail,
  },
  mounted() {},
  methods: {
    ...mapActions('eshop', ['setShowProductDetailModal']),
    closeModal() {
      this.setShowProductDetailModal(false)
      document.body.classList.remove('no-overflow')
      document.body.classList.add('overflow-auto')
    },
  },
  computed: {
    ...mapGetters('eshop', ['getShowProductDetailModal']),
    productDetailShowModal: {
      get: function() {
        return this.getShowProductDetailModal
      },
      set: function(value) {},
    },
  },
}
</script>
