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

// types
interface ApprovalRatingProps {
  voteInfo: any;
  gameInfo: any;
}
// types

// $props
const props = withDefaults(defineProps<ApprovalRatingProps>(), {
  voteInfo: () => ({}),
  gameInfo: () => ({}),
});
// $props
</script>

<template>
  <div class="approval-rating-section">
    <div class="top">
      <div>
        <span class="team-name">{{ props.gameInfo?.host_name }}</span>
        {{ props.voteInfo?.win_num }}%
      </div>
      <div>支持率</div>
      <div>
        <span class="team-name">{{ props.gameInfo?.away_name }}</span>
        {{ props.voteInfo?.lose_num }}%
      </div>
    </div>
    <div class="rate-range-wrapper">
      <div
        class="team_logo left"
        :style="`margin-left: ${
          props.voteInfo?.win_num / 10
        }px;background-image: url(${props.gameInfo?.away_photo});`"
      ></div>
      <div
        class="team_logo right"
        :style="`margin-right: ${
          props.voteInfo?.lose_num / 10
        }px;background-image: url(${props.gameInfo?.host_photo});`"
      ></div>
      <div :style="`width: ${props.voteInfo?.win_num}%`" class="win">
        <span>{{ props.voteInfo?.win }}</span>
      </div>
      <div
        :style="`width: ${props.voteInfo?.draw_num}%; margin-left: ${
          -props.voteInfo?.win_num / 10 + props.voteInfo?.lose_num / 10
        }px`"
        class="draw"
      >
        <span>{{ props.voteInfo?.draw }}</span>
      </div>
      <div :style="`width: ${props.voteInfo?.lose_num}%`" class="lose">
        <span>{{ props.voteInfo?.lose }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@use '@/common/style/common' as *;
.approval-rating-section {
  padding: 10px;
  padding-bottom: 20px;
  background-color: #fff;
  border-bottom: #f5f5f5 10px solid;

  .top {
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    .team-name {
      color: #999;
    }
    .look {
      @include sc(12px, #b2b2b2);
    }
  }

  .rate-range-wrapper {
    position: relative;
    padding: 8px 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 25px;
    // overflow: hidden;

    .win {
      color: #ff3333;
      background-color: #ff3333;
      border-radius: 20px 6px 6px 50px; /* 左边圆角 */
      transform: skewY(-20deg) rotate(20deg);
    }

    .draw {
      color: #00c423;
      background-color: #00c423;
      border-radius: 6px;
      transform: skewY(-20deg) rotate(20deg);
    }

    .lose {
      color: #1f78ff;
      background-color: #1f78ff;
      border-radius: 6px 50px 20px 6px; /* 右边圆角 */
      transform: skewY(-20deg) rotate(20deg);
    }

    .team_logo {
      position: absolute;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 50%;
      transform: translateY(-50%);
      z-index: 9;

      &.left {
        left: 8px;
        top: 50%;
      }

      &.right {
        right: 8px;
        top: 50%;
      }
    }

    div {
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;

      span {
        position: relative;
        bottom: -22px;
        transform: skewY(20deg) rotate(-20deg);
      }
    }
  }
}
</style>
