<!-- 用户编辑弹窗 -->
<template>
  <a-drawer
    :width="`65%`"
    :visible="visible"
    :confirm-loading="loading"
    :maxable="maxAble"
    :title="isUpdate ? '编辑订单' : '订单详情'"
    :body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
    @update:visible="updateVisible"
    :footer="null"
    @ok="save"
  >
    <template #extra>
      <a-space>
        <!-- 发货按钮：已付款且未发货时显示 -->
        <a-button
          v-if="form.payStatus === 1 && form.deliveryStatus === 10"
          type="primary"
          @click="handleDelivery"
          :loading="loading"
        >
          发货
        </a-button>

        <!-- 取消订单按钮：未完成且未取消时显示 -->
        <a-button
          v-if="form.orderStatus === 0"
          @click="handleCancelOrder"
          danger
          :loading="loading"
        >
          取消订单
        </a-button>

        <!-- 删除订单按钮：已取消或已完成时显示 -->
        <a-button
          v-if="form.orderStatus === 1 || form.orderStatus === 2"
          @click="handleDeleteOrder"
          danger
          :loading="loading"
        >
          删除订单
        </a-button>

        <!-- 关闭按钮 -->
        <a-button @click="updateVisible(false)">
          关闭
        </a-button>
      </a-space>
    </template>
    <a-card title="基本信息" style="margin-bottom: 20px" :bordered="false">
      <a-descriptions :column="3">
        <!-- 第一排-->
        <a-descriptions-item
          label="订单编号"
          :span="3"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          <span @click="copyText(form.orderNo)">{{ form.orderNo }}</span>
        </a-descriptions-item>
        <!-- 第二排-->
        <a-descriptions-item
          label="买家信息"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          <a-space class="flex items-center">
            <a-tooltip :title="`${form.userId}`">
              <a-avatar :src="form.avatar" size="small"/>
            </a-tooltip>
            {{ form.realName }}
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item
          label="订单金额"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          ￥{{ form.totalPrice }}
        </a-descriptions-item>
        <a-descriptions-item
          label="订单状态"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          <a-tag v-if="form.orderStatus === 0">未完成</a-tag>
          <a-tag v-if="form.orderStatus === 1" color="green">已完成</a-tag>
          <a-tag v-if="form.orderStatus === 2" color="red">已取消</a-tag>
          <a-tag v-if="form.orderStatus === 3" color="red">取消中</a-tag>
          <a-tag v-if="form.orderStatus === 4" color="red">退款申请中</a-tag>
          <a-tag v-if="form.orderStatus === 5" color="red">退款被拒绝</a-tag>
          <a-tag v-if="form.orderStatus === 6" color="orange">退款成功</a-tag>
          <a-tag v-if="form.orderStatus === 7" color="pink">客户端申请退款</a-tag>
        </a-descriptions-item>
        <!-- 第三排-->
        <a-descriptions-item
          label="手机号码"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          {{ form.phone }}
        </a-descriptions-item>
        <a-descriptions-item
          label="实付金额"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          ￥{{ form.payPrice }}
        </a-descriptions-item>
        <a-descriptions-item
          label="支付状态"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          <a-tag v-if="form.payStatus == 1" color="green">已付款</a-tag>
          <a-tag v-if="form.payStatus == 0">未付款</a-tag>
          <a-tag v-if="form.payStatus == 3">未付款,占场中</a-tag>
        </a-descriptions-item>
        <!-- 第四排-->
        <a-descriptions-item
          label="收货地址"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          {{ form.address }}
        </a-descriptions-item>
        <a-descriptions-item
          label="减少的金额"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          ￥{{ form.reducePrice }}
        </a-descriptions-item>
        <a-descriptions-item
          label="核销状态"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          <a-tag v-if="form.deliveryStatus == 10">未核销</a-tag>
          <a-tag v-if="form.deliveryStatus == 20" color="green">
            <a-tooltip :title="form.deliveryTime">
              已核销
            </a-tooltip>
          </a-tag>
          <a-tag v-if="form.deliveryStatus == 30" color="blue">部分核销</a-tag>
        </a-descriptions-item>
        <!-- 第五排-->
        <a-descriptions-item
          label="备注信息"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          {{ form.comments }}
        </a-descriptions-item>
        <a-descriptions-item
          label="支付方式"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          <a-tooltip :title="`支付时间：${form.payTime || ''}`">
            <template v-if="form.payStatus == 1">
              <a-tag v-if="form.payType == 0">余额支付</a-tag>
              <a-tag v-if="form.payType == 1">
                <WechatOutlined class="tag-icon"/>
                微信支付
              </a-tag>
              <a-tag v-if="form.payType == 2">积分</a-tag>
              <a-tag v-if="form.payType == 3">
                <AlipayCircleOutlined class="tag-icon"/>
                支付宝
              </a-tag>
              <a-tag v-if="form.payType == 4">
                <IdcardOutlined class="tag-icon"/>
                现金
              </a-tag>
              <a-tag v-if="form.payType == 5">
                <IdcardOutlined class="tag-icon"/>
                POS机
              </a-tag>
              <a-tag v-if="form.payType == 6">
                <IdcardOutlined class="tag-icon"/>
                VIP月卡
              </a-tag>
              <a-tag v-if="form.payType == 7">
                <IdcardOutlined class="tag-icon"/>
                VIP年卡
              </a-tag>
              <a-tag v-if="form.payType == 8">
                <IdcardOutlined class="tag-icon"/>
                VIP次卡
              </a-tag>
              <a-tag v-if="form.payType == 9">
                <IdcardOutlined class="tag-icon"/>
                IC月卡
              </a-tag>
              <a-tag v-if="form.payType == 10">
                <IdcardOutlined class="tag-icon"/>
                IC年卡
              </a-tag>
              <a-tag v-if="form.payType == 11">
                <IdcardOutlined class="tag-icon"/>
                IC次卡
              </a-tag>
              <a-tag v-if="form.payType == 12">
                <IdcardOutlined class="tag-icon"/>
                免费
              </a-tag>
              <a-tag v-if="form.payType == 13">
                <IdcardOutlined class="tag-icon"/>
                VIP充值卡
              </a-tag>
              <a-tag v-if="form.payType == 14">
                <IdcardOutlined class="tag-icon"/>
                IC充值卡
              </a-tag>
              <a-tag v-if="form.payType == 15">
                <IdcardOutlined class="tag-icon"/>
                积分支付
              </a-tag>
              <a-tag v-if="form.payType == 16">
                <IdcardOutlined class="tag-icon"/>
                VIP季卡
              </a-tag>
              <a-tag v-if="form.payType == 17">
                <IdcardOutlined class="tag-icon"/>
                IC季卡
              </a-tag>
              <a-tag v-if="form.payType == 18">
                <IdcardOutlined class="tag-icon"/>
                代付
              </a-tag>
            </template>
            <template v-else>
              <span class="text-gray-400">未支付</span>
            </template>
          </a-tooltip>
        </a-descriptions-item>
        <a-descriptions-item
          label="开票状态"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          <a-tag v-if="form.isInvoice == 0">未开具</a-tag>
          <a-tag v-if="form.isInvoice == 1" color="green">已开具</a-tag>
          <a-tag v-if="form.isInvoice == 2" color="blue">不能开具</a-tag>
        </a-descriptions-item>
        <!-- 第六排-->
        <a-descriptions-item
          label="下单时间"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          {{ toDateString(form.createTime, 'yyyy-MM-dd HH:mm') }}
        </a-descriptions-item>
        <a-descriptions-item
          label="交易流水号"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          {{ form.transactionId }}
        </a-descriptions-item>
        <a-descriptions-item
          label="结算状态"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          <a-tag v-if="form.isSettled == 0">未结算</a-tag>
          <a-tag v-if="form.isSettled == 1" color="green">已结算</a-tag>
        </a-descriptions-item>

        <!--        <a-descriptions-item span="3">-->
        <!--          <a-divider/>-->
        <!--        </a-descriptions-item>-->

      </a-descriptions>
    </a-card>

    <!-- 订单流程步骤条 -->
    <a-card title="订单流程" style="margin-bottom: 20px" :bordered="false">
      <a-steps :current="active" :items="steps" />
    </a-card>
    <a-card title="商品信息" style="margin-bottom: 20px" :bordered="false">
      <a-spin :spinning="loading">
        <a-table
          :data-source="orderGoods"
          :columns="columns"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'goodsName'">
              <div style="display: flex; align-items: center; gap: 12px;">
                <a-avatar
                  :src="record.image || record.goodsImage"
                  shape="square"
                  :size="50"
                  style="flex-shrink: 0;"
                >
                  <template #icon>
                    <img src="/default-goods.png" alt="默认商品图片" style="width: 100%; height: 100%; object-fit: cover;" />
                  </template>
                </a-avatar>
                <span style="flex: 1;">{{ record.goodsName || '未知商品' }}</span>
              </div>
            </template>
          </template>
        </a-table>
      </a-spin>
    </a-card>
    <a-card title="收货信息" style="margin-bottom: 20px" :bordered="false">
      <a-spin :spinning="loading">
        <a-descriptions :column="2">
          <a-descriptions-item
            label="收货人"
            :labelStyle="{ width: '90px', color: '#808080' }"
          >
            {{ form.realName || '未填写' }}
          </a-descriptions-item>
          <a-descriptions-item
            label="联系电话"
            :labelStyle="{ width: '90px', color: '#808080' }"
          >
            {{ form.phone || form.mobile || '未填写' }}
          </a-descriptions-item>
          <a-descriptions-item
            label="收货地址"
            :labelStyle="{ width: '90px', color: '#808080' }"
            :span="2"
          >
            {{ form.address || '未填写' }}
          </a-descriptions-item>
          <a-descriptions-item
            label="配送方式"
            :labelStyle="{ width: '90px', color: '#808080' }"
          >
            <a-tag v-if="form.deliveryType === 0">快递配送</a-tag>
            <a-tag v-else-if="form.deliveryType === 1" color="blue">自提</a-tag>
            <a-tag v-else>未设置</a-tag>
          </a-descriptions-item>
          <a-descriptions-item
            label="配送时间"
            :labelStyle="{ width: '90px', color: '#808080' }"
          >
            <div v-if="form.sendStartTime && form.sendEndTime">
              {{ form.sendStartTime }} - {{ form.sendEndTime }}
            </div>
            <span v-else class="text-gray-400">未设置</span>
          </a-descriptions-item>
          <a-descriptions-item
            v-if="form.deliveryType === 1"
            label="自提店铺"
            :labelStyle="{ width: '90px', color: '#808080' }"
            :span="2"
          >
            {{ form.selfTakeMerchantName || '未设置' }}
          </a-descriptions-item>
          <a-descriptions-item
            v-if="form.deliveryType === 0"
            label="发货店铺"
            :labelStyle="{ width: '90px', color: '#808080' }"
            :span="2"
          >
            {{ form.expressMerchantName || '未设置' }}
          </a-descriptions-item>
          <a-descriptions-item
            v-if="form.selfTakeCode"
            label="自提码"
            :labelStyle="{ width: '90px', color: '#808080' }"
          >
            <a-tag color="orange" @click="copyText(form.selfTakeCode)" class="cursor-pointer">
              {{ form.selfTakeCode }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-spin>
    </a-card>
  </a-drawer>
</template>

<script lang="ts" setup>
import {ref, reactive, watch} from 'vue';
import {Form} from 'ant-design-vue';
import {assignObject} from 'ele-admin-pro';

import {
  WechatOutlined,
  AlipayCircleOutlined,
  IdcardOutlined
} from '@ant-design/icons-vue';
import {ShopOrder} from '@/api/shop/shopOrder/model';
import {BszxPay} from '@/api/bszx/bszxPay/model';
import {toDateString} from 'ele-admin-pro';
import {copyText} from "@/utils/common";
import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
import {updateShopOrder, removeShopOrder} from '@/api/shop/shopOrder';
import {message, Modal} from 'ant-design-vue';

const useForm = Form.useForm;

const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: ShopOrder | null;
}>();

