<template>
  <z-paging
    ref="pagingRef"
    v-model="moreGroupList"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    empty-view-text="暂无更多拼团活动"
    @query="loadMoreGroupList"
  >
    <view
      v-if="groupInfo"
      class="Mall4j page-group-detail"
    >
      <!-- 拼团商品 -->
      <view class="prod-box">
        <view class="bg">
          <image src="/static/images/bannerBg.png" />
        </view>
        <view class="g-prod">
          <view class="img">
            <img-show
              :src="groupInfo.mainImgUrl"
              img-mode="aspectFit"
            />
          </view>
          <view class="info">
            <view class="name">
              {{ groupInfo.spuName }}
            </view>
            <view class="sku">
              {{ groupInfo.sellingPoint || '' }}
            </view>
            <view class="price">
              <view class="symbol">
                ￥
              </view>
              <view class="big">
                {{ wxs.parsePrice(groupInfo.groupActivity.price)[0] }}
              </view>
              <view class="symbol">
                .{{ wxs.parsePrice(groupInfo.groupActivity.price)[1] }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 拼团详情 -->
      <view class="group-info">
        <!-- 组团结果 -->
        <view class="g-result">
          <image
            v-if="groupInfo.groupTeam.status === groupStatusConstant.FAIL"
            src="@/package-activities/static/images/group-fail.png"
          />
          <image
            v-if="groupInfo.groupTeam.status === groupStatusConstant.SUCCEED"
            src="@/package-activities/static/images/group-success.png"
          />
        </view>

        <view
          v-if="groupInfo.groupTeam.status===groupStatusConstant.GROUPING"
          class="time-box"
        >
          <view class="text">
            距结束还剩
          </view>
          <view
            v-if="countDown.day!=='00'"
            class="number"
          >
            {{ countDown.day }}
          </view>
          <view
            v-if="countDown.day!=='00'"
            class="colon"
          >
            :
          </view>
          <view class="number">
            {{ countDown.hou }}
          </view>
          <view class="colon">
            :
          </view>
          <view class="number">
            {{ countDown.min }}
          </view>
          <view class="colon">
            :
          </view>
          <view class="number">
            {{ countDown.sec }}
          </view>
        </view>

        <view class="g-member g-member-container">
          <view :class="['item', 'active']">
            <img-show
              :src="groupLead.pic"
              default-img-type
            />
            <view
              class="head-icon"
            >
              团长
            </view>
          </view>

          <view
            v-for="(user, userIndex) in showGroupUserList"
            :key="userIndex"
            :class="['item']"
          >
            <img-show
              :src="user.pic"
              default-img-type
            />
          </view>

          <view
            v-if="groupInfo.groupUserList.length > 5"
            :class="['item']"
          >
            <img-show
              :src="lastShowUser.pic"
              default-img-type
            />

            <view class="over-icon">
              +{{ groupInfo.groupUserList.length - 4 }}
            </view>
          </view>
        </view>

        <!-- 参团文案 -->
        <view v-if="!groupInfo.orderId && groupInfo.groupTeam.status===groupStatusConstant.GROUPING">
          <view class="g-number">
            <text class="red">
              {{ groupInfo.groupActivity.groupNumber }}
            </text>
            <text>人成团，还差</text>
            <text class="red">
              {{ groupInfo.groupActivity.groupNumber - groupInfo.groupUserList.length }}
            </text>
            <text>人即可拼团成功</text>
          </view>
          <view
            class="g-btn"
            @tap="jionGroup"
          >
            立即参团
          </view>
        </view>
        <!-- 开团文案 -->
        <view v-if="groupInfo.groupTeam.status===groupStatusConstant.GROUPING && groupInfo.orderId">
          <view class="g-number">
            <text v-if="groupLeadUserId === userId">
              开团成功，再邀请
            </text>
            <text v-else>
              参团成功，再邀请
            </text>
            <text class="red">
              {{ groupInfo.groupActivity.groupNumber - groupInfo.groupUserList.length }}
            </text>
            <text>位好友即可拼团成功</text>
          </view>
          <!-- 邀请好友参团 -->
          <!-- #ifdef H5 || APP-PLUS -->
          <view
            class="g-btn"
            @tap="h5Share"
          >
            邀请好友参团
          </view>
          <!-- #endif -->
          <!-- #ifdef MP -->
          <button
            class="g-btn"
            open-type="share"
          >
            邀请好友参团
          </button>
        <!-- #endif -->
        </view>

        <!-- 成团文案 -->
        <view v-if="groupInfo.groupTeam.status === groupStatusConstant.SUCCEED">
          <view class="g-number">
            <text>恭喜组团成功，感谢好友鼎力相助！</text>
          </view>
          <view
            class="g-btn"
            @tap="toOrderDetail"
          >
            查看订单
          </view>
        </view>

        <!-- 未成团文案 -->
        <view v-if="groupInfo.groupTeam.status === groupStatusConstant.FAIL">
          <view class="g-number">
            <text>很抱歉，您未能组团成功</text>
          </view>
          <view
            class="g-btn"
            @tap="regroup"
          >
            重新开团
          </view>
        </view>
      </view>

      <!-- 更多拼团 -->
      <view class="guess-like">
        <view class="tit">
          <view class="bg">
            <image src="/static/images/tit-bg.png" />
          </view>
          <view class="text">
            更多拼团
          </view>
          <view class="bg">
            <image src="/static/images/tit-bg.png" />
          </view>
        </view>
        <view class="line-prods">
          <view
            v-for="(groupActivityItem, index) in moreGroupList"
            :key="index"
            class="item"
          >
            <view class="group-icon">
              {{ groupActivityItem.spuActivity.groupActivity.groupNumber }}人团
            </view>
            <view class="img">
              <img-show
                :src="groupActivityItem.mainImgUrl"
                img-mode="aspectFit"
              />
            </view>
            <view class="text-box">
              <view class="name">
                {{ groupActivityItem.spuName }}
              </view>
              <view class="price-box">
                <view class="price">
                  <view class="symbol">
                    ￥
                  </view>
                  <view class="big">
                    {{ wxs.parsePrice(groupActivityItem.spuActivity.groupActivity.price)[0] }}.{{ wxs.parsePrice(groupActivityItem.spuActivity.groupActivity.price)[1] }}
                  </view>
                </view>
                <view class="old-price">
                  {{ wxs.parsePrice(groupActivityItem.priceFee)[0] }}.{{ wxs.parsePrice(groupActivityItem.priceFee)[1] }}
                </view>
              </view>
              <view class="btn-box">
                <view class="sold">
                  {{ groupActivityItem.spuActivity.groupActivity.groupOrderCount }}人已拼
                </view>
                <view
                  class="btn"
                  @tap="toProdDetailPage(groupActivityItem.spuId)"
                >
                  去拼团
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 选择sku弹窗 -->
      <view
        class="popup"
        :class="{ show: isShowSkuPopup }"
      >
        <view
          class="popup-mask"
          @tap="closePopup"
        />
        <view class="popup-con-bottom check-sku">
          <view class="goods-box">
            <view class="img">
              <img-show
                :src="defaultSku.imgUrl || groupInfo.mainImgUrl"
                img-mode="aspectFit"
              />
            </view>
            <view class="info">
              <view class="name">
                {{ groupInfo.spuName }}
              </view>
              <view class="price">
                <view class="symbol">
                  ￥
                </view>
                <view class="big">
                  {{ wxs.parsePrice(defaultSku.priceFee)[0] }}
                </view>
                <view class="symbol">
                  .{{ wxs.parsePrice(defaultSku.priceFee)[1] }}
                </view>
                <view class="stock">
                  库存：{{ defaultSku.stock }}
                </view>
              </view>
            </view>
            <view
              class="close"
              @tap="closePopup"
            >
              <image src="/static/images/close.png" />
            </view>
          </view>
          <view class="con-box">
            <!-- 说明（虚拟商品） -->
            <view
              v-if="spuMold===1 && isRefund === 0"
              class="virtual-goods-tips"
            >
              <text class="vi-t">
                使用说明：
              </text>
              <!-- writeOffNum 0无需核销 1单次核销 -1多次核销 -->
              <block>
              <!-- writeOffTime核销有效期 -1.长期有效 0.自定义 x.x天内有效 -->
              <!-- <text>购买七天内要效</text> -->
              </block>
              <!-- isRefund 0不支持退款 1支持退款 -->
              <text v-if="isRefund===0">
                不支持申请退款
              </text>
            </view>
            <!-- 说明（虚拟商品）结束 -->

            <!-- 组合商品详情 -->
            <combine-card-list
              v-if="spuMold===2 && defaultSku.skuComboList?.length > 0"
              :new-sku="defaultSku"
              :spu-id="spuId"
              :sku-id="defaultSku.skuId"
            />

            <block
              v-for="(skuLine, key) in skuGroup"
              :key="key"
            >
              <view class="sku-item">
                <view class="item-tit">
                  {{ key }}
                </view>
                <view class="item-box">
                  <view
                    v-for="skuLineItem in skuLine"
                    :key="skuLineItem"
                    :class="['item-item',selectedProp.indexOf(skuLineItem) !== -1?'active':'', isSkuLineItemNotOptional(allProperties,selectedPropObj,key,skuLineItem,propKeys)? 'cannot' : '']"
                    @tap="toChooseItem(skuLineItem, key)"
                  >
                    {{ skuLineItem }}
                  </view>
                </view>
              </view>
            </block>
            <view class="prod-number">
              <view class="item-tit">
                数量
              </view>
              <view class="number-box">
                <view
                  :class="['minus', prodNumber===1?'limit':'']"
                  @tap="changeNumber(-1)"
                />
                <input
                  v-model="prodNumber"
                  type="number"
                  class="number"
                  maxlength="4"
                  @blur="checkStock"
                >
                <view
                  :class="['plus', isMaxProdNumber?'limit':'']"
                  @tap="changeNumber(1)"
                />
              </view>
            </view>
          </view>
          <view class="btn-box">
            <view
              :class="['btn',findSku?'':'gray']"
              @tap="skuPopConfirm"
            >
              确定
            </view>
          </view>
        </view>
      </view>
      <!-- 引导分享蒙版 -->
      <guide-share
        v-if="showGuideShare"
        :is-wechat="isWechat"
        :qr-link="qrLink"
        @hide-guide-share="hideGuideShare"
      />
    <!-- 引导分享蒙版 end -->
    </view>
  </z-paging>
</template>

<script setup>
import Wechat from '@/utils/wechat.js'
import { GroupStatus } from '@/utils/constant.js'
import GuideShare from '../../components/guide-share/index.vue'
import CombineCardList from '@/pages/detail/components/combine-card-list/index.vue'

const wxs = number()

// 统一数据为String类型
for (const item in GroupStatus) {
  GroupStatus[item] = GroupStatus[item].toString()
}
const groupStatusConstant = GroupStatus // 拼团状态常量

const userId = uni.getStorageSync('cloudUserDetails')?.userId
const defaultSku = ref('')
const selectedProp = ref([])
const selectedPropObj = ref({})
const propKeys = ref([])
const allProperties = ref([])
const skuGroup = ref({})

// 购买数量
const prodNumber = ref(1)
let hasMaxNum = 0
let maxNum = 0
// 是否达到限购或达到最大库存
const isMaxProdNumber = false
// 分享组件显隐
const showGuideShare = ref(false)
const qrLink = ref('')

let groupTeamId = ''
const spuId = ref('')
let orderId = null
let deliveryType = ''
const isWechat = ref(false) // 是否微信内部浏览器(H5端)
onLoad(options => {
  // #ifdef H5
  isWechat.value = Wechat.isWechat()
  // #endif
  orderId = options.orderId || ''
  groupTeamId = options.groupTeamId || ''
  spuId.value = options.spuId || ''
  if (options.deliveryType || options.deliveryType === 0) {
    deliveryType = options.deliveryType
  }
  loadGroupInfo()
})
onShow(() => {
  if (groupTeamId) {
    // 加载拼团详情
    loadGroupInfo()
  }
})

onHide(() => {
  closePopup()
  clearInterval(timer)
})

/**
 * 加载拼团详情
 * @param {Boolean} disableCountDown 禁用倒计时
 */
const groupLeadUserId = ref(0) // 团长id
const spuMold = ref(0) // 1 虚拟商品
const isRefund = ref(null) // 0不支持退款 1支持退款
const groupLead = ref({})
const lastShowUser = ref({})
const showGroupUserList = ref([])
const groupInfo = ref(null) // 组团信息
const pagingRef = ref(null)
const loadGroupInfo = (disableCountDown) => {
  http.request({
    url: '/tmerclub_group/group_team/info',
    method: 'GET',
    data: {
      orderId: orderId || '',
      groupTeamId: groupTeamId || '',
      spuId: spuId.value || ''
    }
  }).then(res => {
    const userDetail = uni.getStorageSync('cloudUserDetails')
    res.groupUserList.forEach(user => {
      if (user.identityType === 1) {
        groupLeadUserId.value = user.userId
        groupLead.value = user
      }
    })
    let group = res.groupUserList
    let obj = {}
    group.forEach((item, index) => {
      if (item.userId === userDetail.userId) {
        obj = item
        obj.nickname = '本人'
        group.splice(index, 1)
        group.unshift(obj)
      }
    })
    group = group.filter(item => item.identityType !== 1)
    if (res.groupUserList.length > 5) {
      lastShowUser.value = group[3]
      // eslint-disable-next-line no-unused-vars
      group = group.filter((item, i) => i < 3)
    }
    showGroupUserList.value = group
    groupInfo.value = res
    groupTeamId = res.groupTeam.groupTeamId
    hasMaxNum = res.groupActivity.hasMaxNum
    maxNum = res.groupActivity.maxNum
    if (res.groupTeam.status < GroupStatus.FAIL && res.groupTeam.status !== GroupStatus.SUCCEED && !disableCountDown) {
      // 团购倒计时
      handleCountDown(res.groupTeam.endTime)
      // 组装sku
      groupSkuProp(res.groupActivity.groupSkuList, res.groupActivity.price)
    }
    spuMold.value = res.spuMold
    isRefund.value = res.isRefund
    // 加载更多拼团列表
    pagingRef.value.reload()
  })
}

/**
 * H5: 邀请好友参团
 */
const h5Share = () => {
  if (isWechat.value) {
    // 微信内部浏览器
    const sharedata = {
      title: groupInfo.value.spuName, // 分享标题
      imgUrl: groupInfo.value.mainImgUrl, // 分享图标
      link: import.meta.env.VITE_APP_DOMAIN_ADDRESS + '/package-activities/pages/group-detail/group-detail?orderId=' + orderId + '&groupTeamId=' + groupTeamId + '&spuId=' + spuId.value + '&deliveryType=' + deliveryType,
      desc: '这个商品不错，快来看看吧！', // 分享描述
      type: '', // 分享类型,music、video或link，不填默认为link
      dataUrl: '' // 如果type是music或video，则要提供数据链接，默认为空
    }
    Wechat.callWexinShare(sharedata, () => {
      showGuideShare.value = true
    }, () => {})
  } else {
    // 普通H5浏览器: 显示生成的二维码
    qrLink.value = import.meta.env.VITE_APP_DOMAIN_ADDRESS + '/package-activities/pages/group-detail/group-detail?orderId=' + orderId + '&groupTeamId=' + groupTeamId + '&spuId=' + spuId.value + '&deliveryType=' + deliveryType
    showGuideShare.value = true
  }
}
/**
 * 关闭分享引导
 */
const hideGuideShare = (e) => {
  showGuideShare.value = e
}

/**
 * 加载更多拼团列表
 */
const moreGroupList = ref([]) // 更多拼团列表
const loadMoreGroupList = (pageNum, pageSize) => {
  http.request({
    url: '/tmerclub_search/ua/search/page',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      spuType: 1,
      needActivity: 1
    }
  }).then(res => {
    const list = []
    res.list[0].spus.forEach(groupActivityItem => {
      const groupActivityId = groupInfo.value ? groupInfo.value.groupActivity.groupActivityId : null
      if (groupActivityItem.activityId !== groupActivityId) {
        list.push(groupActivityItem)
      }
    })
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(list)
  })
}

