<template>
  <view class="Mall4j page-score-prod-detail">
    <!-- 头部 -->
    <view
      class="det-header"
      :style="{ opacity: topTabOpacity, zIndex: topTabOpacity >0.2?'99':'-1'}"
    >
      <view
        :class="['item', topTabSts === 0 && 0 < heightList[1] && !scrolling ? 'active' : '']"
        @tap="hanleTopTabClick(0)"
      >
        商品
      </view>
      <view
        :class="['item', topTabSts === 2 || 0 > heightList[2] && !scrolling ? 'active' : '']"
        @tap="hanleTopTabClick(2)"
      >
        详情
      </view>
    </view>
    <!-- 商品视频 & 轮播图 -->
    <view class="video-container">
      <video
        v-if="video && isPlaying"
        id="myVideo"
        :enable-progress-gesture="false"
        objectFit="contain"
        :src="util.addDomain(video)"
        controls
        @ended="playEnd"
      />
      <view
        v-if="video"
        class="play-btn"
        @tap="videoOper"
      >
        <image
          v-if="!isPlaying"
          class="play-icon"
          src="/static/images/play-red.png"
        />
        <text
          v-if="isPlaying"
          :class="'play-text ' + (isPlaying?'video-stop':'video-play')"
        >
          {{ isPlaying?'退出播放':'' }}
        </text>
      </view>
      <!-- 轮播图 -->
      <swiper
        v-if="!isPlaying"
        class="pic-box"
        indicator-dots
        indicator-color="rgba(255,252,255, .3)"
        indicator-active-color="rgba(255,252,255, .6)"
        autoplay
        circular
      >
        <block v-if="imgList.length">
          <swiper-item
            v-for="(img, imgIdx) in imgList"
            :key="imgIdx"
            class="item"
          >
            <img-show
              :src="img"
              img-mode="aspectFit"
            />
          </swiper-item>
        </block>
        <block v-else>
          <swiper-item class="item">
            <image
              mode="aspectFit"
              src="/static/images/def.png"
            />
          </swiper-item>
        </block>
      </swiper>
    </view>

    <!-- 商品视频 & 轮播图 end -->

    <!-- 名称、价格 -->
    <view class="name-box">
      <view class="name">
        {{ prodInfo.spuName }}
      </view>
      <view class="discount-info">
        {{ prodInfo.sellingPoint || '' }}
      </view>
      <view
        v-if="defaultSku.scoreFee"
        class="action-box"
      >
        <view class="price-box">
          <view class="price">
            <view class="integral-icon">
              <image src="@/package-activities/static/images/integral-icon.png" />
            </view>
            <view class="symbol">
              {{ defaultSku.scoreFee }}积分
            </view>
            <view
              v-if="defaultSku.priceFee"
              class="symbol"
            >
              +
            </view>
            <view
              v-if="defaultSku.priceFee"
              class="symbol"
            >
              {{ wxs.parsePrice(defaultSku.priceFee)[0] }}
            </view>
            <view
              v-if="defaultSku.priceFee"
              class="symbol"
            >
              .{{ wxs.parsePrice(defaultSku.priceFee)[1] }}元
            </view>
            <view
              v-if="defaultSku.marketPriceFee
                &&defaultSku.marketPriceFee>defaultSku.priceFee"
              class="marketPriceFee"
            >
              {{ wxs.parsePrice(defaultSku.marketPriceFee)[0]+'.'+wxs.parsePrice(defaultSku.marketPriceFee)[1] }}
            </view>
          </view>
          <view class="stock">
            仅剩 {{ prodInfo.totalStock }} 件
          </view>
        </view>
      </view>
    </view>

    <!-- sku、配送 -->
    <view class="det-con">
      <view class="item">
        <view class="tit">
          已选
        </view>
        <view
          class="con sku-con"
          @tap="handleShowSkuPop(2)"
        >
          <view class="s-item">
            <block
              v-for="(skuItem, skuIndex) in selectedPropShowNew"
              :key="skuIndex"
            >
              <text decode>
                {{ skuIndex < selectedPropShowNew.length-1 ? skuItem +'，' : skuItem+'&nbsp; &nbsp;' }}
              </text>
            </block> {{ prodNumber }} 件
          </view>
        </view>
      </view>
      <view class="item">
        <view class="tit">
          配送
        </view>
        <view class="con distribution-con">
          <view class="dis-item">
            <view class="dis-item-icon" />快递配送
          </view>
        </view>
      </view>
    </view>

    <!-- 详情 -->
    <div class="det-det">
      <div class="tit">
        商品详情
      </div>
      <div class="con">
        <rich-text :nodes="prodDetail" />
      </div>
    </div>

    <!-- 底部 -->
    <view class="det-foot">
      <view class="actions">
        <view
          class="item"
          @tap="toIndex"
        >
          <view class="img">
            <image src="/static/images/detail-index.png" />
          </view>
          <view class="text">
            首页
          </view>
        </view>
      </view>
      <view class="btns">
        <view
          class="btn btn-r"
          @tap="handleShowSkuPop(1)"
        >
          立即购买
        </view>
      </view>
    </view>

    <!-- <login-popup bind:onGotUserInfo="onGotUserInfo" isAuthInfo="{{isAuthInfo}}"></login-popup> -->

    <!-- 选择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 || prodInfo.mainImgUrl" />
          </view>
          <view class="info">
            <view class="name">
              {{ prodInfo.spuName }}
            </view>
            <view
              v-if="findSku"
              class="price"
            >
              <view class="symbol">
                {{ defaultSku.scoreFee }}积分
              </view>
              <view
                v-if="defaultSku.priceFee"
                class="symbol"
              >
                +
              </view>
              <view
                v-if="showSkuType===0 && defaultSku.priceFee"
                class="symbol"
              >
                {{ wxs.parsePrice(defaultSku.priceFee)[0] }}
              </view>
              <view
                v-if="showSkuType===0 && defaultSku.priceFee"
                class="symbol"
              >
                .{{ wxs.parsePrice(defaultSku.priceFee)[1] }}元
              </view>
              <view
                v-if="showSkuType===0"
                class="stock"
              >
                库存: {{ defaultSku.stock }}
              </view>
              <view
                v-if="showSkuType===1"
                class="stock"
              >
                库存: {{ defaultActivitySku.stock }}
              </view>
            </view>
            <view
              v-else
              class="sku-not-found"
            >
              无货
            </view>
          </view>
          <view
            class="close"
            @tap="closePopup"
          >
            <image src="/static/images/close-share.png" />
          </view>
        </view>
        <view class="con-box">
          <block
            v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList"
            :key="skuGroupItemIndex"
          >
            <view class="sku-item">
              <block
                v-for="(skuLine, key) in skuGroupItem"
                :key="key"
              >
                <view class="item-tit">
                  {{ key }}
                </view>
                <view class="item-box">
                  <view
                    v-for="skuLineItem in skuLine"
                    :key="skuLineItem"
                    :class="['item-item',selectedPropNew.indexOf(key + skuLineItem) !== -1?'active':'', isSkuLineItemNotOptional(allProperties,selectedPropObj,key,skuLineItem,propKeys)? 'cannot' : '']"
                    @tap="toChooseItem(skuGroupItemIndex, skuLineItem, key)"
                  >
                    {{ skuLineItem }}
                  </view>
                </view>
              </block>
            </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
            v-if="skuPopBtnType === 1"
            :class="['btn',findSku?'':'gray']"
            @tap="skuPopupConfirm"
          >
            确定
          </view>
          <view
            v-if="skuPopBtnType === 2"
            class="btn btn-r"
            @tap="goSubmit"
          >
            立即购买
          </view>
        </view>
      </view>
    </view>
    <confirm-pop
      :show-pop="showPop"
      :pop-content="popContent"
      @handle-pop-confirm="popConfirm"
      @handle-pop-cancel="popCancel"
    />
  </view>
