<template>
  <div class="outpatient-daily-settlement">
    <el-card class="summary-section" data-cy="settlement-summary">
      <template #header>
        <span class="card-title">门诊日结汇总</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in summaryData" :key="item.label">
          <el-card shadow="hover" class="summary-card" data-cy="summary-card">
            <div class="summary-label">{{ item.label }}</div>
            <div class="summary-value">{{ item.value }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="detail-section" style="margin-top: 20px;">
      <template #header>
        <div class="table-header">
          <span class="card-title">收费明细</span>
          <el-button type="primary" @click="handleRefresh">刷新</el-button>
        </div>
      </template>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        data-cy="settlement-table"
      >
        <el-table-column prop="date" label="结算日期" width="120" align="center" />
        <el-table-column prop="patientName" label="患者姓名" width="120" align="center" />
        <el-table-column prop="chargeType" label="收费类型" width="120" align="center" />
        <el-table-column prop="amount" label="金额(元)" width="120" align="right" />
        <el-table-column prop="status" label="状态" width="100" align="center" />
        <el-table-column prop="operator" label="操作员" width="120" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div class="action-section" data-cy="settlement-actions" style="margin-top: 20px; text-align: right;">
      <el-button @click="handleExport">导出报表</el-button>
      <el-button type="primary" @click="handleConfirmSettlement">确认日结</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const summaryData = ref([
  { label: '今日挂号费', value: '¥ 1,250.00' },
  { label: '今日诊疗费', value: '¥ 8,430.50' },
  { label: '今日药品费', value: '¥ 15,600.00' },
  { label: '今日总收费', value: '¥ 25,280.50' }
])

const tableData = ref([
  { date: '2026-05-26', patientName: '张三', chargeType: '门诊', amount: 150.00, status: '已结算', operator: '收费员A' },
  { date: '2026-05-26', patientName: '李四', chargeType: '门诊', amount: 320.50, status: '已结算', operator: '收费员A' },
  { date: '2026-05-26', patientName: '王五', chargeType: '急诊', amount: 89.00, status: '已结算', operator: '收费员B' }
])

const handleRefresh = () => {
  ElMessage.success('数据已刷新')
}
const handleView = (row: any) => {
  ElMessage.info(`查看明细: ${row.patientName}`)
}
const handleExport = () => {
  ElMessage.success('报表导出中...')
}
const handleConfirmSettlement = () => {
  ElMessage.success('日结确认成功')
}

onMounted(() => {
  // 初始化加载逻辑
})
</script>

<style scoped>
.outpatient-daily-settlement {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.card-title {
  font-weight: 600;
  font-size: 16px;
}
.summary-card {
  text-align: center;
  padding: 10px 0;
}
.summary-label {
  color: #606266;
  font-size: 14px;
  margin-bottom: 8px;
}
.summary-value {
  color: #303133;
  font-size: 20px;
  font-weight: bold;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
