<script setup lang="ts" name="TripList">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
// import { useRouter } from 'vue-router'
// import { showConfirmDialog, showSuccessToast } from 'vant'
import { useUserStore } from '@/store/modules/user'
import { resignationList } from '@/api/personnel/resignation'
import { revokeProcess } from '@/api/flowEngine/flowInterface'
import { useDict } from '../../common/utils/dict'
import PullList from '../../components/List/PullList.vue'
import ResignationListItem from './modules/ResignationListItem.vue'
import customFab from '@/components/customFab.vue'
const { audit_status } = useDict('audit_status')
// console.log(audit_status)
const userStore = useUserStore()
// const router = useRouter()

const { userInfo } = storeToRefs(userStore)
const pullListRef = ref<InstanceType<typeof PullList>>()
const searchValue = ref('')
const queryParams = ref({
  pageNum: 1,
  pageSize: 5,
  staffName: '',
  staffNumber: userInfo.value.userCode
  // employeesCode: userInfo.value.userCode
})

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

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

// 点击添加
function onClickAdd() {
  // router.push('/personnel/resignation/add')
  uni.navigateTo({
    url:'/personnel/resignation/add',
  })
}

function onSearch() {
  pullListRef.value?.refresh()
}

// 撤办
function onRevoke(item) {
  console.log(item)
  uni.showModal({
    title: '撤办',
    content: `离职原因：${item.departureReason}，确认撤办吗？`,
    success: (res) => {
      if (res.confirm) {
        return new Promise((resolve, reject) => {
          revokeProcess({
            instanceId: item.instanceId
          }).then(() => {
              uni.showToast({
                title: '撤办成功',
                icon: 'success'
              })
              setTimeout(() => {
                resolve(true)
                pullListRef.value?.refresh()
              }, 500)
          
          }).catch(() => {
            reject(false)
          })
        })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}

function handleSearchChange(e) {
  queryParams.value.staffName = e.detail // 手动更新数据:ml-citation{ref="2,8" data="citationList"}
}
</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 ref="pullListRef" v-model:query-string="queryParams" :request-method="onRequest">
      <template #default="{ item, index }">
         <div style="padding: 0 30rpx;" >
            <ResignationListItem
            :item="item"
            :user-info="userStore"
            :audit_status="audit_status"
            @revoke="onRevoke"
            @tap="onClickItem(item)" />
         </div>
      </template>
    </PullList>

    <customFab  icon @click="onClickAdd" />
</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>