</template>

<script setup>
import util from '@/utils/util.js'

const wxs = number()

const prodNumber = ref(1) // 商品数量
const defaultSku = ref('')
const selectedPropObj = ref({})
let selectedPropObjList = []
const topTabSts = ref(0) // 顶部 topTab 选中的项目
const heightList = ref([0])
const findSku = ref(true) // sku 商品规格
const defaultActivitySku = ref('')
const allProperties = ref([])
let skuGroup = {}

// sku弹窗底部按钮显示类型: 1确认; 2加入购物车、立即购买
const skuPopBtnType = ref(1)
const showSkuType = ref(0) // 规格展示类型: 0普通sku; 1商品活动sku
const maxNum = 0 // 限购数量(仅活动商品)
const isMaxProdNumber = ref(false) // 是否达到限购或达到最大库存

// 商品视频
const isPlaying = ref(false)
let videoContext = ''

let spuId = 0 // 商品id
onLoad((options) => {
  if (options.spuId) {
    spuId = options.spuId
  }
})

onLoad(() => {
  // 获取商品详情
  getProdInfo()
})

onHide(() => {
  if (isPlaying.value) {
    stopPlay()
  }
  // 隐藏弹窗
  closePopup()
})

// 页面滚动事件
const topTabOpacity = ref(0) // 顶部 topTab 的透明度
const scrolling = ref(false)
onPageScroll(e => {
  topTabOpacity.value = e.scrollTop / 46
  if (!scrolling.value) {
    topTabSts.value = e.scrollTop < heightList.value[1] ? 0 : e.scrollTop < heightList.value[2] ? 1 : 2
  }
  if (e.scrollTop > 325 && isPlaying.value) {
    stopPlay()
  }
})

