<template>
  <q-markup-table flat dense bordered square wrap-cells separator="cell"
    class="lottery-item-table fixed-table bordered-table text-center" v-if="props.lottery">
    <template v-if="props.lottery.type == 'jczq' || props.lottery.type == 'jclq' || props.lottery.type== 'bjdc' || props.lottery.type=='bjdc_sfgg'">
      <thead>
        <tr class="bg-grey-4">
          <th style="width:68px;">场次</th>
          <th>对阵</th>
          <th>玩法</th>
          <th>选项(赔率)</th>
          <th style="width:76px;">彩果</th>
        </tr>
      </thead>
      <tbody v-if="props.sellings?.length">
        <template v-for="(selling, i) in props.sellings">
          <template v-for="(odd, j) in selling.play_items">
            <template v-for="(item, k) in odd.play_items" :key="i + '_' + j + '_' + k">
              <tr>
                <td v-if="j == 0 && k == 0" :rowspan="sellingRowspan(selling)">
                  {{ selling.issue_num_week }}{{ selling.play_num_view||selling.play_num }}
                </td>
                <td v-if="j == 0 && k == 0" :rowspan="sellingRowspan(selling)">
                  {{ selling.vs_b }}<span v-if="0"></span><br />
                  <span class="text-grey">{{ selling.vs_m }}</span><br />
                  {{ selling.vs_a }}
                </td>
                <td v-if="k == 0" :style="
                  j !== 0 ? 'border-left:1px solid rgba(0, 0, 0, 0.12);' : ''
                " :rowspan="odd.play_items.length">
                  {{ odd.play_name }}
                  <div v-if="odd.play_name_oth" class="text-blue">{{ odd.play_name_oth }}</div>
                </td>
                <td :style="
                  k !== 0 ? 'border-left:1px solid rgba(0, 0, 0, 0.12);' : ''
                " :class="item.wined?'text-red':''">
                  {{ item.name }}
                </td>
                <td v-if="k == 0" :rowspan="odd.play_items.length">{{ odd.win_result ?? "-" }}</td>
              </tr>
            </template>
          </template>
        </template>
      </tbody>
    </template>
    <template v-else-if="props.lottery.type == 'ctzq_jqc' || props.lottery.type == 'ctzq_bqc'">
      <!-- <thead>
        <tr class="bg-grey-4">
          <th v-for="item,i in props.sellings" :key="i">{{ item.no }}</th>
        </tr>
      </thead> -->
      <tbody>
        <tr v-for="(selling, i) in props.sellings" :key="i" :class="i == 0 ? 'bg-grey-4' : ''">
          <td v-for="(item, k) in selling" :key="k">
            {{ item }}
          </td>
        </tr>
      </tbody>
    </template>
    <template v-else-if="isNumberTottery(props.lottery.type)">
      <thead>
        <tr class="bg-grey-4">
          <th style="width:42px;">序号</th>
          <th style="width:6em;">玩法</th>
          <th style="width:100%;">投注</th>
          <th style="width:8em;">倍数金额</th>
        </tr>
      </thead>
      <tbody v-if="props.sellings?.length">
        <template v-for="(selling, i) in props.sellings" :key="i">
          <tr>
            <td>
              {{ i + 1 }}
            </td>
            <td>
              {{ NumberLottery[props.lottery.type][selling.play_type].name }}
            </td>
            <td>
              <template v-if="props.lottery.type == 'dlt'">
                <div v-if="selling.play_type == 'dantuo' " class="row wrap items-center">
                  <q-btn v-for="num, j in selling.play_odd.qian_dan" :key="j"
                    v-bind="props.win?.qian?.indexOf(num)>=0?{'class':'q-ma-xxs'}:{flat:true}"
                    class="num-btn"
                    round unelevated dense color="red" size="sm" rounded>
                    {{ num }}
                  </q-btn>
                  <span>#</span>
                  <q-btn v-for="num, j in selling.play_odd.qian_tuo" :key="j"
                    v-bind="props.win?.qian?.indexOf(num)>=0?{'class':'q-ma-xxs'}:{flat:true}"
                    class="num-btn"
                    round unelevated dense color="red" size="sm" rounded>
                    {{ num }}
                  </q-btn>
                  <span class="q-ml-sm"></span>
                  <q-btn v-for="num, j in selling.play_odd.hou_dan" :key="j"
                    v-bind="props.win?.hou?.indexOf(num)>=0?{'class':'q-ma-xxs'}:{flat:true}"
                    class="num-btn"
                    round unelevated dense color="blue" size="sm" rounded>
                    {{ num }}
                  </q-btn>
                  <span>#</span>
                  <q-btn v-for="num, j in selling.play_odd.hou_tuo" :key="j"
                    v-bind="props.win?.hou?.indexOf(num)>=0?{'class':'q-ma-xxs'}:{flat:true}"
                    class="num-btn"
                    round unelevated dense color="blue" size="sm" rounded>
                    {{ num }}
                  </q-btn>
                  <!-- <span class="text-red">{{ selling.play_odd.qian_dan.join(" ") }}</span>#<span class="text-red">{{ selling.play_odd.qian_tuo.join(" ") }}</span> -->
                  <!-- <span class="text-blue q-ml-sm">{{ selling.play_odd.hou_dan.join(" ") }}</span>#<span class="text-blue">{{ selling.play_odd.hou_tuo.join(" ") }}</span> -->
                </div>
                <div v-else class="row wrap items-center">
                  <q-btn v-for="num, j in selling.play_odd.qian" :key="j"
                    v-bind="props.win?.qian?.indexOf(num)>=0?{'class':'q-ma-xxs'}:{flat:true}"
                    class="num-btn"
                    round unelevated dense color="red" size="sm" rounded>
                    {{ num }}
                  </q-btn>
                  <q-btn v-for="num, j in selling.play_odd.hou" :key="j"
                    v-bind="props.win?.hou?.indexOf(num)>=0?{'class':'q-ma-xxs'}:{flat:true}"
                    class="num-btn"
                    round unelevated dense color="blue" size="sm" rounded>
                    {{ num }}
                  </q-btn>
                  <!-- <span class="text-red">{{ selling.play_odd.qian.join(" ") }}</span>
                  <span class="text-blue q-ml-sm">{{ selling.play_odd.hou.join(" ") }}</span> -->
                </div>
              </template>
              <template v-else>
                <div class="text-left">
                  <component :is="(props.lottery.type == 'pls' && selling.play_type == 'zhixuan_danshi')||(props.lottery.type == 'plw' && selling.play_type == 'fushi')||(props.lottery.type == 'qxc' && selling.play_type == 'fushi')?'div':'span'" v-for="item,i in selling.play_odd" :key="i">
                    <span v-if="props.lottery.type == 'qxc' && selling.play_type == 'fushi'">{{ NUMBER_ZN[i+1] }}：</span>
                    <span v-else-if="props.lottery.type == 'pls' && selling.play_type == 'zhixuan_danshi'">{{PLS_GROUP_NAME[i]}}：</span>
                    <span v-else-if="props.lottery.type == 'plw' && selling.play_type == 'fushi'">{{PLW_GROUP_NAME[i]}}：</span>
                    <span class="q-mx-xs" v-else-if="i"></span>
                    <template v-if="typeof(item) == 'object'">
                      <template v-for="num,j in item" :key="j" >
                        <span v-if="j">,</span>
                        <span :class="props.win?.result?.[i]==num?'text-red text-weight-bold':''">
                          {{ num }}
                        </span>
                      </template>
                    </template>
                    <template v-else>
                      <template v-if="props.lottery.type == 'pls'">
                        <span v-if="selling.play_type == 'zhixuan_fushi' || selling.play_type == 'zuxuan3'|| selling.play_type == 'zuxuan6'"
                        :class="props.win?.result?.indexOf(item)>=0?'text-red text-weight-bold':''">{{ item }}</span>
                        <span v-else-if="selling.play_type == 'zhixuan_hezhi' || selling.play_type == 'zuxuan_hezhi'"
                        :class="props.win?.hezhi==item?'text-red text-weight-bold':''">{{ item }}</span>
                      </template>
                      <span v-else class="">{{ item }}</span>
                    </template>
                  </component>
                </div>
              </template>
            </td>
            <td>
              {{ selling.bets_num }}倍 {{ selling.money }}元
            </td>
          </tr>
        </template>
      </tbody>
    </template>
    <template v-else-if="props.lottery.type.indexOf('ctzq_')==0">
      <thead>
        <tr class="bg-grey-4">
          <th></th>
          <th v-for="item,i in props.sellings" :key="i">{{ item.no }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="i in CTZQ_SFC_PLAY_TYPES.odds.options" :key="i">
          <td class="bg-grey-4">{{ CTZQ_SFC_PLAY_TYPES.odds[i] }}</td>
          <td v-for="(item, k) in props.sellings" :key="k">
            <q-icon v-if="item.buy_odds.findIndex(j=>i == j)>=0" name="check"/>
          </td>
        </tr>
      </tbody>
    </template>
    <template v-else-if="props.lottery.type === 'guan' || props.lottery.type === 'guan_ya'">
      <thead>
        <tr class="bg-grey-4">
          <th style="width:50px;">场次</th>
          <th>投注（赔率）</th>
        </tr>
      </thead>
      <tbody v-if="props.sellings?.length">
        <tr v-for="item,i in props.sellings" :key="i">
          <td>
            {{ i+1 }}
          </td>
          <td>
            <template v-if="props.lottery.type === 'guan'">{{ item.team_name }}</template>
            <template v-else>{{ item.team_a_name }} - {{ item.team_b_name }}</template>
            <span :class="item.show_state==='win'?'text-red':'text-grey'">（{{ item.odds }}）</span>
          </td>
        </tr>
      </tbody>
    </template>
    <slot></slot>
  </q-markup-table>
</template>
<script setup>
import {
  LOTTERY_STATE,
  ORDER_TYPE,
  TYPE_MODE,
  isNumberTottery,
  CTZQ_SFC_PLAY_TYPES
} from "src/utils/const";
import { NumberLottery,NUMBER_ZN } from 'src/utils/numberLottery'
const PLS_GROUP_NAME = ['百','十','个']
const PLW_GROUP_NAME = ['万','千','百','十','个']
function sellingRowspan(selling) {
  return selling.play_items.reduce((total, item) => {
    return total + item.play_items.length;
  }, 0);
}
const props = defineProps(["sellings", "lottery","win"]);
</script>
<style lang="scss" scoped>
.num-btn{
  min-width: 2.1em;min-height:2.1em;
}</style>
