<template>
  <z-paging
    ref="pagingRef"
    v-model="discountProdList"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    empty-view-text="暂无相关活动商品"
    loading-more-no-more-text="没有更多了，看看别的吧"
    class="Mall4j page-discount-detail"
    @query="onGetDiscountProdList"
    @scroll="onPagingScroll"
  >
    <view>
      <!-- 搜索框 -->
      <view class="banner">
        <view class="bg">
          <img-show :src="discountDetail.mobilePic" />
        </view>
        <view class="text-box">
          <view class="time">
            <view class="text">
              距结束仅剩
            </view>
            <block v-if="day">
              <view class="number">
                {{ day }}
              </view>
              <view>天</view>
            </block>
            <block v-else>
              <view class="number">
                {{ hour }}
              </view>
              <view class="colon">
                :
              </view>
              <view class="number">
                {{ min }}
              </view>
              <view class="colon">
                :
              </view>
              <view class="number">
                {{ second }}
              </view>
            </block>
          </view>
          <view class="discount-name">
            {{ discountDetail.discountName }}
          </view>
          <view class="shop-name">
            {{ discountDetail.shopName }}
          </view>
        </view>
      </view>

      <!-- 筛选栏 -->
      <view :class="['sortbar']">
        <view
          :class="['item',sortTpye===1?'active':'']"
          @tap="onSwitchingSortingType(1)"
        >
          默认
        </view>
        <view
          :class="['item',sortTpye===2?'active':'', sortTpye===2 ? sort===2 ? 'arrow-up': 'arrow-down' : '' ]"
          @tap="onSwitchingSortingType(2)"
        >
          销量
        </view>
        <view
          :class="['item',sortTpye===3?'active':'', sortTpye===3 ? sort===4 ? 'arrow-up': 'arrow-down' : '' ]"
          @tap="onSwitchingSortingType(3)"
        >
          价格
        </view>
        <view
          class="item list-style"
          @tap="onChangeListStyle"
        >
          <image :src="isLineProds?'/static/images/list-line.png' : '/static/images/list-row.png'" />
        </view>
      </view>
      <!-- 筛选栏 -->
      <view
        v-if="shouldLock"
        :class="['sortbar', 'lock-sortbar']"
      >
        <view
          :class="['item',sortTpye===1?'active':'']"
          @tap="onSwitchingSortingType(1)"
        >
          默认
        </view>
        <view
          :class="['item',sortTpye===2?'active':'', sortTpye===2 ? sort===2 ? 'arrow-up': 'arrow-down' : '' ]"
          @tap="onSwitchingSortingType(2)"
        >
          销量
        </view>
        <view
          :class="['item',sortTpye===3?'active':'', sortTpye===3 ? sort===4 ? 'arrow-up': 'arrow-down' : '' ]"
          @tap="onSwitchingSortingType(3)"
        >
          价格
        </view>
        <view
          class="item list-style"
          @tap="onChangeListStyle"
        >
          <image :src="isLineProds?'/static/images/list-line.png' : '/static/images/list-row.png'" />
        </view>
      </view>

      <!-- 产品列表 -->
      <view
        v-if="isLineProds"
        class="line-prods"
      >
        <block
          v-for="(prodItem, prodIndex) in discountProdList"
          :key="prodIndex"
        >
          <view
            class="item"
            @tap="onToProdDetail(prodItem.spuId)"
          >
            <view class="img">
              <img-show
                :src="prodItem.mainImgUrl"
                img-mode="aspectFit"
              />
            </view>
            <view class="text-box">
              <view class="name">
                {{ prodItem.spuName }}
              </view>
              <view
                v-if="prodItem.sellingPoint"
                class="sku"
              >
                {{ prodItem.sellingPoint }}
              </view>
              <view class="discount-box">
                <view class="discount">
                  {{ prodItem.discountSign.discountRule === 0 ? '满减' : '满折' }}
                </view>
                <view
                  v-if="prodItem.discountSign.discountRule === 0"
                  class="discount"
                >
                  满{{ wxs.parsePrice(prodItem.discountSign.needAmount)[0] }}
                  <text v-if="wxs.parsePrice(prodItem.discountSign.needAmount)[1] !== '00' ">
                    {{ '.'+wxs.parsePrice(prodItem.discountSign.needAmount)[1] }}
                  </text>
                  元减{{ wxs.parsePrice(prodItem.discountSign.discount)[0] }}元
                </view>
                <view
                  v-else
                  class="discount"
                >
                  满{{ wxs.parsePrice(prodItem.discountSign.needAmount)[0] }}件，享{{ wxs.parsePrice(prodItem.discountSign.discount)[0] }}.{{ wxs.parsePrice(prodItem.discountSign.discount)[1] }}折
                </view>
              </view>
              <view class="price-box">
                <view class="price">
                  <!--活动价-->
                  <view class="symbol">
                    ￥
                  </view>
                  <view class="big">
                    {{ wxs.parsePrice(prodItem.activityPrice)[0] }}
                  </view>
                  <view class="symbol">
                    .{{ wxs.parsePrice(prodItem.activityPrice)[1] }}
                  </view>
                  <!--活动价end-->
                  <!--原价-->
                  <view
                    v-if="prodItem.priceFee"
                    class="original-price"
                  >
                    ￥{{ wxs.parsePrice(prodItem.priceFee)[0] }}.{{ wxs.parsePrice(prodItem.priceFee)[1] }}
                  </view>
                  <!--原价end-->
                </view>
                <view class="btn">
                  去抢购
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view
        v-else
        class="prods"
      >
        <view
          v-for="(listItem, listIndex) in multiRowProdList"
          :key="listIndex"
          class="list"
        >
          <block
            v-for="(prodItem) in listItem"
            :key="prodItem.spuId"
          >
            <view
              class="item"
              @tap="onToProdDetail(prodItem.spuId)"
            >
              <view class="img">
                <img-show
                  :src="prodItem.mainImgUrl"
                  img-mode="aspectFit"
                />
              </view>
              <view class="text-box">
                <view class="name">
                  {{ prodItem.spuName }}
                </view>
                <view
                  v-if="prodItem.sellingPoint"
                  class="sku"
                >
                  {{ prodItem.sellingPoint }}
                </view>
                <view class="discount-box">
                  <view class="discount">
                    {{ prodItem.discountSign.discountRule === 0 ? '满减' : '满折' }}
                  </view>
                  <view
                    v-if="prodItem.discountSign.discountRule === 0"
                    class="discount"
                  >
                    满{{ wxs.parsePrice(prodItem.discountSign.needAmount)[0] }}
                    <text v-if="wxs.parsePrice(prodItem.discountSign.needAmount)[1] !== '00' ">
                      {{ '.'+wxs.parsePrice(prodItem.discountSign.needAmount)[1] }}
                    </text>
                    元减{{ wxs.parsePrice(prodItem.discountSign.discount)[0] }}元
                  </view>
                  <view
                    v-else
                    class="discount"
                  >
                    满{{ wxs.parsePrice(prodItem.discountSign.needAmount)[0] }}件，享{{ wxs.parsePrice(prodItem.discountSign.discount)[0] }}.{{ wxs.parsePrice(prodItem.discountSign.discount)[1] }}折
                  </view>
                </view>
                <view class="price-box">
                  <view class="price">
                    <!--活动价-->
                    <view class="symbol">
                      ￥
                    </view>
                    <view class="big">
                      {{ wxs.parsePrice(prodItem.activityPrice)[0] }}
                    </view>
                    <view class="symbol">
                      .{{ wxs.parsePrice(prodItem.activityPrice)[1] }}
                    </view>
                    <!--活动价end-->
                    <!--原价-->
                    <view
                      v-if="prodItem.priceFee"
                      class="original-price"
                    >
                      ￥{{ wxs.parsePrice(prodItem.priceFee)[0] }}.{{ wxs.parsePrice(prodItem.priceFee)[1] }}
                    </view>
                    <!--原价end-->
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
const wxs = number()