watch(prodNumber, (nv) => {
  isMaxProdNumber.value = nv >= defaultSku.value.stock
})
watch(showSkuType, () => {
  prodNumber.value = 1
})

onMounted(() => {
  nextTick(() => {
    // 获取评价、详情在页面的高度
    getHeightList()
  })
})

/**
 * 商品数量输入框失焦
 */
const checkStock = (e) => {
  const val = Number(e.detail.value)
  // 活动商品sku弹窗
  if (showSkuType.value !== 0) {
    // 是否限购
    const isRestriction = maxNum && maxNum !== -1
    // limit 最大可购买数量: 活动商品不限购则为当前sku库存；活动商品限购时，当库存大于限购数量则为限购数量，否则为库存数量
    const limit = !isRestriction ? defaultActivitySku.value.stock : defaultActivitySku.value.stock > maxNum ? maxNum : defaultActivitySku.value.stock
    if (val >= limit) {
      uni.showToast({
        title: isRestriction ? `限购${limit}件` : '库存不足',
        icon: 'none'
      })
    }
    prodNumber.value = val >= limit ? limit : val + 1
  } else {
    // 普通商品
    if (val > defaultSku.value.stock) {
      uni.showToast({
        title: '库存不足',
        icon: 'none'
      })
      prodNumber.value = defaultSku.value.stock
    }
  }
}

// 保存商品游览记录
const saveProdBrowseRecord = (categoryId) => {
  http.request({
    url: '/tmerclub_product/spu_browse_log',
    method: 'POST',
    data: {
      spuId: Number(spuId),
      categoryId,
      spuType: 3
    }
  })
}

/**
 * 规格弹窗底部确定按钮
 */
const skuPopupConfirm = () => {
  if (Number(prodNumber.value) < 1) {
    uni.showToast({
      title: '请输入正确的商品数量',
      duration: 1200,
      icon: 'none',
      mask: true
    })
    return
  }
  if (!findSku.value) {
    uni.showToast({
      title: '所选规格无货',
      duration: 2000,
      icon: 'none'
    })
    return
  }
  if (!defaultSku.value.stock) {
    uni.showToast({
      title: '库存不足',
      duration: 2000,
      icon: 'none'
    })
    return
  }
  goSubmit()
  closePopup()
}

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

/**
 * 获取商品详情
 */
const prodInfo = ref({}) // 商品详情
const imgList = ref([]) // 商品轮播图
const video = ref('')
const prodDetail = ref('') // 商品详情富文本
const skuList = ref([])
const popContent = reactive({})
const showPop = ref(false)
const getProdInfo = () => {
  let userId = null
  if (uni.getStorageSync('cloudToken') && uni.getStorageSync('cloudUserDetails')) {
    userId = uni.getStorageSync('cloudUserDetails').userId
  }
  http.request({
    url: '/tmerclub_product/ma/spu/score_prod_info',
    method: 'GET',
    data: {
      spuId,
      userId
    }
  }).then(res => {
    prodInfo.value = res
    if (res.imgUrls) {
      imgList.value = res.imgUrls.split(',')
    }
    video.value = res.video
    prodDetail.value = util.formatHtml(res.detail)
    skuList.value = res.skus

    groupSkuProp(res.skus, res.priceFee)

    // 初始化商品视频, 如有
    if (res.video) {
      nextTick(() => {
        videoContext = uni.createVideoContext('myVideo', this)
      })
    }
    // 把访问的商品分类写进缓存,用作推荐列表的参数
    uni.setStorageSync('cloudBrowseCategoryId', res.categoryId)
    if (uni.getStorageSync('cloudToken')) {
      // 保存商品游览记录
      saveProdBrowseRecord(res.categoryId)
    }
  }).catch(errMsg => {
    showPop.value = true
    if (errMsg.msg) {
      popContent.content = errMsg.msg
    } else {
      popContent.content = '商品已下架'
    }
    popContent.cancelText = '逛逛首页'
    popContent.confirmText = '搜索商品'
  })
}