/**
 * sku确认
 */
const skuPopConfirm = () => {
  const shopIdPar = groupInfo.value ? groupInfo.value.groupActivity.shopId : null
  util.checkAuthInfo(() => {
    uni.setStorageSync('cloudShopCartItem', JSON.stringify({
      count: prodNumber.value,
      groupSkuId: defaultSku.value.groupSkuId,
      shopId: shopIdPar,
      skuId: defaultSku.value.skuId,
      spuId: defaultSku.value.spuId
    }))
    uni.navigateTo({
      url: '/package-user/pages/submit-order/submit-order?orderEntry=1&orderType=1&groupTeamId=' + groupTeamId + '&spuMold=' + spuMold.value
    })
  })
}
/**
 * 组装SKU
 */
const groupSkuProp = (skuList, defaultPrice) => {
  skuList = skuList.filter((item) => item.skuId)
  if (skuList.length === 1 && skuList[0].properties === '') {
    defaultSku.value = skuList[0]
    return
  }
  const temSkuGroup = {}
  const temAllProperties = []
  const temPropKeys = []
  const temSelectedPropObj = {}
  let temDefaultSku = null
  skuList = skuList.filter((item) => item.properties)
  for (let i = 0; i < skuList.length; i++) {
    let isDefault = false
    if (!temDefaultSku && skuList[i].priceFee === defaultPrice) { // 找到和商品价格一样的那个SKU，作为默认选中的SKU
      temDefaultSku = skuList[i]
      isDefault = true
    }
    const properties = skuList[i].properties // 版本:公开版;颜色:金色;内存:64GB
    temAllProperties.push(properties)
    const propList = properties.split(';') // ["版本:公开版","颜色:金色","内存:64GB"]
    for (let j = 0; j < propList.length; j++) {
      const index = propList[j].indexOf(':')
      const propval = [propList[j].slice(0, index), propList[j].substring(index + 1)] // ["版本","公开版"]
      let props = temSkuGroup[propval[0]] // 先取出 版本对应的值数组
      // 如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
      if (isDefault) {
        temPropKeys.push(propval[0])
        temSelectedPropObj[propval[0]] = propval[1]
      }

      if (!props) {
        props = [] // 假设还没有版本，新建个新的空数组
        props.push(propval[1]) // 把 "公开版" 放进空数组
      } else {
        if (props.indexOf(propval[1]) === -1) { // 如果数组里面没有"公开版"
          props.push(propval[1]) // 把 "公开版" 放进数组
        }
      }
      temSkuGroup[propval[0]] = props // 最后把数据 放回版本对应的值
    }
  }
  defaultSku.value = temDefaultSku
  propKeys.value = temPropKeys
  selectedPropObj.value = temSelectedPropObj
  skuGroup.value = temSkuGroup
  allProperties.value = temAllProperties
  parseSelectedObjToVals(skuList)
}