let discountId = 0
onLoad(options => {
  discountId = options.discountId
  onGetDiscountDetail() // 获取满减活动详情
})
onShow(() => {
  // 切回页面时重新启用倒计时
  onCountTime()
})
onHide(() => {
  clearTimeout(timer)
})

const shouldLock = ref(false)
const onPagingScroll = e => {
  shouldLock.value = e?.detail?.scrollTop > 150
}

/**
 * 跳转到商品详情
 */
const onToProdDetail = (spuId) => {
  uni.navigateTo({
    url: '/pages/detail/detail?spuId=' + spuId
  })
}

/**
 * 切换列表排序方式
 * @param {Number} sortTpye 排序类型 1默认 2销量 3价格
 */
const sortTpye = ref(1) // 排序类型 1默认 2销量 3价格
const sort = ref(1) // 排序方式 1新品(默认?),2销量倒序,3销量正序,4商品价格倒序,5商品价格正序
const onSwitchingSortingType = (type) => {
  sortTpye.value = type
  if (sortTpye.value === 1) {
    sort.value = 1
  } else if (sortTpye.value === 2) {
    // 销量排序
    sort.value = sort.value === 2 ? 3 : 2
  } else if (sortTpye.value === 3) {
    // 价格排序
    sort.value = sort.value === 4 ? 5 : 4
  }
  pagingRef.value.reload()
}