/**
 * 组装SKU
 */
const propKeys = ref([])
const skuGroupList = ref([])
const groupSkuProp = (paramSkuList, defaultPrice) => {
  if (paramSkuList.length === 1 && !paramSkuList[0].properties) {
    defaultSku.value = paramSkuList[0]
    return
  }
  skuGroup = {}
  const tempSkuGroupList = []
  const tempAllProperties = []
  const tempPropKeys = []
  const tempSelectedPropObj = {}
  selectedPropObjList = []
  let tempDefaultSku = null
  for (let i = 0; i < paramSkuList.length; i++) {
    let isDefault = false
    if (!tempDefaultSku && (paramSkuList[i].priceFee === defaultPrice || paramSkuList[i].seckillPrice === defaultPrice)) { // 找到和商品价格一样的那个SKU，作为默认选中的SKU
      tempDefaultSku = paramSkuList[i]
      isDefault = true
    }
    const properties = paramSkuList[i].properties // 版本:公开版;颜色:金色;内存:64GB
    tempAllProperties.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 = skuGroup[propval[0]] // 先取出 版本对应的值数组
      // 如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
      if (isDefault) {
        tempPropKeys.push(propval[0])
        tempSelectedPropObj[propval[0]] = propval[1]
        const selectedPropObjItem = {}
        selectedPropObjItem[propval[0]] = propval[1]
        selectedPropObjList.push(selectedPropObjItem)
      }
      if (!props) {
        props = [] // 假设还没有版本，新建个新的空数组
        props.push(propval[1]) // 把 "公开版" 放进空数组
      } else {
        if (props.indexOf(propval[1]) === -1) { // 如果数组里面没有"公开版"
          props.push(propval[1]) // 把 "公开版" 放进数组
        }
      }
      skuGroup[propval[0]] = props // 最后把数据 放回版本对应的值
      const propListItem = {}
      propListItem[propval[0]] = props
      tempSkuGroupList.push(propListItem)
    }
  }
  defaultSku.value = tempDefaultSku
  propKeys.value = tempPropKeys
  selectedPropObj.value = tempSelectedPropObj
  skuGroupList.value = unique(tempSkuGroupList)
  allProperties.value = tempAllProperties
  parseSelectedObjToVals(paramSkuList)
}

/**
 * 将已选的 {key:val,key2:val2}转换成 [val,val2]
 */
let selectedPropertiesNew = ''
const selectedPropNew = ref([])
const selectedPropShowNew = ref([])
const parseSelectedObjToVals = (paramSkuList) => {
  selectedPropertiesNew = ''
  const tempSelectedPropNew = []
  const tempSelectedPropShowNew = []
  for (let i = 0; i < selectedPropObjList.length; i++) {
    const selectedPropObjItem = selectedPropObjList[i]
    for (const key in selectedPropObjItem) {
      if (Object.hasOwnProperty.call(selectedPropObjItem, key)) {
        tempSelectedPropNew.push(key + selectedPropObjItem[key])
        tempSelectedPropShowNew.push(selectedPropObjItem[key])
        selectedPropertiesNew += key + ':' + selectedPropObjItem[key] + ';'
      }
    }
  }
  selectedPropertiesNew = selectedPropertiesNew.substring(0, selectedPropertiesNew.length - 1)
  selectedPropNew.value = tempSelectedPropNew
  selectedPropShowNew.value = tempSelectedPropShowNew
  let temFindSku = false
  for (let i = 0; i < paramSkuList.length; i++) {
    if (paramSkuList[i].properties === selectedPropertiesNew) {
      temFindSku = true
      defaultSku.value = paramSkuList[i]
      break
    }
  }
  findSku.value = temFindSku
}

/**
 * 判断当前的规格值 是否可以选
 */