interface Step {
  title?: string | undefined;
  subTitle?: string | undefined;
  description?: string | undefined;
}

// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
// 订单信息
const orderGoods = ref<BszxPay[]>([]);

// 步骤条
const steps = ref<Step[]>([
  {
    title: '报餐',
    description: undefined
  },
  {
    title: '付款',
    description: undefined
  },
  {
    title: '发餐',
    description: undefined
  },
  {
    title: '取餐',
    description: undefined
  },
  {
    title: '完成',
    description: undefined
  }
]);
const active = ref(2);

const emit = defineEmits<{
  (e: 'done'): void;
  (e: 'update:visible', visible: boolean): void;
}>();

// 订单信息
const form = reactive<ShopOrder>({
  // 订单号
  orderId: undefined,
  // 订单编号
  orderNo: undefined,
  // 订单类型，0商城订单 1预定订单/外卖 2会员卡
  type: undefined,
  // 快递/自提
  deliveryType: undefined,
  // 下单渠道，0小程序预定 1俱乐部训练场 3活动订场
  channel: undefined,
  // 微信支付订单号
  transactionId: undefined,
  // 微信退款订单号
  refundOrder: undefined,
  // 商户ID
  merchantId: undefined,
  // 商户名称
  merchantName: undefined,
  // 商户编号
  merchantCode: undefined,
  // 使用的优惠券id
  couponId: undefined,
  // 使用的会员卡id
  cardId: undefined,
  // 关联管理员id
  adminId: undefined,
  // 核销管理员id
  confirmId: undefined,
  // IC卡号
  icCard: undefined,
  // 头像
  avatar: undefined,
  // 真实姓名
  realName: undefined,
  // 手机号码
  phone: undefined,
  // 收货地址
  address: undefined,
  //
  addressLat: undefined,
  //
  addressLng: undefined,
  // 自提店铺id
  selfTakeMerchantId: undefined,
  // 自提店铺
  selfTakeMerchantName: undefined,
  // 配送开始时间
  sendStartTime: undefined,
  // 配送结束时间
  sendEndTime: undefined,
  // 发货店铺id
  expressMerchantId: undefined,
  // 发货店铺
  expressMerchantName: undefined,
  // 订单总额
  totalPrice: undefined,
  // 减少的金额，使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格
  reducePrice: undefined,
  // 实际付款
  payPrice: undefined,
  // 用于统计
  price: undefined,
  // 价钱，用于积分赠送
  money: undefined,
  // 退款金额
  refundMoney: undefined,
  // 教练价格
  coachPrice: undefined,
  // 购买数量
  totalNum: undefined,
  // 教练id
  coachId: undefined,
  // 支付的用户id
  payUserId: undefined,
  // 0余额支付, 1微信支付，102微信Native，2会员卡支付，3支付宝，4现金，5POS机，6VIP月卡，7VIP年卡，8VIP次卡，9IC月卡，10IC年卡，11IC次卡，12免费，13VIP充值卡，14IC充值卡，15积分支付，16VIP季卡，17IC季卡，18代付
  payType: undefined,
  // 代付支付方式,0余额支付, 1微信支付，102微信Native，2会员卡支付，3支付宝，4现金，5POS机，6VIP月卡，7VIP年卡，8VIP次卡，9IC月卡，10IC年卡，11IC次卡，12免费，13VIP充值卡，14IC充值卡，15积分支付，16VIP季卡，17IC季卡，18代付
  friendPayType: undefined,
  // 0未付款，1已付款
  payStatus: undefined,
  // 0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款
  orderStatus: undefined,
  // 发货状态(10未发货 20已发货 30部分发货)
  deliveryStatus: undefined,
  // 发货时间
  deliveryTime: undefined,
  // 优惠类型：0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡，5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡
  couponType: undefined,
  // 优惠说明
  couponDesc: undefined,
  // 二维码地址，保存订单号，支付成功后才生成
  qrcode: undefined,
  // vip月卡年卡、ic月卡年卡回退次数
  returnNum: undefined,
  // vip充值回退金额
  returnMoney: undefined,
  // 预约详情开始时间数组
  startTime: undefined,
  // 是否已开具发票：0未开发票，1已开发票，2不能开具发票
  isInvoice: undefined,
  // 发票流水号
  invoiceNo: undefined,
  // 支付时间
  payTime: undefined,
  // 退款时间
  refundTime: undefined,
  // 申请退款时间
  refundApplyTime: undefined,
  // 过期时间
  expirationTime: undefined,
  // 对账情况：0=未对账；1=已对账；3=已对账，金额对不上；4=未查询到该订单
  checkBill: undefined,
  // 订单是否已结算(0未结算 1已结算)
  isSettled: undefined,
  // 系统版本号 0当前版本 value=其他版本
  version: undefined,
  // 用户id
  userId: undefined,
  // 备注
  comments: undefined,
  // 排序号
  sortNumber: undefined,
  // 是否删除, 0否, 1是
  deleted: undefined,
  // 租户id
  tenantId: undefined,
  // 修改时间
  updateTime: undefined,
  // 创建时间
  createTime: undefined,
  // 自提码
  selfTakeCode: undefined,
  // 是否已收到赠品
  hasTakeGift: undefined,
});

