<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    :width="`80%`"
    :visible="visible"
    :confirm-loading="loading"
    :maxable="maxAble"
    :title="isUpdate ? '编辑订单' : '订单详情'"
    :body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
    @update:visible="updateVisible"
    :maskClosable="false"
    :footer="null"
    @ok="save"
  >
    <a-card class="order-card" :bordered="false">
      <a-descriptions title="基本信息" :column="3">
        <a-descriptions-item
          label="订单号"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          {{ form.orderId }}
        </a-descriptions-item>
        <a-descriptions-item
          label="订单编号"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          {{ form.orderNo }}
        </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">已付款</a-tag>
          <a-tag v-if="form.orderStatus == 3">已取消</a-tag>
          <a-tag v-if="form.orderStatus == 4">退款申请中</a-tag>
          <a-tag v-if="form.orderStatus == 5">退款被拒绝</a-tag>
          <a-tag v-if="form.orderStatus == 6">退款成功</a-tag>
          <a-tag v-if="form.orderStatus == 7">客户端申请退款</a-tag>
        </a-descriptions-item>
        <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 }}
        </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' }"
        >
          ￥{{ form.totalPrice }}
        </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' }"
        >
          ￥{{ form.reducePrice }}
        </a-descriptions-item>
        <a-descriptions-item
          label="支付方式"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          <template v-if="form.payStatus == 1">
            <a-tag v-if="form.payType == 1">微信支付</a-tag>
            <a-tag v-if="form.payType == 2">积分</a-tag>
            <a-tag v-if="form.payType == 3">支付宝</a-tag>
            <a-tag v-if="form.payType == 4">现金</a-tag>
            <a-tag v-if="form.payType == 5">POS机</a-tag>
            <a-tag v-if="form.payType == 6">VIP月卡</a-tag>
            <a-tag v-if="form.payType == 7">formVIP年卡</a-tag>
            <a-tag v-if="form.payType == 8">formVIP次卡</a-tag>
            <a-tag v-if="form.payType == 9">formIC月卡</a-tag>
            <a-tag v-if="form.payType == 10">formIC年卡</a-tag>
            <a-tag v-if="form.payType == 11">formIC次卡</a-tag>
            <a-tag v-if="form.payType == 12">form免费</a-tag>
            <a-tag v-if="form.payType == 13">formVIP充值卡</a-tag>
            <a-tag v-if="form.payType == 14">formIC充值卡</a-tag>
            <a-tag v-if="form.payType == 15">form积分支付</a-tag>
            <a-tag v-if="form.payType == 16">formVIP季卡</a-tag>
            <a-tag v-if="form.payType == 17">formIC季卡</a-tag>
          </template>
          <template v-else>
            <span></span>
          </template>
        </a-descriptions-item>
        <a-descriptions-item
          label="支付状态"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          <a-tag v-if="form.payStatus == 1" color="green"
            ><CheckOutlined class="tag-icon" />已付款</a-tag
          >
          <a-tag v-if="form.payStatus == 0" color="error"
            ><CloseOutlined class="tag-icon" />未付款</a-tag
          >
          <a-tag v-if="form.payStatus == 3" color="cyan"
            ><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag
          >
        </a-descriptions-item>
        <a-descriptions-item
          label="付款时间"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          {{ form.payTime }}
        </a-descriptions-item>
        <a-descriptions-item
          label="下单时间"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          {{ form.createTime }}
        </a-descriptions-item>
        <a-descriptions-item
          label="信息备注"
          :labelStyle="{ width: '90px', color: '#808080' }"
        >
          {{ form.comments }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="order-card" :bordered="false">
      <a-spin :spinning="loading">
        <a-table
          :data-source="form.orderInfoList"
          :columns="columns"
          :pagination="false"
        />
      </a-spin>
    </a-card>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';
  import { Form } from 'ant-design-vue';
  import { assignObject } from 'ele-admin-pro';
  import { Order } from '@/api/shop/order/model';
  import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
  import {
    CheckOutlined,
    CloseOutlined,
    CoffeeOutlined
  } from '@ant-design/icons-vue';

  const useForm = Form.useForm;

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

  export interface step {
    title?: String | undefined;
    subTitle?: String | undefined;
    description?: String | undefined;
  }

  // 是否是修改
  const isUpdate = ref(false);
  // 是否显示最大化切换按钮
  const maxAble = ref(true);

  // 步骤条
  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<Order>({
    orderId: undefined,
    orderNo: undefined,
    transactionId: undefined,
    refundOrder: undefined,
    merchantId: undefined,
    couponId: undefined,
    cardId: undefined,
    adminId: undefined,
    confirmId: undefined,
    icCard: undefined,
    realName: undefined,
    phone: undefined,
    totalPrice: undefined,
    reducePrice: undefined,
    payPrice: undefined,
    price: undefined,
    money: undefined,
    refundMoney: undefined,
    coachPrice: undefined,
    coachId: undefined,
    payType: undefined,
    payStatus: undefined,
    orderStatus: undefined,
    couponType: undefined,
    couponDesc: undefined,
    qrcode: undefined,
    returnNum: undefined,
    returnMoney: undefined,
    startTime: undefined,
    isInvoice: undefined,
    payTime: undefined,
    refundTime: undefined,
    refundApplyTime: undefined,
    checkBill: undefined,
    isSettled: undefined,
    version: undefined,
    userId: undefined,
    deleted: undefined,
    tenantId: undefined,
    updateTime: undefined,
    createTime: undefined,
    status: 0,
    comments: '',
    sortNumber: 100,
    orderInfoList: []
  });

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

  const { resetFields } = useForm(form);

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

  const columns = ref<ColumnItem[]>([
    {
      title: '场馆名称',
      dataIndex: 'merchantName',
      key: 'merchantName'
    },
    {
      title: '场地',
      dataIndex: 'fieldName'
    },
    {
      title: '预定信息',
      dataIndex: 'comments',
      key: 'comments'
    },
    {
      title: '金额',
      dataIndex: 'price',
      customRender: ({ text }) => '￥' + text
    }
  ]);

  /* 制作步骤条 */
  const loadSteps = (order) => {
    steps.value = [];
    steps.value.push({
      title: '下单'
    });
    steps.value.push({
      title: '付款'
    });
    steps.value.push({
      title: '发货'
    });
    steps.value.push({
      title: '收货'
    });
    steps.value.push({
      title: '完成'
    });

    // 下单
    if (order.payStatus == 10) {
      active.value = 0;
      steps.value[0].description = order.createTime;
    }
    // 付款
    if (order.payStatus == 20) {
      active.value = 1;
      steps.value[0].description = order.createTime;
      steps.value[1].description = order.payTime;
    }
    // 发货
    if (order.payStatus == 20 && order.deliveryStatus == 20) {
      active.value = 2;
      steps.value[0].description = order.createTime;
      steps.value[1].description = order.payTime;
      steps.value[2].description = order.deliveryTime;
    }
    // 收货
    if (order.payStatus == 20 && order.receiptStatus == 20) {
      active.value = 3;
      steps.value[0].description = order.createTime;
      steps.value[1].description = order.payTime;
      steps.value[2].description = order.deliveryTime;
      steps.value[3].description = order.receiptTime;
    }
    // 完成
    if (order.payStatus == 20 && order.orderStatus == 30) {
      active.value = 4;
      steps.value[0].description = order.createTime;
      steps.value[1].description = order.payTime;
      steps.value[2].description = order.deliveryTime;
      steps.value[3].description = order.receiptTime;
    }
    // 已取消
    if (order.orderStatus == 20) {
      active.value = 4;
    }
  };

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

  /* 保存编辑 */
  const save = () => {};

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        if (props.data) {
          loading.value = false;
          assignObject(form, props.data);
          loadSteps(props.data);
        }
      } else {
        resetFields();
      }
    }
  );
</script>
<style lang="less" scoped>
  .order-card {
    margin-bottom: 20px;
  }
  .ant-form-item {
    margin-bottom: 5px;
  }
  .order-info {
    display: flex;
    .info {
      padding-left: 5px;
      display: flex;
      flex-direction: column;
    }
  }
  .tag-icon {
    padding-right: 6px;
  }
</style>