/**
 * 计算倒计时
 */
const day = ref(0)
const hour = ref(0)
const min = ref(0)
const second = ref(0)
let timer = null
const onCountTime = () => {
  if (!endTime) {
    return
  }
  // 获取当前时间
  const date = new Date()
  const now = date.getTime() // 设置截止时间
  const end = util.dateToTimestamp(endTime) // 时间差
  const leftTime = end - now // 定义变量 d,h,m,s保存倒计时的时间
  if (leftTime >= 0) {
    const d = Math.floor(leftTime / 1000 / 60 / 60 / 24) // 时
    const h = Math.floor(leftTime / 1000 / 60 / 60)
    const m = Math.floor(leftTime / 1000 / 60 % 60)
    const s = Math.floor(leftTime / 1000 % 60)
    day.value = d
    hour.value = h < 10 ? '0' + h : h
    min.value = m < 10 ? '0' + m : m
    second.value = s < 10 ? '0' + s : s
  } else {
    hour.value = '00'
    min.value = '00'
    second.value = '00'
  }
  // 等于0的时候不调用
  if (Number(hour.value) === 0 && Number(min.value) === 0 && Number(second.value) === 0) {
    uni.navigateTo({
      url: '/package-activities/pages/discount-list/discount-list'
    })
  } else {
    // 递归每秒调用countTime方法，显示动态时间效果,
    timer = setTimeout(onCountTime, 1000)
  }
}

/**
 * 获取满减活动详情
 */
const discountDetail = ref({})
let endTime = ''
const onGetDiscountDetail = () => {
  http.request({
    url: '/tmerclub_marketing/ua/discount/info',
    method: 'GET',
    data: {
      discountId
    }
  }).then(res => {
    discountDetail.value = res
    endTime = res.endTime
    onCountTime()
    pagingRef.value.reload()
  }).catch(() => {
    uni.redirectTo({
      url: '/package-activities/pages/discount-list/discount-list'
    })
  })
}

/**
 * 获取促销商品列表
 */
const pagingRef = ref(null)
const discountProdList = ref([]) // 满减折商品列表
const multiRowProdList = ref([]) // 多行展示时商品列表
const onGetDiscountProdList = (pageNum, pageSize) => {
  http.request({
    url: '/tmerclub_marketing/ua/discount/spu_page_by_discount_id',
    method: 'GET',
    data: {
      discountId,
      pageNum,
      pageSize,
      sort: sort.value || ''
    }
  }).then(res => {
    let row1 = []
    let row2 = []
    res.list[0].spus.forEach((prodItem, prodIndex) => {
      prodItem.discountSign = {
        discountRule: discountDetail.value.discountRule,
        discount: discountDetail.value.discountItemList[0].discount,
        needAmount: discountDetail.value.discountItemList[0].needAmount
      }
      // 分两列展示
      if (prodIndex % 2 === 0) {
        row1.push(prodItem)
      } else {
        row2.push(prodItem)
      }
    })
    if (pageNum !== 1) {
      // 将数据分成两列，并且合并已存在的数据
      row1 = multiRowProdList.value[0].concat(row1)
      row2 = multiRowProdList.value[1].concat(row2)
    }
    multiRowProdList.value = [row1, row2]
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(res.list[0].spus)
  })
}

// 切换列表样式
const isLineProds = ref(true) // 列表格式，默认横排展示
const onChangeListStyle = () => {
  isLineProds.value = !isLineProds.value
}

</script>

<style lang="scss" scoped>
@use "./discount-detail.scss";
</style>
