<template>
  <div>
    <el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
              :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
              :header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }" id="my-table">
      <el-table-column type="selection" width="55" fixed="left"></el-table-column>
      <el-table-column prop="id" label="订单序号" width="80">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
      <el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
      <el-table-column prop="userName" label="用户名" width="120"></el-table-column>
      <el-table-column label="所购买的商品" width="150">
        <el-table-column label="展开" type="expand" width="150">
          <template #default="props">
            <el-table :data="props.row.orderItemList" border :cell-style="{ 'text-align': 'center', 'font-size': '14px' }">
              <el-table-column label="商品名称" prop="goodSnapshot.name" width="200" />
              <el-table-column label="商品图片" prop="goodSnapshot.goodImg" width="200">
                <template #default="scope">
                  <div>
                    <img :src="downloadUrl + scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="类别" prop="goodSnapshot.type" width="200" />
              <el-table-column label="商品单价" prop="goodSnapshot.price" width="200" />
              <el-table-column label="数量" prop="quantity" width="200" />
              <el-table-column label="总价" prop="itemTotalAmount" width="200" />
            </el-table>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="地址信息" width="180">
        <el-table-column prop="addressSnapshot.name" label="收货人" />
        <el-table-column prop="addressSnapshot.phone" label="手机号" width="180" />
        <el-table-column prop="addressSnapshot.region" label="地区" width="180" />
        <el-table-column prop="addressSnapshot.detailAddress" label="详细地址" width="180" />
      </el-table-column>
      <el-table-column prop="couponSnapshot.conditionAmount" label="优惠金额" />
      <el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
      <el-table-column prop="trackingNumber" label="快递单号"></el-table-column>
      <el-table-column label="操作" width="220px" fixed="right">
        <template #default="scope">
          <!-- 操作按钮（如取消订单、发货等） -->
        </template>
      </el-table-column>
    </el-table>

    <el-button @click="exportToExcel">导出为 Excel</el-button>
  </div>
</template>

<script>
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      loading: false,
      tableData: [
        // 示例数据
        {
          id: 1,
          orderNumber: '12345',
          createTime: '2025-03-28',
          userName: '张三',
          orderItemList: [
            {
              goodSnapshot: { name: '商品A', goodImg: 'imageA.jpg', type: '电子', price: 100 },
              quantity: 2,
              itemTotalAmount: 200,
            },
            {
              goodSnapshot: { name: '商品B', goodImg: 'imageB.jpg', type: '服装', price: 50 },
              quantity: 1,
              itemTotalAmount: 50,
            },
          ],
          addressSnapshot: { name: '李四', phone: '1234567890', region: '北京', detailAddress: '某地址' },
          couponSnapshot: { conditionAmount: 30 },
          totalAmount: 250,
          orderStatus: '待支付',
          trackingNumber: '',
        },
      ],
    };
  },
  methods: {
    exportToExcel() {
      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet('Order Details');

      // 设置列标题
      worksheet.columns = [
        { header: '订单序号', key: 'index', width: 10 },
        { header: '订单编号', key: 'orderNumber', width: 20 },
        { header: '下单时间', key: 'createTime', width: 15 },
        { header: '用户名', key: 'userName', width: 15 },
        { header: '商品名称', key: 'goodName', width: 20 },
        { header: '商品单价', key: 'price', width: 15 },
        { header: '数量', key: 'quantity', width: 10 },
        { header: '总价', key: 'itemTotalAmount', width: 15 },
        { header: '收货人', key: 'recipient', width: 20 },
        { header: '手机号', key: 'phone', width: 15 },
        { header: '地区', key: 'region', width: 20 },
        { header: '详细地址', key: 'detailAddress', width: 30 },
        { header: '优惠金额', key: 'discount', width: 15 },
        { header: '订单实付金额', key: 'totalAmount', width: 15 },
        { header: '订单状态', key: 'orderStatus', width: 15 },
        { header: '快递单号', key: 'trackingNumber', width: 20 },
      ];

      // 遍历 tableData 并填充数据
      this.tableData.forEach((order, index) => {
        // 展平每个订单的数据
        order.orderItemList.forEach((item) => {
          worksheet.addRow({
            index: index + 1,
            orderNumber: order.orderNumber,
            createTime: order.createTime,
            userName: order.userName,
            goodName: item.goodSnapshot.name,
            price: item.goodSnapshot.price,
            quantity: item.quantity,
            itemTotalAmount: item.itemTotalAmount,
            recipient: order.addressSnapshot.name,
            phone: order.addressSnapshot.phone,
            region: order.addressSnapshot.region,
            detailAddress: order.addressSnapshot.detailAddress,
            discount: order.couponSnapshot.conditionAmount,
            totalAmount: order.totalAmount,
            orderStatus: order.orderStatus,
            trackingNumber: order.trackingNumber,
          });
        });
      });

      // 导出为 Excel 文件
      workbook.xlsx.writeBuffer().then((buffer) => {
        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        saveAs(blob, 'orders.xlsx');
      });
    },
  },
};
</script>