/**
 * 将已选的 {key:val,key2:val2}转换成 [val,val2]
 */
const findSku = ref(true) // sku 商品规格
const parseSelectedObjToVals = (skuList) => {
  let selectedProperties = ''
  const temSelectedProp = []
  for (const key in selectedPropObj.value) {
    temSelectedProp.push(selectedPropObj.value[key])
    selectedProperties += key + ':' + selectedPropObj.value[key] + ';'
  }
  selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1)
  selectedProp.value = temSelectedProp

  findSku.value = false
  for (let i = 0; i < skuList.length; i++) {
    if (skuList[i].properties === selectedProperties) {
      findSku.value = true
      defaultSku.value = skuList[i]
      break
    }
  }
}

/**
 * 判断当前的规格值 是否可以选
 */
const isSkuLineItemNotOptional = (paramAllProperties, paramSelectedPropObj, key, item, paramPropKeys) => {
  const paramSelectedPropObj2 = Object.assign({}, paramSelectedPropObj)
  let properties = ''
  paramSelectedPropObj2[key] = item
  for (let j = 0; j < paramPropKeys.length; j++) {
    properties += paramPropKeys[j] + ':' + paramSelectedPropObj2[paramPropKeys[j]] + ';'
  }
  properties = properties.substring(0, properties.length - 1)
  for (let i = 0; i < paramAllProperties.length; i++) {
    if (properties === paramAllProperties[i]) {
      return false
    }
  }
  for (let i = 0; i < paramAllProperties.length; i++) {
    if (paramAllProperties[i].indexOf(item) >= 0) {
      return true
    }
  }
  return false
}

