<script setup lang="ts">
import { ref, computed } from "vue";
import { formatDict } from "@/utils/dict";

const dialogVisible = ref(false);
const orderData = ref<any>(null);

const open = (row: any) => {
  orderData.value = row;
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
  orderData.value = null;
};

const formatMoney = (value: number) => {
  if (value === null || value === undefined) return "0.00";
  return (value / 100).toFixed(2);
};

const formatDuration = (seconds: number) => {
  if (!seconds) return "-";
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;
  
  const parts = [];
  if (hours > 0) parts.push(`${hours}时`);
  if (minutes > 0) parts.push(`${minutes}分`);
  if (secs > 0 || parts.length === 0) parts.push(`${secs}秒`);
  
  return parts.join("");
};

const detailList = computed(() => {
  if (!orderData.value?.detail) return [];
  return orderData.value.detail
    .filter((item: any) => item.amount > 0 || item.seconds > 0)
    .map((item: any) => ({
      name: getFeeTypeName(item.name),
      seconds: formatDuration(item.seconds),
      price: formatMoney(item.price),
      amount: formatMoney(item.amount)
    }));
});

const getFeeTypeName = (name: string) => formatDict("Order.feeType", name) || name;

const getOrderStatusText = (status: string) => formatDict("Order.status", status);

const getPayStatusText = (status: string) => formatDict("Order.pay", status);

const getCloseTypeText = (type: string) => formatDict("Order.closeType", type);

defineExpose({ open });
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="订单详情"
    width="800px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <template v-if="orderData">
      <el-descriptions :column="2" border class="order-info">
        <el-descriptions-item label="订单号">
          {{ orderData.orderId }}
        </el-descriptions-item>
        <el-descriptions-item label="用户手机号">
          {{ orderData.mobilePhone }}
        </el-descriptions-item>
        <el-descriptions-item label="消费站点">
          {{ orderData.stationName }} ({{ orderData.stationId }})
        </el-descriptions-item>
        <el-descriptions-item label="归属站点">
          {{ orderData.userStationName }} ({{ orderData.userStationId }})
        </el-descriptions-item>
        <el-descriptions-item label="设备编号">
          {{ orderData.shortId }}
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          {{ getOrderStatusText(orderData.orderStatus) }}
        </el-descriptions-item>
        <el-descriptions-item label="支付状态">
          {{ getPayStatusText(orderData.payStatus) }}
        </el-descriptions-item>
        <el-descriptions-item label="关机方式">
          {{ getCloseTypeText(orderData.closeType) }}
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">
          {{ orderData.startTime }}
        </el-descriptions-item>
        <el-descriptions-item label="结束时间">
          {{ orderData.endTime }}
        </el-descriptions-item>
        <el-descriptions-item label="消费总额">
          <span class="money">¥{{ formatMoney(orderData.amount) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="应收金额">
          <span class="money">¥{{ formatMoney(orderData.amountReceivable) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="实收金额">
          <span class="money highlight">¥{{ formatMoney(orderData.amountReceived) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="优惠金额">
          <span class="money discount">¥{{ formatMoney(orderData.discountAmount) }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <div class="detail-title">消费明细</div>
      <el-table
        :data="detailList"
        border
        stripe
        size="small"
      >
        <template #empty>
          <el-empty description="暂无消费明细" />
        </template>
        <el-table-column label="服务项目" prop="name" width="150" />
        <el-table-column label="服务时长" prop="seconds" width="120" />
        <el-table-column label="服务单价" prop="price" width="120">
          <template #default="{ row }">
            ¥{{ row.price }}
          </template>
        </el-table-column>
        <el-table-column label="小计金额" prop="amount">
          <template #default="{ row }">
            <span class="money">¥{{ row.amount }}</span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.order-info {
  margin-bottom: 20px;
}

.detail-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  padding-left: 10px;
  border-bottom: 2px solid var(--el-color-primary);
}

.money {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  
  &.highlight {
    color: #C83A35;
    font-weight: 600;
  }
  
  &.discount {
    color: var(--el-color-success);
  }
}
</style>