// 请求状态
const loading = ref(true);

const {resetFields} = useForm(form);

/* 更新visible */
const updateVisible = (value: boolean) => {
  emit('update:visible', value);
};

const columns = ref([
  {
    title: '商品名称',
    dataIndex: 'goodsName',
    key: 'goodsName',
    width: 280
  },
  {
    title: '金额',
    dataIndex: 'price',
    align: 'center' as const,
    customRender: ({record}: {record: any}) => {
      return `￥${record.price || 0}`;
    }
  },
  {
    title: '数量',
    dataIndex: 'quantity',
    align: 'center' as const,
    customRender: ({record}: {record: any}) => {
      return record.quantity || 1;
    }
  },
  {
    title: '备注',
    dataIndex: 'comments',
    key: 'comments',
    align: 'center' as const
  },
  {
    title: '是否免费',
    dataIndex: 'isFree',
    align: 'center' as const,
    customRender: ({record}: {record: any}) => {
      return record.isFree ? '是' : '否';
    }
  }
]);

/* 制作步骤条 */
const loadSteps = (order: ShopOrder) => {
  steps.value = [
    {
      title: '下单',
      description: order.createTime ? toDateString(order.createTime, 'MM-dd HH:mm') : undefined
    },
    {
      title: '付款',
      description: undefined
    },
    {
      title: '发货',
      description: undefined
    },
    {
      title: '收货',
      description: undefined
    },
    {
      title: '完成',
      description: undefined
    }
  ];

  // 根据订单状态设置当前步骤
  if (order.orderStatus === 2) {
    // 已取消
    active.value = -1;
    steps.value = [
      {
        title: '下单',
        description: order.createTime ? toDateString(order.createTime, 'MM-dd HH:mm') : undefined
      },
      {
        title: '已取消',
        description: '订单已取消'
      }
    ];
  } else if (order.payStatus === 0) {
    // 未付款
    active.value = 0;
  } else if (order.payStatus === 1) {
    // 已付款
    active.value = 1;
    steps.value[1].description = order.payTime ? toDateString(order.payTime, 'MM-dd HH:mm') : '已付款';

    if (order.deliveryStatus === 20) {
      // 已发货
      active.value = 2;
      steps.value[2].description = order.deliveryTime ? toDateString(order.deliveryTime, 'MM-dd HH:mm') : '已发货';

      if (order.orderStatus === 1) {
        // 已完成
        active.value = 4;
        steps.value[3].description = '已收货';
        steps.value[4].description = '订单完成';
      }
    }
  }
};