/**
 * 规格点击事件
 */
const toChooseItem = (skuLineItem, key) => {
  selectedPropObj.value[key] = skuLineItem
  const groupSkuListPar = groupInfo.value ? groupInfo.value.groupActivity.groupSkuList : null
  parseSelectedObjToVals(groupSkuListPar)
  prodNumber.value = 1
}

/**
 * 商品数量输入框失焦
 */
const checkStock = (e) => {
  const val = Number(e.detail.value)
  // limit 最大可购买数量: 活动商品不限购则为当前sku库存；活动商品限购时，当库存大于限购数量则为限购数量，否则为库存数量
  const limit = !hasMaxNum ? defaultSku.value.stock : defaultSku.value.stock > maxNum ? maxNum : defaultSku.value.stock
  prodNumber.value = val >= limit ? limit : prodNumber.value
  if (limit !== 0 && prodNumber.value <= 0) {
    prodNumber.value = 1
  }
}

/**
 * 修改商品数量
 */
const changeNumber = (num) => {
  let temProdNumber = parseInt(prodNumber.value)
  if (num < 0) { // 点击数量-
    if (temProdNumber <= 1) {
      return
    } else {
      temProdNumber += num
    }
  } else { // 点击数量+
    // limit 最大可购买数量: 活动商品不限购则为当前sku库存；活动商品限购时，当库存大于限购数量则为限购数量，否则为库存数量
    const limit = !hasMaxNum ? defaultSku.value.stock : defaultSku.value.stock > maxNum ? maxNum : defaultSku.value.stock
    temProdNumber = temProdNumber >= limit ? limit : temProdNumber + 1
    if (temProdNumber >= limit) {
      uni.showToast({
        title: hasMaxNum ? `限购${limit}件` : '库存不足',
        icon: 'none',
        mask: true
      })
    }
  }
  prodNumber.value = temProdNumber
}

