<template>
  <div class="bg-white rounded-lg  p-8">
    <!-- Header -->
    <div class="flex justify-between items-center mb-8">
      <div>
        <h1 class="text-2xl font-medium">Order Details</h1>
        <p class="text-gray-500 mt-1">Order #{{ orderNumber }}</p>
      </div>
      <button
        class="!rounded-button bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 flex items-center whitespace-nowrap"
        @click="$router.push('/order/orderList')">
        <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order12.png" alt="">
        Back Home
      </button>
    </div>
    <el-divider />
    <!-- Order Information Grid -->
    <div class="grid grid-cols-3 gap-8 mb-8 text-sm">
      <div class="space-y-6">
        <div class="flex items-start">
          <div class="w-48 text-gray-500 flex items-center">
            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/Order1.svg" alt="">Order Number
          </div>
          <div>{{ orderNumber }}</div>
        </div>
        <div class="flex items-start">
          <div class="w-48 text-gray-500 flex items-center">
            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order2.svg" alt="">Order Transaction Time
          </div>
          <div>{{ orderTime }}</div>
        </div>
        <div class="flex items-start">
          <div class="w-48 text-gray-500 flex items-center">
            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order3.svg" alt="">Trader's Name
          </div>
          <div>{{ traderName }}</div>
        </div>
        <div class="flex items-start">
          <div class="w-48 text-gray-500 flex items-center">
            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order4.svg" alt="">Employee ID
          </div>
          <div>{{ employeeId }}</div>
        </div>
      </div>

      <div class="space-y-6">
        <div class="flex items-start">
          <div class="w-48 text-gray-500 flex items-center">
            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order5.png" alt="">Amount Receivable
          </div>
          <div>$ {{ amount }}</div>
        </div>
        <div class="flex items-start">
          <div class="w-48 text-gray-500 flex items-center">
            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order6.svg" alt="">Order Upload Time
          </div>
          <div>{{ uploadTime }}</div>
        </div>
        <div class="flex items-start">
          <div class="w-48 text-gray-500 flex items-center">
            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order7.svg" alt="">Order Status
          </div>
          <div>
            <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-sm">
              {{ orderStatus }}
            </span>
          </div>
        </div>
        <div class="flex items-start">
          <div class="w-48 text-gray-500 flex items-center">
            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order8.png" alt="">Payment Method
          </div>
          <div>{{ paymentMethod }}</div>
        </div>
      </div>

      <div>
        <!-- Additional Information -->
        <div class="mb-4">
          <div class="flex items-center">
            <div class="w-48 text-gray-500">
              <img class="h-5 w-5  mr-2 inline" src="@/assets/img/desk/order11.png" alt="">Commodity Classification
            </div>
            <div>
              <span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm">
                {{ commodityType }}
              </span>
            </div>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col space-y-2">
          <button
            class="!rounded-button flex-1 border border-orange-500 text-orange-500 hover:bg-orange-50 px-4 py-3 flex items-center justify-center whitespace-nowrap"
            @click="handleRefund">
            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order9.png" alt="">
            Refund
          </button>
          <button
            class="!rounded-button flex-1 bg-orange-500 hover:bg-orange-600 text-white px-4 py-3 flex items-center justify-center whitespace-nowrap"
            @click="handlePrint">
            <img class="h-5 w-5  mr-2 bg-white rounded-full" src="@/assets/img/desk/order10.png" alt="">
            Print
          </button>
        </div>
      </div>
    </div>


  </div>

  <div class="bg-white p-6 pt-0 mb-10">
    <!-- Transaction Details -->
    <el-table :data="transactionDetails" class="mb-8">
      <el-table-column prop="serialNumber" label="Transaction Serial Number" align="left" />
      <el-table-column prop="balance" label="Balance" align="left" />
      <el-table-column prop="wallet" label="Wallet" align="left" />
    </el-table>

    <!-- Order Details -->
    <el-table :data="orderDetails">
      <el-table-column prop="number" label="Number" align="left" />
      <el-table-column prop="item" label="Item" align="left" />
      <el-table-column prop="unit" label="Unit" align="left" />
      <el-table-column prop="quantity" label="Quantity" align="left" />
      <el-table-column prop="specifications" label="Specifications" align="left" />
      <el-table-column prop="unitPrice" label="Unit Price" align="right" />
      <el-table-column prop="transactionAmount" label="Transaction Amount" align="right" />
    </el-table>

  </div>
  <el-dialog class="top-1/4" v-model="showRefundDialog" :show-close="false" width="400">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass" class="text-center">Reason for refund</h4>
      </div>
    </template>
    <el-input v-model="refundText" placeholder="Please enter the reason for refund"></el-input>
    <el-button class="w-full mt-3" type="primary" @click="closeFundDialog">Confirm refund</el-button> 
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

const orderNumber = ref('123456788987654');
const orderTime = ref('2023-09-09 24:00:00');
const traderName = ref('12357633');
const employeeId = ref('4567645');
const amount = ref('76.0');
const uploadTime = ref('2024-2-7 15:09:00');
const orderStatus = ref('Completed');
const paymentMethod = ref('Offline payment');
const commodityType = ref('Hot Dishes');
const showRefundDialog = ref(false);
const refundText = ref('');
const closeFundDialog = ()=>{
  console.log('Refund');
  showRefundDialog.value = false;
}
const handleBackHome = () => {
  console.log('Navigate back home');
};

const handleRefund = () => {
  console.log('Process refund');
  showRefundDialog.value = true;
};

const handlePrint = () => {
  console.log('Print order details');
};

const transactionDetails = ref([
  {
    serialNumber: '12345',
    balance: 1000,
    wallet: 'Wallet A'
  },
  {
    serialNumber: '67890',
    balance: 2000,
    wallet: 'Wallet B'
  }
]);

const orderDetails = ref([
  {
    number: '001',
    item: 'Product A',
    unit: 'Piece',
    quantity: 5,
    specifications: 'Standard',
    unitPrice: 10.5,
    transactionAmount: 52.5
  },
  {
    number: '002',
    item: 'Product B',
    unit: 'Box',
    quantity: 3,
    specifications: 'Large',
    unitPrice: 20.0,
    transactionAmount: 60.0
  }
]);

const totalAmount = ref(orderDetails.value.reduce((sum, order) => sum + order.transactionAmount, 0));

const formatPrice = (row, column, cellValue) => {
  return `$${cellValue.toFixed(2)}`;
};
</script>

<style scoped>
.order-details {
  font-family: 'Inter', sans-serif;
}

.el-table {
  --el-table-header-bg-color: #f8f9fa;
  --el-table-border-color: #e5e7eb;
  --el-table-header-text-color: #4b5563;
}
</style>