<script setup lang="ts" name="CardSign">
import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue'
// import { showConfirmDialog, showSuccessToast } from 'vant'
import { getRegistrationCardList } from '@/api/cardSigning'
import { revokeProcess } from '@/api/flowEngine/flowInterface'
import useUserStore from '@/store/modules/user'
// import { useRouter, useRoute } from 'vue-router'
import { useDict } from '../../common/utils/dict'
import { parseTime } from '../../common/utils/ruoyi'
import PullList from '../../components/List/PullList.vue'

const { audit_status } = useDict('audit_status')

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

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

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

// 签卡详情
function onClickItem(item) {
  // 已退回 和 已撤回
  if (['5', '6'].includes(item.auditStatus)) {
    // router.push({ path: '/attendance/cardSign/add', query: { data: JSON.stringify(item) } })
    uni.navigateTo({
      url:'/attendance/cardSign/add'+'?data='+JSON.stringify(item)
    })
    return
  }
  // router.push({ path: '/attendance/cardSign/detail', query: { id: item.id, type: 2, instanceId: item.instanceId } })
  uni.navigateTo({
      url:'/attendance/cardSign/detail'+'?id='+item.id + '&type=' + 2 + '&instanceId=' + item.instanceId
    })
}

// 当日外出撤办
function onRevoke(item) {
  console.log(item)
  uni.showModal({
      title: '撤办',
      content: `签卡理由：${item.signReason}，确认撤办吗？`,
      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('用户点击取消')
        }
      }
    })
}

</script>

<template>
  <div class="container full">
    <div class="listBox">
      <PullList ref="pullListRef" v-model:query-string="queryParams" :request-method="onRequest">
        <template #default="{ item, index }">
          <div class="liBox" @click="onClickItem(item)">
            <div class="title">
              <div class="name">{{ item.userName }}提交的签卡申请</div>
              <div class="time">{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</div>
            </div>
            <div class="cardSignTime">签卡时间：{{ item.signTime }}</div>
            <div class="cardSignTime">签卡理由：{{ item.signReason }}</div>
            <van-divider style="margin: 0.8rem 0;" />
            <div class="bottom">
              <!-- <div class="info">
              <div class="icon">{{ (item.userName).slice(0, 1) }}</div>
              <div class="name">由{{ item.userName }}提交</div>
            </div> -->
              <div class="state" :class="`state${item.auditStatus}`">
                <!-- {{ getDictName(getAuditStatusList(), 'dictValue', 'dictLabel', item.auditStatus) }} -->
                <DictTag :options="audit_status" :value="item.auditStatus" />
              </div>
              <van-button
                v-if="item.auditStatus === '2'"
                type="primary"
                size="small"
                beautify
                @tap.stop="onRevoke(item)">撤办</van-button>
            </div>
          </div>
        </template>
      </PullList>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  position: relative;
  min-height: calc(100vh - 60rpx);
  .listBox{
    .liBox{
      margin-bottom: 20rpx;
      padding: 36rpx 30rpx 16rpx;
      // width: calc(100% - 3rem);
      background: #fff;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
      .title{
        margin-bottom: 14rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
          font-size: 32rpx;
          color: #000;
        }
        .time{
          font-size: 24rpx;
          color: rgba(37, 37, 37, .4);
        }
      }
      .cardSignTime{
        margin-bottom: 4rpx;
        font-size: 26rpx;
        color: rgba(37, 37, 37, .4);
      }
      .cardSignTime:last-child{
        margin-bottom: 0;
      }
      .bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info{
          display: flex;
          flex: 1;
          align-items: center;
          .icon{
            margin-right: 10rpx;
            width: 5.6rpx;
            height: 5.6rpx;
            background: #3991ff;
            border-radius: 10rpx;
            text-align: center;
            color: #fff;
            line-height: 5.6rpx;
            font-size: 20rpx;
          }
          .name{
            font-size: 28rpx;
            color: #000;
            font-weight: normal;
          }
        }
        .state{
          font-size: 28rpx;
          font-weight: normal;
        }
        .state1{

        }
        .state2{
          color: rgba(255, 189, 81, 1);
        }
        .state3{
          color: #27ba76;
        }
        .state4,.state5,.state6{
          color: rgba(37, 37, 37, .2);
        }
      }
    }
    .liBox:last-child{
      margin-bottom: 0;
    }
  }
}
</style>