<template>
  <!-- 门店展示 暂时接口不满足 -->
  <!-- <view class="hand-item">
      <view class="hand-title">门店</view>
      <view class="hand-info">小伙计</view>
    </view> -->
  <view class="hand-item">
    <view class="hand-title">收银员</view>
    <view class="hand-info">{{ vdata.realname || vdata.userInfo.realname }}</view>
  </view>
  <view class="hand-item">
    <view class="hand-title">上班时间</view>
    <view class="hand-info">{{ vdata.workStartTime }}</view>
  </view>
  <view class="hand-item">
    <view class="hand-title">下班时间</view>
    <view class="hand-info">{{ vdata.workEndTime }}</view>
  </view>
  <view class="line"></view>
  <view class="hand-item">
    <view class="hand-title">收款金额</view>
    <view class="hand-info">￥{{ vdata.payAmount }}</view>
  </view>
  <view class="hand-item">
    <view class="hand-title">收款笔数</view>
    <view class="hand-info">{{ vdata.payCount }}</view>
  </view>
  <view class="hand-item">
    <view class="hand-title">退款金额</view>
    <view class="hand-info">￥{{ vdata.refundAmount }}</view>
  </view>
  <view class="hand-item">
    <view class="hand-title">退款笔数</view>
    <view class="hand-info">{{ vdata.refundCount }}</view>
  </view>
  <view class="footer-but" v-if="vdata.userInfo.realname">
    <view @tap="handHandover">交班</view>
    <view class="record" @tap="toHandoverList">交班记录</view>
  </view>
</template>

<script setup>
import { $handover, $workRecords, $getHandoverById } from '@/http/apiManager'
import { reactive, ref } from 'vue'
import storageManage from '@/commons/utils/storageManage.js'
import { onLoad } from '@dcloudio/uni-app'
import cal from '@/commons/utils/cal.js'
import dayjs from 'dayjs'
onLoad((options) => {
  getHandoverInfo(options.id)
})
const vdata = reactive({
  userInfo: storageManage.userInfo(),
})
const getHandoverInfo = (id) => {
  if (id) {
    uni.setNavigationBarTitle({
      title: '交班详情',
    })
    $getHandoverById(id).then(({ bizData }) => {
      bizData = cal.yuan(bizData, ['refundAmount', 'payAmount'])
      Object.assign(vdata, bizData)
      console.log(bizData)
    })
    return
  }
  $handover().then(({ bizData }) => {
    bizData = cal.yuan(bizData, ['refundAmount', 'payAmount'])
    Object.assign(vdata, bizData)
  })
}

const handHandover = () => {
  uni.showModal({
    title: '是否确认交班？',
    content: '交班自动下班 并 退出登录',
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if (confirm) {
        $workRecords('2').then((res) => {
          uni.$J.showToast('交班成功即将退登录').then((r) => {
            storageManage.cleanByLogout()
            uni.reLaunch({
              url: '/pages/login/login',
            })
          })
        })
      }
    },
  })
}

const toHandoverList = () => uni.navigateTo({ url: '/pages/handover/handoverList' })
</script>

<style lang="scss" scoped>
.hand-item {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  font-size: 28rpx;

  //   border-bottom: 1rpx solid #ededed;
  .hand-info {
    color: #bbb;
  }
}

.line {
  height: 15rpx;
  background-color: #ededed;
}

.footer-but {
  display: flex;
  justify-content: space-around;
  margin-top: 60rpx;

  view {
    flex: 0 0 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70rpx;
    background-color: $v-primary;
    border-radius: 14rpx;
    color: #fff;
    font-size: 22rpx;
  }

  .record {
    background-color: rgba($color: $v-primary, $alpha: 0.7);
  }
}
</style>