// const getOrderInfo = () => {
//   const orderId = props.data?.orderId;
//   listOrderInfo({ orderId }).then((data) => {
//     orderGoods.value = data.filter((d) => d.totalNum > 0);
//   });
// };

/* 发货处理 */
const handleDelivery = () => {
  Modal.confirm({
    title: '确认发货',
    content: '确定要将此订单标记为已发货吗？',
    onOk: async () => {
      try {
        loading.value = true;
        await updateShopOrder({
          ...form,
          deliveryStatus: 20, // 已发货
          deliveryTime: new Date().toISOString()
        });
        message.success('发货成功');
        emit('done');
        updateVisible(false);
      } catch (error: any) {
        message.error(error.message || '发货失败');
      } finally {
        loading.value = false;
      }
    }
  });
};

/* 取消订单 */
const handleCancelOrder = () => {
  Modal.confirm({
    title: '确认取消订单',
    content: '确定要取消此订单吗？取消后无法恢复。',
    onOk: async () => {
      try {
        loading.value = true;
        await updateShopOrder({
          ...form,
          orderStatus: 2 // 已取消
        });
        message.success('订单已取消');
        emit('done');
        updateVisible(false);
      } catch (error: any) {
        message.error(error.message || '取消订单失败');
      } finally {
        loading.value = false;
      }
    }
  });
};

