<script setup lang="ts" name="GoalDistribution">
// $import
import { defineProps } from "vue";
// $import

// types
interface ScoreDistributionInfo {
  home: { value: number; class: string[] }[];
  home_total_score: number;
  guest: { value: number; class: string[] }[];
  guest_total_score: number;
}

interface GoalDistributionProps {
  gameInfo: any;
  gameDetail: any;
  goalPeriod: any[];
  scoreDistribution: ScoreDistributionInfo;
}
// types

// $props
const props = withDefaults(defineProps<GoalDistributionProps>(), {
  gameInfo: () => ({}),
  gameDetail: () => ({}),
  goalPeriod: () => [],
});
// $props

// $data
// const scoreDistribution = reactive<ScoreDistributionInter>({
//   home: [],
//   guest: [],
// });

// const goalPeriod = reactive(["30~45", "0~15", "75~90"]);
// $data
</script>

<template>
  <div class="goal-distribution-section">
    <div class="header-wrapper">
      <div class="title">进球分布</div>
      <div class="sub-title">同赛事进球统计结果</div>
    </div>

    <div class="goal-distribution-table">
      <div class="dis-table-row header">
        <div class="dis-table-col">球队</div>
        <div class="dis-table-col">总</div>
        <div class="dis-table-col">15'</div>
        <div class="dis-table-col">30'</div>
        <div class="dis-table-col">45'</div>
        <div class="dis-table-col">60'</div>
        <div class="dis-table-col">75'</div>
        <div class="dis-table-col">90'</div>
      </div>
      <div class="dis-table-row">
        <div class="dis-table-col">
          <div
            class="logo"
            :style="`background-image: url(${props.gameInfo?.host_photo});`"
          ></div>
          <p class="name">{{ props.gameInfo?.host_name }}</p>
        </div>
        <div class="dis-table-col">
          {{ props.scoreDistribution?.home_total_score || 0 }}
        </div>
        <template v-if="props.gameDetail?.goal_distribution?.home?.all?.scored">
          <div
            v-for="(item, index) in props.scoreDistribution?.home"
            :key="index"
            :class="item.class"
          >
            {{ item?.value || 0 }}
          </div>
        </template>
      </div>
      <div class="dis-table-row">
        <div class="dis-table-col">
          <div
            class="logo"
            :style="`background-image: url(${props.gameInfo?.away_photo});`"
          ></div>
          <p class="name">{{ props.gameInfo?.away_name }}</p>
        </div>
        <div class="dis-table-col">
          {{ props.scoreDistribution?.guest_total_score || 0 }}
        </div>
        <template v-if="props.gameDetail?.goal_distribution?.away?.all?.scored">
          <div
            v-for="(item, index) in props.scoreDistribution?.guest"
            :key="index"
            :class="item.class"
          >
            {{ item?.value || 0 }}
          </div>
        </template>
      </div>
    </div>

    <div class="text-content">
      两队最容易进球的时间段为<span class="highlight-text"
        >{{ props.goalPeriod?.[0].start || "__" }}~{{
          props.goalPeriod?.[0].end || "__"
        }}</span
      >分钟，其次为{{ props.goalPeriod?.[1].start || "__" }}~{{
        props.goalPeriod?.[1].end || "__"
      }}分钟和 {{ props.goalPeriod?.[2].start || "__" }}~{{
        props.goalPeriod?.[2].end || "__"
      }}分钟。
    </div>
  </div>
</template>

<style lang="scss">
@use '@/common/style/common' as *;
.goal-distribution-section {
  overflow-x: auto;

  .text-content {
    padding: 10px 15px;
    color: #7b7b7b;
    text-wrap: wrap;
    font-size: 14px;
    padding-bottom: 15px;
  }

  .highlight-text {
    text-wrap: wrap;
  }

  .header-wrapper {
    width: 100%;
    padding: 10px 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-weight: 500;
    }

    .sub-title {
      color: #b3b3b3;
      font-size: 12px;
    }
  }

  .goal-distribution-table {
    position: relative;
    overflow: auto;
    padding: 0 15px;

    .dis-table-row {
      display: flex;
      font-size: 12px;
      text-align: center;
      background-color: #fff;

      gap: 1px;

      &.header {
        color: #aaaaaa;
      }
    }

    .dis-table-col {
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;

      &:nth-child(1) {
        flex: 1;
      }
      &:not(:first-of-type) {
        width: 30px;
        height: 30px;
      }
    }

    .dis-table-row:not(.header) {
      border-bottom: 1px solid #ffffff;
      .dis-table-col {
        // 样式层叠性
        &:not(:first-child) {
          background: #f5f5f5;
        }
        &.super {
          color: #ffffff;
          background-color: #ffc9c9;
        }
        &.top_two {
          color: #e7322c;
        }
        &.first {
          color: #ffffff;
          background-color: #ff7676;
        }

        &:first-child {
          justify-content: flex-start;
        }
      }
    }

    .logo {
      width: 20px;
      height: 20px;
      margin-right: 8px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}
</style>