<template>
  <LoadingView :loading="loading" @refresh="getOrderTickets" class="q-px-md">
    <div v-if="tickets.piao_num" class="text-subtitle text-center q-pb-md text-weight-bold">
      <span v-if="tickets.money">方案总金额<span class="text-orange q-px-xxs">{{ formatMoney(tickets.money) }}</span>元</span>
      <span v-if="tickets.piao_num" class="q-pl-md">共<span class="text-red q-px-xxs">{{ tickets.piao_num
      }}</span>张票</span>
    </div>
    <template v-if="isNumberTottery(props.lottery.type)">
      <q-markup-table flat dense bordered square wrap-cells separator="cell"
        class="markup-table bordered-table text-center q-mb-md">
        <thead>
          <tr class="bg-grey-4">
            <td>玩法</td>
            <td>投注内容</td>
            <td>倍数</td>
            <td>金额</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="piao, i in tickets.piaos" :key="i">
            <td>{{ piao.play_type_name }}</td>
            <td v-if="piao.play_type=='dantuo'">
            <div>前区胆：{{ piao.qian_dan.join(' ') }}</div>
            <div>前区拖：{{ piao.qian_tuo.join(' ') }}</div>
            <div>后区胆：{{ piao.hou_dan.join(' ') }}</div>
            <div>后区胆：{{ piao.huo_tuo.join(' ') }}</div>
            </td>
            <td v-else-if="piao.play_type=='fushi'">
              <div >{{ piao.fushi }}</div>
            </td>
            <td v-else>
              <div v-for="odd, i in piao.play_odd" :key="i">{{ odd[piao.play_type] }}</div>
            </td>
            <td>{{ piao.bets_num }}倍<span class="text-red q-ml-xs">{{ piao.piao_num||1 }}</span>张</td>
            <td class="text-red">{{ piao.money }}</td>
          </tr>
        </tbody>
      </q-markup-table>
    </template>
    <template v-else>
      <q-markup-table v-for="piao, i in tickets.piaos" :key="i" flat dense bordered square wrap-cells separator="cell"
        class="markup-table bordered-table text-center q-mb-md">
        <thead>
          <tr class="bg-grey-4">
            <td v-for="item, idx in piao.header" :key="idx">{{ item.title }}</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td v-for="(item, idx) in piao.header" :key="idx">
              <template v-if="item.prop == 'nums'">
                <span class="text-orange">{{ piao.data[item.prop] }}</span>
              </template>
              <template v-else-if="typeof piao.data[item.prop] == 'object'">
                <div v-for="name, j in piao.data[item.prop]" :key="j">{{ name }}</div>
              </template>
              <template v-else>{{ piao.data[item.prop] }}</template>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td :colspan="piao.header.length">
              单票金额<span class="text-orange">{{ piao.piao_money }}</span>元　单票最高奖金<span class="text-orange">{{ piao.prize_max }}</span>元</td>
          </tr>
        </tfoot>
      </q-markup-table>
    </template>
  </LoadingView>
</template>
<script setup>
import { api } from "boot/axios";
import { LOTTERY_STATE, ORDER_TYPE, TYPE_MODE, isNumberTottery } from "src/utils/const";
import { formatMoney } from 'src/utils/tools'
import { ref, watch, shallowRef, defineProps } from 'vue';
const loading = ref(false);
const tickets = shallowRef([]);
const props = defineProps(['orderSn', 'lottery'])
getOrderTickets();
function getOrderTickets() {
  loading.value = true;
  api.getOrderTickets({ order_sn: props.orderSn })
    .then((res) => {
      tickets.value = res
      loading.value = false;
    })
    .catch((e) => {
      loading.value = e.message;
    });
}
</script>
