<template>
  <view :class="['components-live-prod-list',{show:modelValue}]">
    <view
      v-if="modelValue"
      class="modals-cancel"
      @tap="hideModal"
    />
    <uni-transition
      mode-class="slide-bottom"
      :styles="{'width':popWidth+'px','height':popHeight+'px','backgroundColor':'#fff',position:'fixed',bottom:0,zIndex:100}"
      :show="modelValue"
      :duration="500"
    >
      <view class="live-prod-box">
        <text class="live-prod-title">
          商品列表
        </text>
        <scroll-view
          scroll-y
          :style="{height:scrollHeight+'px'}"
          class="scroll-box"
          @scrolltolower="onScrolltolower"
        >
          <view
            v-for="(item,inx) in prodList"
            :key="inx"
            class="prod-item"
            @tap="onBuyProd(item.spuId)"
          >
            <view class="prod-img-box">
              <img-show
                :img-style="{width:'220rpx',height:'220rpx',overflow: 'hidden',borderRadius: '12rpx'}"
                :src="item.spuSearchVO.mainImgUrl"
              />
              <text class="prod-inx">
                {{ inx + 1 }}
              </text>
              <view
                v-if="!isAnchor && liveStatus===1 && explainProdId === item.spuId"
                class="prod-live"
              >
                <image
                  class="live-icon"
                  src="/static/live-broadcast/icon-explain.png"
                  mode=""
                />
                <text class="live-txt">
                  讲解中
                </text>
              </view>
            </view>
            <view class="prod-info">
              <!-- <view class="prod-name-sign-box"> -->
              <view class="prod-name-sign">
                <text
                  v-if="item.spuSearchVO.shopType===1"
                  class="sign"
                >
                  自营
                </text>
                <!-- <text v-for="(pname,pInx) in item.spuSearchVO.spuName" :key="pInx" class="name">{{ pname }}</text> -->
                <text class="name">
                  {{ item.spuSearchVO.spuName }}
                </text>
              </view>
              <!-- </view> -->
              <view
                v-if="item.spuSearchVO.spuActivity?.couponList.length"
                class="act-box"
              >
                <text
                  v-for="(couponItem,couponInx) in onGetCouponList(item.spuSearchVO.spuActivity.couponList)"
                  :key="couponInx"
                  class="act-item"
                >
                  {{ onHandleCoupon(couponItem) }}
                </text>
              </view>
              <view class="prod-bar">
                <view class="prod-pri">
                  <text class="small">
                    ￥
                  </text>
                  <view :class="['cur-pri',{'cur-pri-w':item.spuSearchVO.priceFee>=item.spuSearchVO.marketPriceFee}]">
                    <text class="big">
                      {{ wxs.parsePrice(item.spuSearchVO.priceFee)[0] }}
                    </text>
                    <text class="small">
                      .{{ wxs.parsePrice(item.spuSearchVO.priceFee)[1] }}
                    </text>
                  </view>
                  <text
                    v-if="item.spuSearchVO.priceFee<item.spuSearchVO.marketPriceFee"
                    class="old-pri"
                  >
                    ￥{{ wxs.floatPrice(item.spuSearchVO.marketPriceFee) }}
                  </text>
                </view>
                <view
                  v-if="isAnchor"
                  class="btn-box"
                >
                  <image
                    v-if="explainProdId === item.spuId"
                    class="btn-end"
                    src="/static/live-broadcast/icon_end.png"
                    mode=""
                  />
                  <image
                    v-else
                    class="btn-play"
                    src="/static/live-broadcast/icon_paly.png"
                    mode=""
                  />
                  <text
                    class="btn-txt"
                    @tap="onHandleExplain(item.spuId)"
                  >
                    {{ explainProdId === item.spuId ? '结束讲解' : '开始讲解' }}
                  </text>
                </view>
                <view
                  v-else
                  class="btn-box"
                >
                  <text class="btn-txt">
                    立即抢
                  </text>
                </view>
              </view>
            </view>
          </view>
          <view class="list-tips-box">
            <image
              v-if="!prodList.length"
              class="empty-img"
              src="/static/empty-img/not-found.png"
            />
            <text
              v-if="!prodList.length"
              class="empty-txt"
            >
              暂无商品信息
            </text>
            <text
              v-if="isLoadAll"
              class="empty-txt"
            >
              已经到底啦~
            </text>
          </view>
        </scroll-view>
      </view>
    </uni-transition>
  </view>
</template>
<script setup>
import { onMounted } from 'vue'
// #ifdef H5
import '@/utils/jwx/index.js'
// #endif

const wxs = number()
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  prodList: {
    type: Array,
    default: () => []
  },
  // 是否是主播
  isAnchor: {
    type: Boolean,
    default: false
  },
  // 讲解的商品
  explainProdId: {
    type: [String, Number],
    default: 0
  },
  // 当前直播间状态
  liveStatus: {
    type: Number,
    default: 0
  },
  // 是否加载完全部
  isLoadAll: {
    type: Boolean,
    default: false
  },
  // 是否为小程序的web-view
  isWebview: {
    type: Boolean,
    default: false
  }
})

// 优惠券列表处理
const onGetCouponList = (list) => {
  return [...list].splice(0, 3)
}

// 处理优惠券显示
const onHandleCoupon = (couponInfo) => {
  if (couponInfo.couponType === 1) {
    return `满${couponInfo.cashCondition}元减${couponInfo.reduceAmount}`
  } else if (couponInfo.couponType === 2) {
    return `满${couponInfo.cashCondition}元${couponInfo.couponDiscount}折`
  }
}

const emits = defineEmits(['update:modelValue', 'scrolltolower', 'changeExplain'])
// 滚动到底部
const onScrolltolower = () => {
  emits('scrolltolower')
}
const hideModal = () => {
  emits('update:modelValue', false)
}
// 处理讲解说明
const onHandleExplain = (spuId) => {
  emits('changeExplain', spuId)
}
// 前往购买商品
const onBuyProd = (spuId) => {
  if (!props.isAnchor) {
    if (!props.isWebview) {
      uni.navigateTo({
        url: '/pages/detail/detail?spuId=' + spuId
      })
    } else {
      wx.miniProgram.navigateTo({
        url: '/pages/detail/detail?spuId=' + spuId
      })
    }
  }
}

// 获取弹窗的宽高及弹窗高度
const popWidth = ref(0)
const popHeight = ref(0)
const scrollHeight = ref(0)
const getRect = () => {
  const sysInfo = uni.getSystemInfoSync() // 设备信息
  popWidth.value = sysInfo.windowWidth
  popHeight.value = sysInfo.windowHeight / 2
  const pxToRpxScale = 750 / sysInfo.windowWidth // px转换到rpx的比例
  scrollHeight.value = popHeight.value - 93 / pxToRpxScale // 滚动区域高度
}
onMounted(() => {
  getRect()
})
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
