<template>
  <Dialog title="消费明细" v-model="dialogVisible" width="600px">
    <el-table :data="detailList" v-loading="loading">
      <el-table-column label="商品名称" prop="goodsName" align="center" />
      <el-table-column label="商品编码" prop="goodsCode" align="center" width="120" />
      <el-table-column label="单价" prop="goodsPrice" align="center" width="100">
        <template #default="{ row }">
          ¥{{ row.goodsPrice?.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="goodsCount" align="center" width="80" />
      <el-table-column label="小计" prop="subtotal" align="center" width="100">
        <template #default="{ row }">
          <span class="text-primary">¥{{ row.subtotal?.toFixed(2) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ConsumptionApi, ConsumptionDetail } from '@/api/prison/consumption'

defineOptions({ name: 'ConsumptionDetailDialog' })

const dialogVisible = ref(false)
const loading = ref(false)
const detailList = ref<ConsumptionDetail[]>([])
const consumptionId = ref<number>()

/** 打开弹窗 */
const open = async (id: number) => {
  consumptionId.value = id
  dialogVisible.value = true
  loading.value = true
  try {
    detailList.value = await ConsumptionApi.getConsumptionDetailList(id)
  } finally {
    loading.value = false
  }
}

defineExpose({ open })
</script>
