<template>
  <view class="container">
    <view class="name">立即收款</view>
    <view class="input">
      <input v-model="val" type="digit" placeholder="请输入收款金额" />
      <view class="line"></view>
    </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>
        <view class="desc">
          <view>总计: {{ data.count }}份</view>
          <view
            >应付款: <text style="color: red">¥{{ data.payments }}</text></view
          >
        </view>
      </view>
    </view>
    <view class="btn" @click="ok">立即收款</view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { getAfterOrder, createPayQr } from "../../../../../api/admin";

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

const val = ref("");

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

const get_data = async ({ bid, oid }) => {
  Taro.showLoading({
    title: "加载中",
  });
  const res = await getAfterOrder({ bid, 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 "挂帐中";
  }
};

const ok = async () => {
  if (!val.value)
    return Taro.showToast({
      title: "请输入收款金额",
      icon: "none",
    });
  const res = await createPayQr({
    oid: data.value.oid,
    bid: data.value.bid,
    price: Number(val.value),
  });
  Taro.setStorageSync("pay_code", res.data.data.code_url);
  Taro.navigateTo({
    url: `/pages/admin/add_order/pending_order/wx_pay_code/index?oid=${data.value.oid}&bid=${data.value.bid}`,
  });
};
</script>

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