<template>
  <view class="page-wrapper">
    <view class="custom-content">
      <view class="start-time" :style="{ color: vdata.startTime ? '#000' : '#666' }" @tap="refStartTime.show">{{
        vdata.startTime || '请选择开始时间'
      }}</view>
      <view class="endTime-time" :style="{ color: vdata.endTime ? '#000' : '#666' }" @tap="refEndTime.show">{{
        vdata.endTime || '请选择结束时间'
      }}</view>
    </view>
    <block v-for="v in vdata.list" :key="v.id">
      <view class="list-main" @tap="toDetails(v.id)">
        <view class="left">
          <view class="title">{{ v.realname }}</view>
          <view class="time">{{ v.workStartTime }}</view>
        </view>
        <view class="line">—</view>
        <view class="right">
          <view class="amount title">￥{{ (v.successAmount / 100).toFixed(2) }}</view>
          <view class="time">{{ v.workEndTime || '未下班' }}</view>
        </view>
      </view>
    </block>
    <view class="list-null" v-if="!vdata.hasNext">暂无更多数据</view>
  </view>
  <xp-picker mode="ymdhi" ref="refStartTime" @confirm="timeConfirm($event, 'startTime')">
    <view></view>
  </xp-picker>
  <xp-picker mode="ymdhi" ref="refEndTime" @confirm="timeConfirm($event, 'endTime')">
    <view></view>
  </xp-picker>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onReachBottom, onUnload } from '@dcloudio/uni-app'
import { $handoverList } from '@/http/apiManager'
import dayjs from 'dayjs'
const refStartTime = ref(null)
const refEndTime = ref(null)
const vdata = reactive({
  list: [],
  hasNext: true,
})
const params = {
  pageSize: 10,
  pageNumber: 1,
  queryDateRange: '',
}
const getList = () => {
  if (!vdata.hasNext) return
  $handoverList(params).then(({ bizData }) => {
    vdata.list.push(...bizData.records)
    vdata.hasNext = bizData.hasNext
  })
}
getList()
onReachBottom(() => {
  params.pageNumber += 1
  getList()
})
/**
 * @param {e} Object 组件原生 回调 时间戳 日期
 * @param {key} String vdata 对象的 key 值 赋值使用
 * */
const timeConfirm = (e, key) => {
  vdata[key] = dayjs(e.timestamp).format('YYYY-MM-DD hh:mm')

  if (key == 'endTime' || (vdata.endTime != undefined && dayjs(vdata.startTime).isAfter(vdata.endTime))) {
    console.log('进入请求')
    params.queryDateRange = `customDateTime_${vdata.startTime + ':00'}_${vdata.endTime + ':00'}`
    vdata.list = []
    params.pageNumber = 1
    vdata.hasNext = true
    getList()
  }
}
/**
 * @param {id} String 用于 和后端交互请求详情
 * */
const toDetails = (id) => {
  uni.navigateTo({
    url: '/pages/handover/handover?id=' + id,
  })
}
</script>

<style lang="scss" scoped>
.list-main {
  display: flex;
  justify-content: space-between;
  padding: 15rpx;
  margin: 30rpx;
  background-color: #fff;
  border-radius: 14rpx;

  .title {
    font-size: 22rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
  }

  .amount {
    color: $v-primary;
  }

  .line {
    align-self: flex-end;
  }

  .right {
    text-align: right;
  }

  .time,
  .line {
    color: #ccc;
  }
}

.custom-content {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;

  view {
    flex: 0 0 30%;
    padding: 10rpx 0;
    background-color: #ded7d7;
    text-align: center;
    border-radius: 10rpx;
    font-size: 16rpx;
  }
}

.list-null {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  margin: 30rpx 0;
  padding: 0 30rpx;
  font-size: 24rpx;
  font-weight: 600;

  &::after,
  &::before {
    content: '';
    display: block;
    width: 35%;
    height: 2rpx;
    background-color: #ededed;
  }
}
</style>
