<template>
  <div>
      <TopNav 
        navTitle="人员休假" 
        :showRight="true"
        :showLeft="true"
        rightIcon="add-o"
        @clickRight="onClickRight('','add')"
      />
  </div>
  <van-pull-refresh v-model="loadingPull" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text=" "
      @load="onLoad"
      offset="30"
      :immediate-check="false"
    >
      <ul class="rest">
        <li class="rest-item" v-for="(item,index) in datalist.list" :key="index">
          <div class="title">
            <span class="bt">{{item.sqrXm}}的提交请假</span>
            <span class="time">{{item.xtCjsj}}</span>
          </div>
          <div class="item">请假类型：{{setDict(item.qjlx, D_BZ_QXJLX)}}</div>
          <div class="item">开始时间：{{item.kssj}}</div>
          <div class="item">结束时间：{{item.jssj}}</div>
          <div class="item-bottom">
            <span class="pass"></span>
            <span class="edit" @click="onClickRight(item.id,'edit')">修改</span>
          </div>
        </li>
        <van-empty 
          v-if="datalist.list.length<=0"
          description="暂无请假记录" 
          image="default"/>
      </ul>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { ryqjList } from "../../../api/qwzx.js";
import TopNav from "../../../components/topNav.vue";
import router from "../../../router/index.js";
import { getDictList, setDict } from "../../../utils/dict";
import { ref, reactive, onMounted,getCurrentInstance} from "vue";
const { D_BZ_QXJLX } = getDictList("D_BZ_QXJLX"); //字典信息请假类型
const { proxy } = getCurrentInstance();
const user = ref(JSON.parse(window.localStorage.getItem("userInfo")));
const datalist = reactive({
  list:[]
})
const finished = ref(false)
const loading = ref(false)
const loadingPull = ref(false);
const pageCurrent = ref(1)
const pageSize = ref(10)
const total = ref(0)
onMounted(() => {
  getDataList()
});
// 查询列表
function getDataList(){
  let params = {
    pageCurrent:pageCurrent.value,
    pageSize:pageSize.value,
  }
  loading.value = true
  ryqjList(params).then((res)=>{
    if(pageCurrent.value == 1){
      datalist.list = res.records
    }else{
      datalist.list = datalist.list.concat(res.records)
    }
    loadingPull.value = false;
    loading.value = false
    pageCurrent.value = res.pages
    pageSize.value = res.size
    total.value = res.total
  }).catch(()=>{
    loading.value = false
  })
}

//触底加载
function onLoad() {
  if (datalist.list.length == total.value) {
    finished.value = true;
    return;
  }
  pageCurrent.value += 1;
  getDataList();
}

//下拉刷新
function onRefresh() {
  pageCurrent.value = 1;
  finished.value = false
  getDataList();
}
//跳转添加页面
function onClickRight(id,type) {
  router.push({path:"/deptryxjCalendar/addEdit",query:{id,type}});
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.van-pull-refresh {
  margin-top: 16vw;
  .rest{
    width: 100%;
    height: 100%;
    padding: 0 4vw;
    box-sizing: border-box;
    .rest-item{
      border-bottom: 1px solid #e9e9e9;
      padding: 1vw 0;
      box-sizing: border-box;
      .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 6vw;
        .bt{
          font-weight: 600;
          @include font_size($font_medium_s);
        }
        .time{
          color: #cccccc;
          @include font_size($font_medium_s);
        }
      }
      .item{
        line-height: 5vw;
        @include font_size($font_medium_s);
      }
      .item-bottom{
        @include font_size($font_medium_s);
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 6vw;
        .pass{
          color: #06ae56;
        }
        .edit{
          color: #10aeff;
        }

      }
    }
  }
}

</style>