<template>
  <div>
    <el-card v-if="current" class="active-shift">
      <template #header>当班中</template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="接班时间">{{ current.start_time }}</el-descriptions-item>
        <el-descriptions-item label="接班现金">¥{{ current.starting_cash.toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="当班收款">¥{{ (current.collected_cash || 0).toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="应交总额"><b>¥{{ ((current.starting_cash || 0) + (current.collected_cash || 0)).toFixed(2) }}</b></el-descriptions-item>
      </el-descriptions>
      <div style="margin-top:16px">
        <el-input-number v-model="endForm.actual_cash" :min="0" :precision="2" placeholder="实交现金" style="width:200px" />
        <el-button type="danger" style="margin-left:12px" @click="doEnd">交班</el-button>
      </div>
    </el-card>

    <el-card v-else>
      <el-form inline>
        <el-form-item label="接班现金">
          <el-input-number v-model="startForm.starting_cash" :min="0" :precision="2" style="width:200px" />
        </el-form-item>
        <el-form-item><el-button type="primary" @click="doStart">接班</el-button></el-form-item>
      </el-form>
    </el-card>

    <el-table :data="list" border style="margin-top:16px">
      <el-table-column label="操作员" prop="operator_name" width="100" />
      <el-table-column label="接班时间" prop="start_time" width="170" />
      <el-table-column label="交班时间" prop="end_time" width="170" />
      <el-table-column label="接班现金" width="100"><template #default="{row}">¥{{ row.starting_cash.toFixed(2) }}</template></el-table-column>
      <el-table-column label="当班收款" width="100"><template #default="{row}">¥{{ (row.collected_cash || 0).toFixed(2) }}</template></el-table-column>
      <el-table-column label="应交" width="100"><template #default="{row}">¥{{ row.expected_total.toFixed(2) }}</template></el-table-column>
      <el-table-column label="实交" width="100"><template #default="{row}">¥{{ row.actual_total.toFixed(2) }}</template></el-table-column>
      <el-table-column label="差异" width="100">
        <template #default="{row}">
          <span :style="{color: row.difference < 0 ? '#f56c6c' : '#67c23a'}">¥{{ row.difference.toFixed(2) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { startShift, endShift, getCurrentShift, getShiftList } from '@/api/shift'

const current = ref(null), list = ref([])
const startForm = reactive({ starting_cash: 0 })
const endForm = reactive({ actual_cash: 0 })

async function fetch() {
  try {
    const r = await getCurrentShift()
    current.value = r.code === 0 ? r.data : null
  } catch (e) { current.value = null }
  const l = await getShiftList({ page: 1, page_size: 20 })
  if (l.code === 0) { list.value = l.data.list || []; list.value.forEach(s => s.collected_cash = s.collected_cash || 0) }
}

async function doStart() {
  const r = await startShift(startForm)
  if (r.code === 0) { ElMessage.success('接班成功'); fetch() } else ElMessage.error(r.msg)
}

async function doEnd() {
  const r = await endShift(endForm)
  if (r.code === 0) { ElMessage.success(`交班完成，差异¥${r.data.difference.toFixed(2)}`); fetch() } else ElMessage.error(r.msg)
}

let timer = null
onMounted(() => { fetch(); timer = setInterval(fetch, 10000) })
onUnmounted(() => clearInterval(timer))
</script>

<style scoped>
.active-shift { border-left: 4px solid #67c23a; }
</style>
