<script setup lang="ts" name="LeaveList">
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 { listEmployeesLifeMaterial, apply, delEmployeesLifeMaterial } from '@/api/checkIn/index'
import PullList from '@/component/List/PullList.vue'
import ListItem from './modules/ListItem.vue'

const userStore = useUserStore()
const router = useRouter()

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

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


function onDetail(item) {
  router.push({ path: '/checkIn/apply/applyform', query: { id: item.id, type: 'detail' } })
}

// 点击添加
function onClickAdd() {
  router.push({ path: '/checkIn/apply/applyform', query: { type: 'add' } })
}


function onUpdate(item) {
  router.push({ path: '/checkIn/apply/applyform', query: { id: item.id, type: 'update' } })
}
function onApply(item) {
  showConfirmDialog({
    message: '是否确认提交审核？',
    beforeClose: (action) => {
      if (action !== 'confirm') return true
      return new Promise((resolve, reject) => {
        apply({ id: item.id }).then(() => {
          resolve(true)
          showSuccessToast('提交成功')
          pullListRef.value?.refresh()
        }).catch(() => {
          reject(false)
        })
      })
    }
  })

}


function onDelete(item) {
  showConfirmDialog({
    message: '确认删除吗？',
    beforeClose: (action) => {
      if (action !== 'confirm') return true
      return new Promise((resolve, reject) => {
        delEmployeesLifeMaterial([item.id]).then(() => {
          resolve(true)
          showSuccessToast('删除成功')
          pullListRef.value?.refresh()
        }).catch(() => {
          reject(false)
        })
      })
    }
  })
}


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

<template>
  <div class="container full">
    <!-- <div class="input-box"> -->
    <!-- <van-search
      v-model="queryParams.reason"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @clear="onSearch"
      @search="onSearch">
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search> -->
    <!-- </div> -->
    <PullList ref="pullListRef" v-model:query-string="queryParams" :request-method="onRequest">
      <template #default="{ item, index }">
        <ListItem
          :item="item"
          :user-info="userStore"
          @onDetail="onDetail"
          @onUpdate="onUpdate"
          @onDelete="onDelete"
          @onApply="onApply"/>
      </template>
    </PullList>
    <van-floating-bubble
      axis="xy"
      icon="plus"
      magnetic="x"
      @click="onClickAdd"
    />
  </div>
</template>

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