<template>
  <view>
    <view class="card">
      <view class="header">
        <view>
          <text>台号: {{ data.seat }}</text>
          <text>点单人: {{ data.PlaceUser?.nickName }}</text>
        </view>
        <view
          :style="{
            color: get_color(data.status),
            fontWeight: 'bold',
          }"
          >{{ get_status_text(data.status) }}</view
        >
      </view>
      <view class="line"></view>
      <view class="goods-list" v-for="(itm, idx) in data.OrderGoods" :key="idx">
        <image :src="itm.Goods.cover"></image>
        <view class="center">
          <nut-ellipsis
            direction="end"
            :content="itm.Goods.name"
          ></nut-ellipsis>
          <!-- <view class="title">{{ itm.Goods.name }}</view> -->
        </view>
        <view class="num">
          <view>x{{ itm.pay_price }}</view>
          <view>x{{ itm.number }}</view>
        </view>
      </view>
      <view class="line"></view>
    </view>
    <nut-cell-group>
      <nut-cell>
        <template #title>
          <text>订单信息</text>
        </template>
      </nut-cell>
      <nut-cell title="台号" :desc="data.seat"></nut-cell>
      <nut-cell title="客人手机号" :desc="data.phone"></nut-cell>
      <nut-cell title="订单号" :desc="data.oid"></nut-cell>
      <nut-cell title="点单人" :desc="data.PlaceUser?.nickName"></nut-cell>
      <nut-cell title="下单时间" :desc="data.add_time"></nut-cell>
      <nut-cell title="收款时间" :desc="data.payment_time"></nut-cell>
      <nut-cell title="挂帐时间" :desc="data.payment_time"></nut-cell>
      <nut-cell
        title="订单状态"
        :desc="get_status_text(data.status)"
      ></nut-cell>
      <nut-cell title="下单数量" :desc="String(data.count)"></nut-cell>
      <nut-cell title="订单金额" :desc="String(data.payments)"></nut-cell>
      <nut-cell title="应收金额" :desc="String(data.payments)"></nut-cell>
      <nut-cell title="实收金额" :desc="String(data.pay_amount)"></nut-cell>
      <nut-cell title="抹零" :desc="String(data.zero)"></nut-cell>
      <nut-cell title="收款方式" desc="微信"></nut-cell>
      <nut-cell title="备注" :desc="data.notes"></nut-cell>
    </nut-cell-group>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { getUserAfterOrderDetail } from "../../../../api/user";

const data = ref<any>({});

const params = ref<any>({});

Taro.useLoad((e: any) => {
  params.value = e;
  get_data();
});

const get_data = async () => {
  Taro.showLoading({
    title: "加载中",
  });
  const res = await getUserAfterOrderDetail({
    bid: params.value.bid,
    oid: params.value.oid,
  });
  data.value = res.data.data;
  Taro.hideLoading();
};

const get_color = (status: number) => {
  switch (status) {
    case 0:
      return "#FD0100";
    case 1:
      return "#03A113";
    case 2:
      return "#FFA938";
  }
};

const get_status_text = (status: number) => {
  switch (status) {
    case 0:
      return "未付款";
    case 1:
      return "已付款";
    case 2:
      return "挂帐中";
  }
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
