<script setup lang="ts" name="ApproveListSend">
import { ref, inject } from 'vue'
// import PullList from '@/component/List/PullList.vue'
import PullList from '../../../components/List/PullList.vue'
import ApproveCard from './ApproveCard.vue'
import { querySendList } from '../../../api/flowEngine/flowInterface'

const emit = defineEmits<{
  'change-total': [val: string | number]
}>()
const pullListRef = ref<InstanceType<typeof PullList>>()
const queryParams = ref({
  pageNum: 1,
  pageSize: 5,
  businessName: '', // 流程名称
  processGroup: '', // 所属分组
  state: '' // 审核状态
})

// 请求方法，传入PullList组件，需返回{rows: [], total: number}
function onRequest(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {
  return new Promise((resolve, reject) => {
    querySendList(query).then((res:any) => {
      emit('change-total', res.total)
      resolve({ rows: res.rows, total: res.total })
    })
  })
}
function handleSearchChange(e) {
    queryParams.value.businessName = e.detail // 手动更新数据:ml-citation{ref="2,8" data="citationList"}
  }
function onSearch() {

  pullListRef.value?.refresh()
}
</script>

<template>
  <div class="query-wrap">
    <form class="search-from" action="/">
      <van-search
        :value="queryParams.businessName"
        @change="handleSearchChange"
        shape="round"
        placeholder="请输入搜索关键词"
        useActionSlot
        @search="onSearch"
        @clear="onSearch">
        <template #action>
          <div class="search-btn" @click="onSearch">搜索</div>
        </template>
      </van-search>
    </form>
    <!-- <van-dropdown-menu class="menu" ref="menuRef">
      <van-dropdown-item ref="itemRef" v-model="queryParams.processGroup" :title="processGroup" :options="optionsProcessGroup" @change="onSearch" />
    </van-dropdown-menu> -->
  </div>

  <div class="container">
    <PullList ref="pullListRef" v-model:query-string="queryParams" :request-method="onRequest">
      <template #default="{ item, index }">
        <!-- <ApproveCard :approveCardData="item" @handle-page-approve-detail="handlePageApproveDetail(item)"/> -->
        <ApproveCard :approveCardData="item" type="3" />
      </template>
    </PullList>
  </div>
</template>

<style lang="less" scoped>
.search-btn {
  padding: 0 16.6rpx;
}</style>
