<script setup lang="ts" name="EhsSafeInspectReportList">
import { ref, reactive, computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { showSuccessToast, showConfirmDialog, FormInstance } from 'vant'
import { useRouter } from 'vue-router'
import { listEmployeesLifeMaterial } from '@/api/checkIn/index'
import { useUserStore } from '@/store/modules/user'
import PullList from '@/component/List/PullList.vue'
import ListItem from './modules/ListItem.vue'

import {
  securityInspectDangerMobileList, // 列表
  transferEdit, // 转派
  acceptEdit, // 隐患验收
  transferUrgent // 催办
} from '@/api/security/InspectDanger'
import { useDict } from '@/common/utils/dict'

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

const { danger_status } = useDict('danger_status')

const { userInfo } = storeToRefs(userStore)

const queryParams2 = ref({
  pageNum: 1,
  pageSize: 5,
  auditStatus: '2',
  staffNumber: userInfo.value.userCode
})
const queryParams3 = ref({
  pageNum: 1,
  pageSize: 5,
  auditStatus: '3',
  staffNumber: userInfo.value.userCode
})


const pullList2Ref = ref<InstanceType<typeof PullList>>()
const pullList3Ref = ref<InstanceType<typeof PullList>>()

const activeTab = ref('2')

const formTranserRef = ref<FormInstance>()
const formTransfer = ref({
  id: '', // 主键id
  transferUserId: '', // 用户id
  transferUserName: '', // 用户名
  transferRemark: '' // 备注
})

const show = reactive({
  transfer: false,
  checkPeople: false
})


function onRequest2(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {
  return listEmployeesLifeMaterial(query)
}
function onRequest3(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {
  return listEmployeesLifeMaterial(query)
}


function onSearch(status) {
  console.log('onSearch', status)
  switch (status) {

    case '2':
      pullList2Ref.value?.refresh()
      break
    case '3':
      pullList3Ref.value?.refresh()
      break

    default: break
  }
}
function refreshAll() {

  pullList2Ref.value?.refresh()
  pullList3Ref.value?.refresh()

}


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

// 点击添加
function onConfirm(item) {
  router.push({ path: '/checkIn/confirm/confirmForm', query: { id: item.id, type: 'confirm' } })
}

</script>

<template>
  <div class="container full">
    <van-tabs v-model="activeTab">

      <van-tab name="2" title="待处理">

        <PullList ref="pullList2Ref" v-model:query-string="queryParams2" :request-method="onRequest2">
          <template #default="{ item, index }">
            <ListItem
              :item="item"
              :user-info="userStore"
              @onDetail="onDetail"
              @onConfirm="onConfirm"/>
          </template>
        </PullList>
      </van-tab>
      <van-tab name="3" title="已处理">

        <PullList ref="pullList3Ref" v-model:query-string="queryParams3" :request-method="onRequest3">
          <template #default="{ item, index }">
            <ListItem
              :item="item"
              :user-info="userStore"
              @onDetail="onDetail"
              @onConfirm="onConfirm"/>
          </template>
        </PullList>
      </van-tab>

    </van-tabs>

  </div>
</template>

<style lang="less" scoped>
.container {
  padding: 0;
}
.form-transfer {
  :deep(.van-cell__value) {
    color: #333;
  }
}

// :deep(.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;
// }

:deep(.van-tabs) {
  display: flex;
  flex-direction: column;
  height: 100%;
  .van-tabs__content {
    flex: 1;
    overflow: auto;
  }
}
</style>
