<template>
  <div v-if="type == 'jczq'">
    <ScoreRanking :info="info" :type="type" :matchId="matchId"/>
    <HistoryMatch :info="info" :type="type" :matchId="matchId"/>
    <FutureMatch :info="info" :type="type" :matchId="matchId"/>
    <MatchStat :info="info" :type="type" :matchId="matchId"/>
  </div>
  <div v-else-if="info.analysis">
    <q-expansion-item class="bg-white q-mt-sm" default-opened>
      <template v-slot:header>
        <q-item-section class="text-subtitle text-weight-bold">
          历史交锋
        </q-item-section>
      </template>
      <q-markup-table flat dense wrap-cells class="markup-table border-tb-table text-center" stripe separator="cell"
        square>
        <thead>
          <tr class="bg-grey-2">
            <th>日期/赛事</th>
            <th>对阵比分</th>
            <!-- <th>让分</th> -->
            <!-- <th>总分</th> -->
          </tr>
        </thead>
        <tbody>
          <tr v-for="item, i in info.analysis.history" :key="i">
            <td>{{ item.start_time_str }}
              <br />{{ item.competition_name }}
            </td>
            <td>{{ item.away_team_name }} {{ item.away_score }} - {{ item.home_score }} {{ item.home_team_name }}</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
          </tr>
        </tbody>
      </q-markup-table>
    </q-expansion-item>
    <!-- <q-expansion-item class="bg-white q-mt-sm" default-opened>
          <template v-slot:header>
            <q-item-section class="text-subtitle text-weight-bold">
              皇冠赛前赔率
            </q-item-section>
          </template>
          <MarkupTable
            :data="[
              ['欧赔', 1, 2, 3, 4, 5, 6],
              ['亚盘', 1, 2, 3, 4, 5, 6],
              ['大小', 1, 2, 3, 4, 5, 6],
            ]"
            stripe
            separator="cell"
            square
            class="border-tb-table"
          />
        </q-expansion-item>

        <q-expansion-item class="bg-white q-mt-sm" default-opened>
          <template v-slot:header>
            <q-item-section class="text-subtitle text-weight-bold">
              积分排行
            </q-item-section>
          </template>
          <div class="q-px-md q-pb-sm">
            <user-avatar
              size="md"
              class="q-mr-sm border-no"
              src="xxx"
            ></user-avatar>
            sdsd
            <q-badge color="indigo-10" rounded> 欧冠杯 </q-badge>
          </div>
          <MarkupTable
            :header="[
              '',
              '赛',
              '胜',
              '平',
              '负',
              '得',
              '失',
              '净',
              '得分',
              '排行',
              '胜率',
            ]"
            :y-header="['总', '主', '客']"
            :data="[
              [1, 2, 3, 4, 5, 6, 7, 8, 9, '40%'],
              [1, 2, 3, 4, 5, 6, 7, 8, 9, '40%'],
              [1, 2, 3, 4, 5, 6, 7, 8, 9, '40%'],
            ]"
            separator="cell"
            square
            class="border-tb-table"
          />
        </q-expansion-item> -->
  </div>
</template>
<script setup>
import { toRef } from 'vue';
import HistoryMatch from './history/HistoryMatch.vue'
import FutureMatch from './FutureMatch.vue'
import ScoreRanking from './ScoreRanking.vue'
import MatchStat from './MatchStat.vue'
const props = defineProps({
  info: {
    type: Object,
    default() {
      return {}
    }
  },
  type: {
    type: String
  },
  matchId: {
    type: String
  }
})
const info = toRef(props, 'info')
</script>
<style lang="scss" scoped></style>
