<script setup lang="ts" name="LeaveCloseListItem">
import { ref, reactive, computed, onMounted } from 'vue'

const emit = defineEmits<{
  'on-detail': [item: any]
}>()
const props = defineProps<{
  list: any
  leaveType: string
}>()

function onClickItem(item) {
  emit('on-detail', item)
}
</script>

<template>
  <div class="list">
    <!-- <template v-for="(item, index) in props.list" :key="index">
      <div class="list-item" @click="onClickItem(item)">
        <div class="list-item-title">
          <div class="list-item-title-label">申请时间：</div>
          <div class="list-item-title-value">{{ item.applyTime }}</div>
        </div>
        <div class="list-item-title">
          <div class="list-item-title-label">销假时间：</div>
          <div class="list-item-title-value">{{ item.backTime }}</div>
        </div>
        <div v-if="['8', '9'].includes(props.leaveType)" class="list-item-title">
          <div class="list-item-title-label">提前返回时长(小时)：</div>
          <div class="list-item-title-value">{{ item.differHour }}</div>
        </div>
        <div class="list-item-remark">
          <div class="list-item-remark-label">备注：</div>
          <div class="list-item-remark-content">{{ item.remark }}</div>
        </div>
      </div>
    </template> -->

    <div class="list-item" v-for="(item, index) in props.list" :key="index" @click="onClickItem(item)">
        <van-cell-group >
          <van-cell title="申请时间：" :value="item.applyTime" />
          <van-cell title="申请时间：" :value="item.backTime" />
          <van-cell title="提前返回天数：" :value="item.differHour" />
          <van-cell title="备注：" :value="item.remark" />
        </van-cell-group>
    </div>
  




    <van-empty v-if="!props.list?.length" description="暂无数据" />
  </div>
</template>

<style lang="less" scoped>
.list-item{
  margin: 40rpx;
  margin-top: 50rpx;
  
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


:deep(.van-cell) {
  .van-cell__title {
    margin-right: 1rem;
    flex: none;
  }
  .van-cell__value {
    display: flex;
    justify-content: flex-end;
    color: var(--van-cell-text-color);
    overflow: hidden;
    span {
      text-align: justify;
    }
  }
}
</style>
