<template>
  <view class="Mall4j container page-write-offs-records">
    <view class="write-offs-records">
      <view
        v-for="logItem in virtualVerifyLogList"
        :key="logItem.id"
        class="write-offs-box"
      >
        <view
          class="tit"
          :class="{'no-border':!(logItem.stationList && logItem.stationList.length>0)}"
          :data-item="logItem"
          @tap="getVirtualVerifyInfo"
        >
          <!-- 已使用：used；已过期：out-of-date -->
          <view
            class="certificate-code"
            :class="[ {'out-of-date':logItem.isExpired},{'used':logItem.isWriteOff===1} ]"
          >
            <view class="write-label">
              券码：
            </view>
            <view :class="writeOffMultipleCount === -1?'':'write-text'">
              {{ logItem.writeOffCode }}
            </view>
          </view>
          <!-- 超过5条数据显示，否则隐藏 -->
          <view
            v-if="logItem.isOverLength"
            class="certificate-code-all"
          >
            全部<span />
          </view>
        </view>
        <view>
          <view
            v-for="stationItem in logItem.stationList"
            :key="stationItem.orderVirutalInfoLogId"
            class="pickup"
          >
            <view class="pickup-name">
              <view class="circle" />
              <text class="txt">
                {{ stationItem.stationName }}
              </text>
            </view>
            <view class="write-offs-date">
              {{ stationItem.createTime }}
            </view>
          </view>
        </view>
        <!-- top：离顶部0，twenty：离顶部20，bottom：离顶部72 -->
        <!-- 已使用 -->
        <image
          v-if="logItem.isWriteOff&&writeOffMultipleCount !== -1"
          class="write-offs-icon"
          :class="[{ 'bottom':logItem.stationList.length>=5 }, { 'twenty': logItem.stationList.length<5&&logItem.stationList.length>0}]"
          src="../../static/images/coupon-used2.png"
        />
        <!-- 已过期 -->
        <image
          v-if="logItem.isExpired"
          class="write-offs-icon"
          :class="[{ 'bottom':logItem.stationList.length>=5 }, { 'twenty': logItem.stationList.length<5&&logItem.stationList.length>0},{ 'top': logItem.stationList.length === 0 }]"
          src="../../static/images/coupon-ot2.png"
        />
      </view>
      <!-- 暂无核销记录 -->
      <view
        v-if="!(virtualVerifyLogList&&virtualVerifyLogList.length) && isLoaded"
        class="no-record"
      >
        <view class="no-record-img">
          <img
            src="@/static/empty-img/order-empty.png"
            alt=""
          >
          <view class="no-record-tip">
            暂无核销记录~
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import moment from 'moment'

let writeOffMultipleCount = null
const virtualVerifyLogList = ref([])

let orderId = ''
/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  if (options.orderId) {
    orderId = options.orderId
    writeOffMultipleCount = options.writeOffMultipleCount
  }
  getOrderVirtualVerify()
})

const isLoaded = ref(false)
const getOrderVirtualVerify = () => {
  isLoaded.value = false
  const params = {
    url: '/mall4cloud_order/my_order/get_by_order_id',
    method: 'GET',
    data: {
      orderId
    }
  }
  http.request(params).then((data) => {
    isLoaded.value = true
    if (!(data && data.orderVirtualInfoList && data.orderVirtualInfoList.length)) {
      return
    }
    let logList = data.orderVirtualInfoList
    // 过滤未核销的数据
    logList = logList.filter(item => item.orderVirutalInfoLogId || item.isExpired)
    const codeList = {}
    // 格式化数据
    logList.forEach(el => {
      if (!codeList[el.writeOffCode]) {
        // 当核销码未被记录，则新建一条记录
        codeList[el.writeOffCode] = {
          shopId: el.shopId,
          stationList: [],
          writeOffCode: el.writeOffCode,
          isWriteOff: el.isWriteOff, // 是否核销 1.已核销 0.未核销
          isExpired: el.isExpired // 核销时间是否过期 1是 0 否
        }
        if (el.orderVirutalInfoLogId) {
          codeList[el.writeOffCode].stationList.push({
            orderVirutalInfoLogId: el.orderVirutalInfoLogId, // 核销记录id
            stationId: el.stationId,
            stationName: el.stationName, // 核销门店名称
            createTime: moment(el.createTime).format('YYYY-MM-DD HH:mm:SS')
          })
        }
      } else {
        // 当该核销码已被记录，则将门店信息添加进去
        codeList[el.writeOffCode].stationList.push({
          orderVirutalInfoLogId: el.orderVirutalInfoLogId,
          stationId: el.stationId,
          stationName: el.stationName,
          createTime: moment(el.createTime).format('YYYY-MM-DD HH:mm:SS')
        })
      }
    })
    // 已使用列表
    const usedCodeList = []
    // 已过期列表
    const expiredList = []
    const unusedCodeList = []
    // 判断是否过期、使用，并按顺序排列
    for (const key in codeList) {
      codeList[key].isOverLength = false
      if (codeList[key].stationList.length > 5) {
        // 超过长度，则只显示前五条记录并显示全部按钮
        codeList[key].stationList = codeList[key].stationList.slice(0, 5)
        codeList[key].isOverLength = true
      }
      if (codeList[key].isWriteOff) {
        // 已使用
        usedCodeList.push(codeList[key])
      } else if (codeList[key].isExpired) {
        // 已过期
        expiredList.push(codeList[key])
      } else {
        unusedCodeList.push(codeList[key])
      }
    }
    virtualVerifyLogList.value = unusedCodeList.concat(usedCodeList, expiredList)
  })
}

const getVirtualVerifyInfo = (e) => {
  if (!e.currentTarget.dataset.item.isOverLength) {
    return
  }
  uni.navigateTo({
    url: '/package-user/pages/write-offs-records-all/write-offs-records-all?writeOffCode=' + e.currentTarget.dataset.item.writeOffCode
  })
}

</script>

<style lang="scss" scoped>
@import "write-offs-records.scss";
</style>