/* 删除订单 */
const handleDeleteOrder = () => {
  Modal.confirm({
    title: '确认删除订单',
    content: '确定要删除此订单吗？删除后无法恢复。',
    onOk: async () => {
      try {
        loading.value = true;
        if (form.orderId) {
          await removeShopOrder(form.orderId);
          message.success('订单已删除');
          emit('done');
          updateVisible(false);
        }
      } catch (error: any) {
        message.error(error.message || '删除订单失败');
      } finally {
        loading.value = false;
      }
    }
  });
};

/* 保存编辑 */
const save = () => {
  // 保留原有的保存功能
};

watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      if (props.data) {
        loading.value = true;
        assignObject(form, props.data);

        // 加载订单商品
        if (form.orderId) {
          listShopOrderGoods({orderId: form.orderId})
            .then((data) => {
              orderGoods.value = data || [];
            })
            .catch((error) => {
              console.error('加载订单商品失败:', error);
              orderGoods.value = [];
            })
            .finally(() => {
              loading.value = false;
            });
        } else {
          loading.value = false;
        }

        loadSteps(props.data);
      }
    } else {
      resetFields();
      orderGoods.value = [];
    }
  }
);
</script>

<script lang="ts">
import * as MenuIcons from '@/layout/menu-icons';

export default {
  name: 'BszxOrderInfo',
  components: MenuIcons
};
</script>
