<template>
  <modal-template
    id="bundle-analysis"
    is-footer-hide
    is-header-show
    body-class="p-0"
    header-class="border-0 pb-0"
    :no-close-on-backdrop="false"
  >
    <template v-slot:body>
      <b-col class="mb-4 text-capitalize text-white">
        <h3 class="text-black font-weight-bold">{{ $t('MyBundle.BundleAnalytic.Title') }}</h3>

        <b-row class="my-3 bg-primary py-3">
          <b-col>
            <icon name="regular/eye" class="mr-2 icon-size-3" />
            <span>{{ $t('MyBundle.BundleAnalytic.TotalViews') }}</span>
            <span class="pl-2 font-weight-bold">{{ bundleDetails.bundle_total_views || 0 }}</span>
          </b-col>
        </b-row>

        <b-row>
          <b-col cols="12" lg="6" class="mb-3 pr-lg-2">
            <b-list-group>
              <b-list-group-item class="bg-primary">
                <b-row>
                  <b-col cols="auto" class="pr-0">
                    <b-img :src="totalOrderIcon" />
                  </b-col>
                  <b-col>
                    <div>{{ $t('MyBundle.BundleAnalytic.TotalOrders') }}</div>
                    <div class="font-size-4">{{ bundleDetails.bundle_total_orders || 0 }}</div>
                  </b-col>
                </b-row>
              </b-list-group-item>
            </b-list-group>
          </b-col>

          <b-col cols="12" lg="6" class="mb-3 pl-lg-2">
            <b-list-group>
              <b-list-group-item style="background-color: #38bf0f">
                <b-row>
                  <b-col cols="auto" class="pr-0">
                    <b-img :src="conversionRateIcon" />
                  </b-col>
                  <b-col>
                    <div>{{ $t('MyBundle.BundleAnalytic.ConversionRate') }}</div>
                    <div class="font-size-4">{{ bundleDetails.bundle_conversion_rate || '0%' }}</div>
                  </b-col>
                </b-row>
              </b-list-group-item>
            </b-list-group>
          </b-col>

          <b-col cols="12" class="mb-3">
            <b-list-group>
              <b-list-group-item style="background-color: #f462d2">
                <b-row>
                  <b-col cols="auto" class="pr-0">
                    <b-img :src="referrerIcon" />
                  </b-col>
                  <b-col>
                    <div>{{ $t('MyBundle.BundleAnalytic.Referrer') }}</div>
                    <div class="font-size-4">{{ bundleDetails.bundle_total_referrals || 0 }}</div>
                  </b-col>
                </b-row>
              </b-list-group-item>

              <b-list-group-item v-for="(link, idx) in bundleDetails.bundle_referrals" :key="idx">
                <b-row>
                  <b-col class="text-primary text-lowercase">{{ link.name }}</b-col>
                  <b-col cols="auto" class="ml-auto font-weight-bold text-black">{{ link.count || 0 }}</b-col>
                </b-row>
              </b-list-group-item>
            </b-list-group>
          </b-col>
        </b-row>
      </b-col>
    </template>
  </modal-template>
</template>

<script>
import ReferrerIcon from '@/assets/img/bundle-referrers.svg'
import TotalOrderIcon from '@/assets/img/bundle-totalOrders.svg'
import ModalTemplate from '@/elements/common/components/modalTemplate'
import ConversionRateIcon from '@/assets/img/bundle-conversionRate.svg'

export default {
  name: 'BundleAnalysisModal',
  components: { ModalTemplate },
  data() {
    return {
      bundleDetails: {},
      referrerIcon: ReferrerIcon,
      totalOrderIcon: TotalOrderIcon,
      conversionRateIcon: ConversionRateIcon,
    }
  },
  methods: {
    show(bundleDetails) {
      this.bundleDetails = {}
      if (bundleDetails) {
        this.bundleDetails = { ...bundleDetails }
        this.$bvModal.show('bundle-analysis')
      }
    },
  },
}
</script>
