<!-- 用户编辑弹窗 -->
<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-steps-->
    <!--        :current="active"-->
    <!--        direction="horizontal"-->
    <!--        :responsive="styleResponsive"-->
    <!--      >-->
    <!--        <template v-for="(item, index) in steps" :key="index">-->
    <!--          <a-step-->
    <!--            :title="item.title"-->
    <!--            :description="timeAgo(item.description)"-->
    <!--          />-->
    <!--        </template>-->
    <!--      </a-steps>-->
    <!--    </a-card>-->
    <a-card title="订单详情" class="order-card">
      <!--      <a-space>-->
      <!--        <a-button>发货</a-button>-->
      <!--        <a-button>商家备注</a-button>-->
      <!--        <a-button>打印小票</a-button>-->
      <!--      </a-space>-->
      <a-row :gutter="16">
        <a-col
          v-bind="
            styleResponsive
              ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
              : { span: 8 }
          "
        >
          <a-form-item label="订单号" name="orderId">
            <span>{{ order.orderId }}</span>
          </a-form-item>
        </a-col>
        <a-col
          v-bind="
            styleResponsive
              ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
              : { span: 8 }
          "
        >
          <a-form-item label="实付款金额" name="payPrice">
            <span class="ele-text-warning"
              >￥{{ formatNumber(order.payPrice) }}</span
            >
          </a-form-item>
        </a-col>
        <a-col
          v-bind="
            styleResponsive
              ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
              : { span: 8 }
          "
        >
          <a-form-item label="订单状态" name="orderStatus">
            <a-tag>{{ order.payStatus === 20 ? '已下单' : '' }}</a-tag>
          </a-form-item>
        </a-col>
        <a-col
          v-bind="
            styleResponsive
              ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
              : { span: 8 }
          "
        >
          <a-form-item label="买家信息" name="deliveryType">
            <router-link :to="'/system/user/details?id=' + order.userId">
              <span class="ele-text-primary">{{ order.nickname }}</span>
            </router-link>
          </a-form-item>
        </a-col>
        <a-col
          v-bind="
            styleResponsive
              ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
              : { span: 8 }
          "
        >
          <a-form-item label="预定日期" name="deliveryTime">
            {{ toDateString(order.deliveryTime, 'yyyy-MM-dd') }}
          </a-form-item>
        </a-col>
        <a-col
          v-bind="
            styleResponsive
              ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
              : { span: 8 }
          "
        >
          <a-form-item label="下单时间" name="createTime">
            {{ order.createTime }}
          </a-form-item>
        </a-col>
        <a-col
          v-bind="
            styleResponsive
              ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
              : { span: 8 }
          "
        >
          <a-form-item label="交易流水号" name="orderNo">
            {{ order.orderNo }}
          </a-form-item>
        </a-col>
        <a-col
          v-bind="
            styleResponsive
              ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
              : { span: 8 }
          "
        >
          <a-form-item label="买家留言" name="buyerRemark">
            <span>{{ order.buyerRemark }}</span>
          </a-form-item>
        </a-col>
        <a-col
          v-bind="
            styleResponsive
              ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
              : { span: 8 }
          "
        >
          <a-form-item label="订单备注" name="comments">
            <span>{{ order.comments }}</span>
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>
    <a-card title="菜品信息" class="order-card">
      <a-spin :spinning="loading">
        <a-table
          :data-source="orderGoodsList"
          :columns="columns"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'goodsName'">
              <div class="goods-info">
                <a-image
                  v-if="record.imageUrl"
                  :src="record.imageUrl"
                  :preview="false"
                  :width="50"
                />
                <div class="info">
                  <div>{{ record.goodsName }}</div>
                  <div class="ele-text-placeholder">{{ record.comments }}</div>
                </div>
              </div>
            </template>
          </template>
        </a-table>
      </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, toDateString } from 'ele-admin-pro';
  import { useThemeStore } from '@/store/modules/theme';
  import { formatNumber } from 'ele-admin-pro/es';
  import { storeToRefs } from 'pinia';
  import { Order } from '@/api/order/model';
  import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
  import { OrderGoods } from '@/api/order/goods/model';
  import { getOrder } from '@/api/order';
  import { listOrderGoods } from '@/api/order/goods';

  const useForm = Form.useForm;
  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  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 orderGoodsList = ref<OrderGoods[]>([]);

  // 步骤条
  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 order = reactive<Order>({
    orderId: undefined,
    orderNo: '',
    userId: undefined,
    orderSourceData: '',
    nickname: '',
    comments: '',
    createTime: undefined,
    deliveryTime: '',
    payPrice: undefined,
    payStatus: undefined
  });

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

  const { resetFields } = useForm(order);

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

  const columns = ref<ColumnItem[]>([
    // {
    //   title: '菜品ID',
    //   dataIndex: 'goodsId'
    // },
    {
      title: '菜品信息',
      dataIndex: 'goodsName',
      key: 'goodsName'
    },
    {
      title: '菜品价格',
      dataIndex: 'goodsPrice',
      customRender: ({ text }) => '￥' + text
    },
    {
      title: '购买数量',
      dataIndex: 'totalNum',
      key: 'totalNum'
    }
  ]);

  /* 制作步骤条 */
  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 queryOrder = () => {
    var orderId = props.data?.orderId;
    getOrder(orderId).then((res) => {
      assignObject(order, res);
    });
  };

  const getOrderGoods = () => {
    const orderId = props.data?.orderId;
    listOrderGoods({ orderId }).then((data) => {
      orderGoodsList.value = data;
    });
  };

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

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