<template>
  <z-paging
    ref="pagingRef"
    v-model="browseLogList"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    empty-view-text="您还没有浏览过商品"
    @query="onGetBrowseLogList"
    @list-change="changeData"
  >
    <view class="Mall4j page-history">
      <view
        v-for="(item, index) in browseLogData"
        :key="index"
        class="history-item"
      >
        <view class="date">
          {{ item.time }}
        </view>
        <view class="line-prods">
          <view
            v-for="(prodItem, prodIndex) in item.spuList"
            :key="prodIndex"
            class="item"
            @tap="onToProdDetail(prodItem.spuId,prodItem.spuType)"
          >
            <view class="img">
              <img-show
                :src="prodItem.mainImgUrl"
                img-mode="aspectFit"
              />
            </view>
            <view class="text-box">
              <view class="name">
                {{ prodItem.spuName }}
              </view>
              <view class="sku">
                {{ prodItem.sellingPoint }}
              </view>
              <view class="price-box">
                <view
                  v-if="prodItem.spuType === 3"
                  class="price"
                >
                  <view class="big">
                    {{ prodItem.scoreFee }}积分
                  </view>
                  <view class="price-fu">
                    <view
                      v-if="prodItem.priceFee"
                      class="symbol"
                    >
                      +￥
                    </view>
                    <view
                      v-if="prodItem.priceFee"
                      class="big"
                    >
                      {{ wxs.parsePrice(prodItem.priceFee)[0] }}
                    </view>
                    <view
                      v-if="prodItem.priceFee"
                      class="symbol"
                    >
                      .{{ wxs.parsePrice(prodItem.priceFee)[1] }}
                    </view>
                  </view>
                </view>
                <view
                  v-else
                  class="price"
                >
                  <view class="symbol">
                    ￥
                  </view>
                  <view class="big">
                    {{ wxs.parsePrice(prodItem.priceFee)[0] }}
                  </view>
                  <view class="symbol">
                    .{{ wxs.parsePrice(prodItem.priceFee)[1] }}
                  </view>
                </view>
                <view
                  class="btn"
                  @tap.stop="onShowPopup(prodItem.spuBrowseLogId)"
                >
                  删除足迹
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 取消收藏确认弹窗 -->
      <confirm-pop
        :show-pop="isShowPopup"
        :pop-content="popContent"
        @handle-pop-cancel="onPopCancel"
        @handle-pop-confirm="onPopConfirm"
      />
    </view>
  </z-paging>
</template>
<script setup>
const wxs = number()

const popContent = reactive({
  title: '是否确认删除该浏览记录',
  content: '商品浏览记录删除将不容易被找到哦~'
})

// 获取商品游览记录列表
const pagingRef = ref(null)
const browseLogList = ref([])
const browseLogData = ref([]) // 按时间分割后的商品游览记录列表
const onGetBrowseLogList = (pageNum, pageSize) => {
  http.request({
    url: '/mall4cloud_product/spu_browse_log/page',
    method: 'GET',
    data: {
      pageNum,
      pageSize
    }
  }).then(res => {
    const recordList = res.list
    // 如果当前页码小于总页数并且当前页码的数据不满请求的条数，则补充空数据
    if (pageNum < res.pages && +pageSize !== res.list.length) {
      const len = pageSize - recordList.length
      for (let i = 0; i < len; i++) {
        recordList.push(null)
      }
    }
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(recordList)
  })
}

const changeData = (list) => {
  if (list.length) {
    browseLogData.value = onConvertBrowseLogList(list)
  } else {
    browseLogData.value = []
  }
}

/**
 * 商品游览记录按时间来划分商品列表
 * 格式:[{time:time1,spuList:[]}, {time:time2,spuList:[]}]
 * @param {Array} list 商品列表
 */
const onConvertBrowseLogList = (list) => {
  let currentTime = list[0]?.browseTime
  let tempSpuList = []
  const temBrowseLogData = []
  for (let i = 0; i < list.length; i++) {
    if (!list[i]) {
      continue
    }
    if (currentTime === list[i].browseTime) {
      tempSpuList.push(list[i])
      if ((i + 1) === list.length) {
        const browseLogItem = {
          time: list[i].browseTime,
          spuList: tempSpuList
        }
        temBrowseLogData.push(browseLogItem)
      }
    } else {
      currentTime = list[i].browseTime
      const browseLogItem = {
        time: list[i - 1].browseTime,
        spuList: tempSpuList
      }
      temBrowseLogData.push(browseLogItem)
      tempSpuList = []
      tempSpuList.push(list[i])
      if ((i + 1) === list.length) {
        const browseLogItem = {
          time: list[i].browseTime,
          spuList: tempSpuList
        }
        temBrowseLogData.push(browseLogItem)
      }
    }
  }
  return temBrowseLogData
}

// 删除游览记录
const onDeleteBrowseLog = (spuBrowseLogIds) => {
  http.request({
    url: '/mall4cloud_product/spu_browse_log',
    method: 'PUT',
    data: {
      spuBrowseLogIds
    }
  }).then(() => {
    pagingRef.value.reload()
  })
}

// 弹出弹窗
let selectedId = ''
const isShowPopup = ref(false) // 弹窗显隐
const onShowPopup = (spuBrowseLogId) => {
  selectedId = spuBrowseLogId
  isShowPopup.value = true
}

// 弹窗确认
const onPopConfirm = () => {
  isShowPopup.value = false
  const selectedIds = []
  selectedIds.push(selectedId)
  onDeleteBrowseLog(selectedIds)
}

// 弹窗取消
const onPopCancel = () => {
  isShowPopup.value = false
}

// 跳转到商品详情页
const onToProdDetail = (spuId, spuType) => {
  const url = spuType === 3 ? `/package-activities/pages/score-prod-detail/score-prod-detail?spuId=${spuId}` : `/pages/detail/detail?spuId=${spuId}`
  uni.navigateTo({
    url
  })
}

</script>

<style lang="scss" scoped>
@use "./history.scss";
</style>
