<script setup lang="ts" name="TripList">
import { ref, h, reactive } from 'vue'
// import { useRouter } from 'vue-router'
// import { Field, showConfirmDialog, showSuccessToast } from 'vant'
import { useUserStore } from '@/store/modules/user'
import { handoverList, confirmWorkHandoverItemConfirm, transferWorkHandoverItemConfirm } from '@/api/personnel/handoverConfirm'
import { revokeProcess } from '@/api/flowEngine/flowInterface'
import { useDict } from '../../common/utils/dict'
import PullList from '../../components/List/PullList.vue'
import HandoverConfirmListItem from './modules/HandoverConfirmListItem.vue'
import EmployeesSelect from '../../components/Select/EmployeesSelect.vue'

const { audit_status, recipient_confirm_status, recipient_confirm_type } =
  useDict('audit_status', 'recipient_confirm_status', 'recipient_confirm_type')
// console.log(audit_status)
const userStore = useUserStore()
// const router = useRouter()

const pullListRef = ref<InstanceType<typeof PullList>>()
const inputValue = ref('')
const currentRow = ref<any>(null)
const queryParams = ref({
  pageNum: 1,
  pageSize: 5,
  staffName: ''
  // employeesCode: userInfo.value.userCode
})
const show = reactive({
  employees: false
})

// 请求方法，传入PullList组件，需返回{rows: [], total: number}
function onRequest(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {
  return handoverList(query)
}

// 出差详情
// function onClickItem(item) {
//   // 已退回 和 已撤回
//   if (['5', '6'].includes(item.auditStatus)) {
//     router.push({ path: '/personnel/resignation/add', query: { id: item.id } })
//     return
//   }
//   router.push({ path: '/personnel/resignation/detail', query: { id: item.id, instanceId: item.instanceId } })
// }


// 点击转交
function onClickTransfer(item) {
  currentRow.value = item
  show.employees = true
}

// 确认转交
function onConfirmTransfer(data) {
  transferWorkHandoverItemConfirm({
    id: currentRow.value?.id,
    agentUserId: data.employeesCode,
    agentUser: data.name
  }).then(response => {
    showSuccessToast('转交成功')
    pullListRef.value?.refresh()
  }).finally(() => {
    show.employees = false
  })
}

// 确认交接

 async function onConfirm(item: any) {
  try {
    const res = await uni.showModal({
      title: '确认该工作项已交接？',
      content: '请输入意见',
      editable: true,
      placeholderText: '请输入意见',
      confirmText: '确认',
      cancelText: '取消'
    })
    
    if (res.confirm) {
      await confirmWorkHandoverItemConfirm({
        id: item.id,
        suggestion: res.content
      })
      
      uni.showToast({
        title: '确认交接成功',
        icon: 'success'
      })
      
      // 刷新列表
      pullListRef.value?.refresh()
    }
  } catch (error) {
    console.error('确认交接失败:', error)
  }
}


function handleSearchChange(e) {
  queryParams.value.staffName = e.detail // 手动更新数据:ml-citation{ref="2,8" data="citationList"}
}

function onSearch() {

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

<template>


  <div class="query-wrap">
      <div class="search-pad">
        <van-search
          :value="queryParams.staffName"
          @change="handleSearchChange"
          shape="round"
          placeholder="请输入搜索关键词"
          useActionSlot
          @search="onSearch"
          @clear="onSearch">
          <template #action>
            <div class="search-btn" @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <PullList style="border: thin solid red;" ref="pullListRef" v-model:query-string="queryParams" :isFixed="false" zHeight="80vh"  :request-method="onRequest">
      <template #default="{ item, index }">
        <div style="padding: 0 30rpx;" >
          <HandoverConfirmListItem
            :item="item"
            :user-info="userStore"
            :audit_status="audit_status"
            :recipient_confirm_status="recipient_confirm_status"
            :recipient_confirm_type="recipient_confirm_type"
            @transfer="onClickTransfer(item)"
            @confirm="onConfirm" />
        </div>
      </template>

    </PullList>
    <EmployeesSelect v-model="show.employees" @confirm="onConfirmTransfer" />

</template>

<style lang="less" scoped>
.search-pad {
  padding: 30rpx;
  box-sizing: border-box;
}
:deep(.van-search) {
  position: relative;
  z-index: 1;
  padding: 20rpx;
  // min-height: 4.4rem;
  border-radius:24rpx;
  box-shadow: 0 4rpx 40rpx rgba(64, 103, 251, 0.14);
  // overflow: hidden;
}
.search-btn {
  padding: 0 16.6rpx;
}
</style>
