<script setup lang="ts" name="LeaveListItem">
import { ref, reactive, computed, onMounted } from 'vue'
import { parseTime } from '../../../common/utils/ruoyi'

const emit = defineEmits<{
  'close': [item: any]
  'revoke': [item: any]
}>()
const props = defineProps<{
  item: any
  audit_status: any
  request_leave_type: any
  userInfo: any
}>()

const now = new Date().getTime()

// 已销假状态
const hasLeaved = computed(() => {
  const endTime = new Date(props.item.endTime.replace(/-/g, '/')).getTime() + 1000 * 3600 * 24 * 7
  return now >= endTime || props.item.backAudit === '3'
})

function onClose() {
  emit('close', props.item)
}
function onRevoke() {
  emit('revoke', props.item)
}
</script>

<template>
  <div class="list-item">
    <div class="list-item__top">
      <div class="list-item__top-title">
        <div class="list-item__top-title-firstword">{{ props.userInfo.nickName.substr(0, 1) }}</div>
        <div class="list-item__top-title-label">{{ props.userInfo.nickName }}提交的请假</div>
      </div>
      <div class="list-item__top-time">{{ parseTime(props.item.createTime, '{y}-{m}-{d}') }}</div>
    </div>
    <div class="list-item__address">
      请假类型：<DictTag :tag="false" :options="request_leave_type" :value="props.item.leaveType ?? ''" />
    </div>
    <div class="list-item__date">开始时间：{{ props.item.leaveType === '17' ? props.item.beginTime.slice(0, 10) : props.item.beginTime }}</div>
    <!-- <div class="list-item__date">结束时间：{{ props.item.businessTripStatus === '2' ? props.item.realEndTime : props.item.endTime }}</div> -->
    <div class="list-item__date">结束时间：{{ props.item.leaveType === '17' ? props.item.endTime.slice(0, 10) : props.item.endTime }}</div>
    <div class="list-item__days">请假时长：{{ props.item.duringTime }}小时</div>
    <div class="list-item__detail">
      <div>请假事由：</div>
      <div class="list-item__detail-content">{{ props.item.reason }}</div>
    </div>
    <van-divider style="margin: 0.8rem 0;" />
    <div class="list-item__status">
      <DictTag :options="props.audit_status" :value="props.item.auditStatus" />
      <uv-button
        v-if="props.item.auditStatus === '2'"
        type="primary"
        size="small"
        beautify
        @tap.stop="onRevoke">撤办</uv-button>
      <template v-if="props.item.auditStatus === '3'">
        <uv-button
          v-if="!hasLeaved"
          type="primary"
          size="small"
          beautify
          @tap.stop="onClose">销假</uv-button>
        <div v-else>已销假</div>
      </template>
    </div>
  </div>
</template>

<style lang="less" scoped>
@marginTop: 16rpx; /* 0.8rem × 20 = 16rpx */
.list-item {
  margin-top: 24rpx; /* 1.2rem × 20 = 24rpx */
  background-color: #fff;
  border-radius: 24rpx;
  padding: 32rpx 36rpx 16rpx; /* 1.6rem×20=32rpx | 1.8rem×20=36rpx | @marginTop=16rpx */
  font-size: 28rpx;
  box-shadow:0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
}
.list-item__top {
  display: flex;
  justify-content: space-between;
  align-items: center;  
}
.list-item__top-title {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.list-item__top-title-firstword {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12rpx; /* 保留原rem单位（非用户要求转换的数值） */
  width: 52rpx; /* 2.6rem × 20 = 52rpx */
  height: 52rpx; /* 2.6rem × 20 = 52rpx */
  font-size: 20rpx; /* 保留原rem单位（非用户要求转换的数值） */
  color: #fff;
  background-color: #007aff;
  border-radius: 12rpx; /* 保留原rem单位（非用户要求转换的数值） */
}
.list-item__top-label {
  flex: 1;
  overflow: hidden;
  font-size: 28rpx; /* 1.4rem × 20 = 28rpx */
  color: #333;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list-item__top-time {
  margin-left: 12rpx; /* 保留原rem单位（非用户要求转换的数值） */
  color: #999;
  font-size: 24rpx; /* 1.2rem × 20 = 24rpx */
}
.list-item__address {
  display: flex;
  margin-top: 16rpx; /* @marginTop=16rpx */
  color: #999;
}
.list-item__date {
  margin-top: 16rpx; /* @marginTop=16rpx */
  display: flex;
  justify-content: space-between;
  color: #999;
}
.list-item__date-item {
  white-space: nowrap;
}
.list-item__date-item:last-child {
  margin-left: 20rpx; /* 保留原rem单位（非用户要求转换的数值） */
}
.list-item__days {
  margin-top: 16rpx; /* @marginTop=16rpx */
  color: #999;
}
.list-item__detail {
  margin-top: 16rpx; /* @marginTop=16rpx */
  display: flex;
  color: #999;
}
.list-item__detail-content {
  flex: 1;
  overflow: hidden;
  word-break: break-all;
}
.list-item__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx; /* @marginTop=16rpx */
  position: relative;
}
.list-item__top-title-label{
  flex: 1;
  overflow: hidden;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>