const isSkuLineItemNotOptional = (paramAllProperties, paramSelectedPropObj, key, item, paramPropKeys) => {
  const tempSelectedPropObj = Object.assign({}, paramSelectedPropObj)
  let properties = ''
  tempSelectedPropObj[key] = item
  for (let j = 0; j < paramPropKeys.length; j++) {
    properties += paramPropKeys[j] + ':' + tempSelectedPropObj[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 = (skuGroupItemIndex, skuLineItem, key) => {
  selectedPropObjList[skuGroupItemIndex][key] = skuLineItem
  selectedPropObj.value[key] = skuLineItem
  parseSelectedObjToVals(skuList.value)
  prodNumber.value = 1
}

/**
 * 去重
 */
const unique = (arr) => {
  const map = {}
  arr.forEach(item => {
    const obj = {}
    Object.keys(item).sort().forEach(key => {
      obj[key] = item[key]
    })
    map[JSON.stringify(obj)] = item
  })
  return Object.keys(map).map(key => JSON.parse(key))
}

/**
 * 获取高度
 */
const getHeightList = () => {
  const classNameList = ['.det-det']
  for (let i = 0; i < classNameList.length; i++) {
    uni.createSelectorQuery().select(classNameList[i]).boundingClientRect(data => { // 目标节点
      uni.createSelectorQuery().select('.page-score-prod-detail').boundingClientRect(res => { // 最外层盒子节点
        let scrollTop
        if (data.top < 0) {
          scrollTop = Math.abs(res.top) - Math.abs(data.top)
        } else {
          scrollTop = Math.abs(res.top) + Math.abs(data.top)
        }
        heightList.value.push(scrollTop)
      }).exec()
    }).exec()
  }
}

/**
 * 顶部Tab栏点击，页面滚动至指定位置
 * @param {number} type 0页面置顶; 1滚动至评价; 2滚动至详情
 */
const hanleTopTabClick = (type) => {
  topTabSts.value = type
  scrolling.value = true
  if (type === 0) {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 100
    })
  } else {
    const className = 'det-det'
    uni.createSelectorQuery().select('.' + className).boundingClientRect(data => { // 目标节点
      uni.createSelectorQuery().select('.page-score-prod-detail').boundingClientRect(res => { // 最外层盒子节点
        let scrollTop
        if (data.top < 0) {
          scrollTop = Math.abs(res.top) - Math.abs(data.top) - 60
        } else {
          scrollTop = Math.abs(res.top) + Math.abs(data.top) - 60
        }
        uni.pageScrollTo({
          duration: 100,
          scrollTop
        })
      }).exec()
    }).exec()
  }
  setTimeout(() => {
    scrolling.value = false
  }, 500)
}

/**
 * 显示sku弹窗
 */
const isShowSkuPopup = ref(false) // 显示sku弹窗
const handleShowSkuPop = (type) => {
  showSkuType.value = 0
  skuPopBtnType.value = type
  isShowSkuPopup.value = true
}

/**
 * 提示弹窗确认
 */
const popConfirm = () => {
  showPop.value = false
  uni.navigateTo({
    url: '/pages/search-page/search-page'
  })
}

/**
 * 提示弹窗取消
 */
const popCancel = () => {
  showPop.value = false
  uni.switchTab({
    url: '/pages/index/index'
  })
}

/**
 * 隐藏弹窗
 */
const closePopup = () => {
  isShowSkuPopup.value = false
}

/**
 * 立即购买
 */
const goSubmit = (orderType) => {
  if (!findSku.value) {
    uni.showToast({
      title: '所选规格无货',
      duration: 2000,
      icon: 'none'
    })
    return
  }
  if (!defaultSku.value.stock || prodNumber.value < 1) {
    uni.showToast({
      title: '库存不足',
      duration: 2000,
      icon: 'none'
    })
    return
  }
  util.checkAuthInfo(() => {
    uni.setStorageSync('cloudShopCartItem', JSON.stringify({
      count: prodNumber.value,
      groupSkuId: orderType === 'group' ? defaultActivitySku.value.groupSkuId : undefined,
      seckillSkuId: orderType === 'seckill' ? defaultActivitySku.value.seckillSkuId : undefined,
      seckillId: orderType === 'seckill' ? defaultActivitySku.value.seckillSkuId : undefined,
      shopId: prodInfo.value.shopId,
      skuId: defaultSku.value.skuId,
      spuId
    }))
    uni.navigateTo({
      url: '/package-user/pages/submit-score-order/submit-score-order?orderEntry=1&orderType=3'
    })
  })
}

/**
 * 去首页
 */
const toIndex = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}

/**
 * 视频的方法
 */
const videoOper = () => {
  if (isPlaying.value) {
    stopPlay()
  } else {
    startPlay()
  }
}
const playEnd = () => {
  stopPlay()
}
const startPlay = () => {
  isPlaying.value = true
  setTimeout(() => {
    videoContext.seek(0)
    videoContext.play()
  }, 200)
}
const stopPlay = () => {
  isPlaying.value = false
  setTimeout(() => {
    videoContext.seek(0)
    videoContext.stop()
  }, 200)
}

</script>

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