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

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

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

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

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

// 当日外出撤办
function onRevoke(item) {

  uni.showModal({
      title: '撤办',
      content: `请假事由：${item.reason}，确认撤办吗？`,
      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.location = 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.location"
        @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;" >
          <OutsideListItem
            :item="item"
            :user-info="userStore.userInfo"
            :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>
