<template>
  <JeepayBackground>
    <JeepayCustomNavbar>
      <view class="store-name" @tap="selectedStore">{{ vdata.store.storeName  }}<image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" /></view>
    </JeepayCustomNavbar>
    <view class="input-wrapper">
      <view class="input-main" @tap="go.toSearchPage('payOrder')">
        <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
        <input type="text" placeholder="搜索订单号" disabled placeholder-style="color:rgba(0, 0, 0, 0.35)" />
      </view>
      <view class="screen-wrapper flex-center" @tap="screen.open()">
        <image src="/static/iconImg/icon-screen.svg" mode="scaleToFill" />
        筛选
      </view>
    </view>
    <JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
      <template #tableBody="{ record }">
        <PayOrderRender :record="record" />
      </template>
    </JeepayTableList>
    <OrderScreen ref="screen" />
  </JeepayBackground>

  <!-- 选择门店 -->
  <JeepayBizinfoSelect :isShowAllBiz="true" ref="jeepayPopupListSelect" />
</template>

<script setup>
import { reactive, ref, computed, provide } from 'vue'
import { onReachBottom, onUnload } from '@dcloudio/uni-app'
import go from '@/commons/utils/go.js'
import { stateList } from './components/stateList.js'
import OrderScreen from './components/OrderScreen.vue'
import PayOrderRender from '@/pages/list/render/PayOrderRender.vue'
import { req, reqLoad, API_URL_PAY_ORDER_LIST, API_URL_MCH_STORE_LIST } from '@/http/apiManager.js'
import emit from '@/commons/utils/emit.js'

onReachBottom(() => {})

// 监听 更新事件
onUnload(() => uni.$off(emit.ENAME_REF_PAY_ORDER))
uni.$on(emit.ENAME_REF_PAY_ORDER, function (data) {
  jeepayTableListRef.value.refTable(true)
})

const screen = ref(null) //获取抽屉实例
const jeepayTableListRef = ref()
// 获取门店选择弹窗实例
const jeepayPopupListSelect = ref(null)
const vdata = reactive({
  // 搜索对象 默认查询条件 今天  成功和已退款
  searchData: {
    queryDateRange: 'today',
    unionOrderState: '2,5',
  },
  store: {
    storeId: '',
    storeName: '全部门店',
  },
})

// 向子组件注入： 搜索条件
provide(
  'searchData',
  computed(() => vdata.searchData)
)

provide('refTableFunc', refTableFunc)
const toDetail = () => uni.navigateTo({ url: '/pages/order/orderDetail' })

// 请求
function reqTableDataFunc(params) {
  return reqLoad.list(API_URL_PAY_ORDER_LIST, params)
}
// 选择门店
const selectedStore = () => {
  jeepayPopupListSelect.value.open(vdata.store).then((selected) => {
    if (selected) {
      vdata.store = selected
      vdata.searchData.storeId = selected.storeId
      refTableFunc()
    }
  })
}
// 点击筛选条件的确定按钮
function refTableFunc() {
  jeepayTableListRef.value.refTable(true)
}
</script>

<style lang="scss" scoped>
.store-name {
  display: flex;
  align-items: center;
  font-size: 33rpx;
  font-weight: 500;
  image {
    width: 44rpx;
    height: 44rpx;
    margin-left: 5rpx;
    transform: rotate(180deg);
  }
}
.input-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  padding-top: 22rpx;
  height: 110rpx;
  background-color: $J-bg-ff;
  .input-main {
    flex: 1;
    display: flex;
    align-items: center;
    height: 70rpx;
    background: $J-bg-f5;
    border-radius: $J-b-r12;
    image {
      padding: 22rpx;
      width: 26rpx;
      height: 26rpx;
    }
    input {
      flex: 1;
      font-size: 27rpx;
    }
  }
  .screen-wrapper {
    margin: 0 12rpx 0 20rpx;
    font-size: 32rpx;
    color: $J-color-t99;
    image {
      width: 28rpx;
      height: 26rpx;
      padding: 0 21rpx;
    }
  }
}
</style>
