<template>
  <page-meta :page-style="`overflow:${pageScrollFlag ? 'visible' : 'hidden'}`"></page-meta>
  <view class="global-wrapper">
    <view class="mch-header">
      <JHeaderTitle title="交易记录" bgColor="#f2f2f2" />
      <JSearchInput
        @search="searchList"
        @resetSearch="searchList($event, 'reset')"
        ref="search"
        @screen="scr.open(statePay)"
        place="搜索订单号"
        :screen="true"
      />
      <view class="tips-wrapper" v-if="statePay.length > 0">
        <view class="tips-list">
          <block v-for="(v, i) in statePay" :key="i">
            <view class="tips-item" v-if="v.text != '全部'"
              >{{ v.text }}
              <image @tap="delSearchTitle(i)" src="/static/iconImg/icon-deleted-order.svg" mode="scaleToFill"
            /></view>
          </block>
        </view>
        <view class="tips-right" @tap="clearScr">清空筛选</view>
      </view>
    </view>
    <!-- 列表部分 -->
    <view class="order-list">
      <block v-for="v in useDataResult.dataList" :key="v.payOrderId">
        <OrderCard v-bind="v" @tap="toDetail(v.payOrderId)" />
      </block>
      <jeepayListNull :isShow="true" :list="useDataResult.dataList.length" />
    </view>
    <screening ref="scr" @confirm="confirmGetList" @onOpen="pageScrollFlag = false" @onClose="pageScrollFlag = true" />
  </view>
</template>

<script setup>
import { reactive, ref } from "vue"
import { onBackPress, onShow } from "@dcloudio/uni-app"
import { $getOrderList } from "@/http/apiManager.js" // 导入获取数据接口
import useGetList from "@/hooks/useList.js"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue" //自定义导航栏
import JSearchInput from "@/components/newComponents/JSearchInput/JSearchInput.vue" //自定义搜索框
import jeepayListNull from "@/components/jeepayListNull/jeepayListNull" //最后一条数据提示
import Screening from "./components/Screening"
import OrderCard from "./components/OrderCard"
const OrderId = ref(undefined)
const { useDataResult, getList } = useGetList({
  requestFun: $getOrderList,
  onshow: false,
  params: {
    unionOrderId: "",
    unionOrderState: "5,2",
    unionWayCodeType: "",
    queryDateRange: "", //时间
    mchNo: "", //商户Id
    agentNo: "",
  },
})
const statePay = ref([])
const pageScrollFlag = ref(true)
const filterState = (val) => {
  const list = []
  statePay.value.forEach((v) => {
    if (v.type === val) {
      list.push(v.value)
    }
  })
  return list.join(",")
}
const scr = ref(null)
onShow(() => {
  if (OrderId.value) {
    getList({ unionOrderId: OrderId.value })
  }
})
const delSearchTitle = (i) => {
  statePay.value.splice(i, 1)
  getList({
    unionOrderState: filterState(0),
    queryDateRange: statePay.value.find((v) => v.type == 1)?.value || "",
    unionWayCodeType: filterState(2),
  })
}
const clearScr = () => {
  statePay.value = []
  getList({
    pageNumber: 1,
    unionOrderId: "",
    unionOrderState: "1,2",
    unionWayCodeType: "",
    queryDateRange: "", //时间
    mchNo: "", //商户Id
    agentNo: "",
  })
}
const searchList = (data, val) => {
  if (val == "reset") {
    data = ""
    OrderId.value = undefined
  }
  OrderId.value = data
  getList({ unionOrderId: data })
}
// 跳转订单详情页
const toDetail = (payOrderId) => {
  uni.navigateTo({
    url: "./orderDetail?payOrderId=" + payOrderId,
  })
}
const confirmGetList = (val) => {
  statePay.value = val.data
  getList({
    unionOrderState: filterState(0) || "",
    queryDateRange: statePay.value.find((v) => v.type == 1)?.value || "",
    unionWayCodeType: filterState(2) || "",
    mchNo: val.mch || "",
    agentNo: val.agent || "",
  })
}
</script>

<style lang="scss" scoped>
.mch-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: #f2f2f2;
  .tips-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1rpx solid rgba(0, 0, 0, 0.1);
    font-size: 28rpx;
    .tips-list {
      flex: 1;
      display: flex;
      padding-left: 20rpx;
      overflow-x: scroll;
      .tips-item {
        padding: 20rpx;
        margin: 0 10rpx;
        white-space: nowrap;
        border-radius: 16rpx;
        background: rgba(0, 0, 0, 0.05);
        image {
          width: 36rpx;
          height: 36rpx;
          vertical-align: bottom;
          margin-left: 15rpx;
        }
      }
    }
    .tips-right {
      padding: 33rpx 20rpx;
      color: #f23051;
      border-left: 1rpx solid rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