/**
 * 查看订单
 */
const toOrderDetail = () => {
  const pages = getCurrentPages()
  if (pages[pages.length - 1].route === 'package-user/pages/order-detail/order-detail') {
    uni.navigateBack(1)
  } else {
    if (!groupInfo.value.orderId) {
      uni.showToast({
        title: '您未能参加本次拼团，已为您重新开团',
        icon: 'none',
        duration: 1500
      })
      const temTimer = setTimeout(() => {
        uni.navigateTo({
          url: '/package-user/pages/order/order?orderStatus=0'
        })
        clearTimeout(temTimer)
      }, 1500)
      return
    }
    uni.navigateTo({
      url: '/package-user/pages/order-detail/order-detail?orderId=' + groupInfo.value.orderId + '&deliveryType=' + deliveryType
    })
  }
}

/**
 * 重新开团
 */
const regroup = () => {
  uni.navigateTo({
    url: '/pages/detail/detail?spuId=' + spuId.value
  })
}

/**
 * 立即参团
 */
const isShowSkuPopup = ref(false) // 显示sku弹窗
const jionGroup = () => {
  isShowSkuPopup.value = true
}
/**
 * 关闭弹窗
 */
const closePopup = () => {
  isShowSkuPopup.value = false
}

/**
 * 倒计时
 */
let timer = ''
const countDown = ref({})
const handleCountDown = (time) => {
  countDown.value = util.endOfStartTime(new Date().getTime(), util.dateToTimestamp(time))
  if (!countDown.value.signs) {
    loadGroupInfo(true)
    return
  }
  timer = setInterval(() => {
    countDown.value = util.endOfStartTime(new Date().getTime(), util.dateToTimestamp(groupInfo.value.groupTeam.endTime))
    if (!countDown.value.signs) {
      // 时间结束后等待1500ms再做查询
      const setTime = setTimeout(() => {
        clearInterval(timer)
        loadGroupInfo(true)

        clearTimeout(setTime)
      }, 1100)
    }
  }, 1000)
}

/**
 * 去拼团商品详情
 */
const toProdDetailPage = (spuIdPar) => {
  uni.navigateTo({
    url: `/pages/detail/detail?spuId=${spuIdPar}`
  })
}

</script>

<style lang="scss" scoped>
@use "./group-detail.scss";
@use "../group-prods/group-prods.scss";
@use "../../../popup.scss";
</style>
