<template>
  <view class="page-content">
    <!-- #ifdef MP-WEIXIN -->
    <uni-nav-bar statusBar :border="false" leftIcon="left" fixed title="订单列表" backgroundColor="#f5f7f5"
      @clickLeft="navBack" />
    <!-- #endif -->
    <!--#ifdef  MP-ALIPAY  -->
    <uni-nav-bar statusBar :border="false" title="订单列表" fixed backgroundColor="#f5f7f5" @clickLeft="navBack" />
    <!-- #endif -->
    <view class="order-search-content">
      <view class="order-search">
        <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
        <input type="text" v-model="vdata.unionOrderId" confirm-type="search" @confirm="search"
          placeholder="请输入订单号查询" />
      </view>
      <image class="screen" src="/static/iconImg/icon-screen.svg" mode="scaleToFill" @tap="refScreen.open" />
    </view>
    <!-- 卡片部分 -->
    <block v-for="v in vdata.orderList" :key="v.payOrderId">
      <OrderCard v-bind="v" @click="toDetails(v.payOrderId)" />
    </block>
    <view class="list-null" v-if="!vdata.hasNext">暂无更多数据</view>
  </view>
  <OrderScreen ref="refScreen" @confirm="search" />
</template>

<script setup>
import { provide, reactive, ref } from 'vue'
import { onLoad, onReachBottom, onUnload } from '@dcloudio/uni-app'
import { req, API_URL_PAY_ORDER_LIST } from '@/http/apiManager.js'
import OrderScreen from './components/OrderScreen'
import OrderCard from './components/OrderCard.vue'
const refScreen = ref(null)
const vdata = reactive({
  orderList: [],
  unionOrderId: '',
  hasNext: true,
})
const params = { pageSize: 10, pageNumber: 1, queryDateRange: '' }
provide('params', params)
const getList = () => {
  if (!vdata.hasNext) return
  req.list(API_URL_PAY_ORDER_LIST, params).then(({ bizData }) => {
    vdata.orderList.push(...bizData.records)
    vdata.hasNext = bizData.hasNext
  })
}
getList()
const search = () => {
  params.unionOrderId = vdata.unionOrderId
  vdata.orderList = []
  params.pageNumber = 1
  vdata.hasNext = true
  getList()
}
onReachBottom(() => {
  params.pageNumber += 1
  getList()
})
// 跳转详情页
const toDetails = (orderId) => uni.navigateTo({ url: '/pages/order/orderDetails?orderId=' + orderId })
uni.$on('ORDER_LIST', (data) => {
  console.log('刷新列表');
  vdata.orderList = []
  params.pageNumber = 1
  getList()
})
const navBack = () => {
  uni.navigateBack()
}
onUnload(() => {
  uni.$off('ORDER_LIST')
})
</script>

<style lang="scss" scoped>
.page-content {
  padding: 0.1rpx;
  min-height: calc(100vh - 5rpx);
  background-color: #f5f7f5;

  .order-search-content {
    display: flex;
    align-items: center;

    .order-search {
      flex: 1;
      display: flex;
      align-items: center;
      margin: 30rpx;
      margin-bottom: 0;
      height: 80rpx;
      background-color: #fff;
      border-radius: 15rpx;

      image {
        margin-left: 20rpx;
        width: 35rpx;
        height: 35rpx;
      }

      input {
        width: 100%;
        height: 100%;
        font-size: 22rpx;
        margin-left: 20rpx;
      }
    }

    .screen {
      margin-right: 30rpx;
      transform: translateY(15rpx);
      width: 50rpx;
      height: 50rpx;
    }
  }
}

.list-null {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  margin: 30rpx 0;
  padding: 0 30rpx;
  font-size: 24rpx;
  font-weight: 600;

  &::after,
  &::before {
    content: "";
    display: block;
    width: 35%;
    height: 2rpx;
    background-color: #ededed;
  }
}
</style>
