<template>
  <div class="toning-result">
    <template v-if="sendMode == 'openingToningResult'">
      <div class="text">
        {{
          result == 1 || result == 3
            ? Lang[Type].odd
            : result == 0 || result == 2 || result == 4
            ? Lang[Type].even
            : ""
        }}
      </div>
      <span class="round" :class="{ red: result == 3 || result == 4 }"></span>
      <span class="round" :class="{ red: result == 3 || result == 4 }"></span>
      <span
        class="round"
        :class="{ red: result == 2 || result == 3 || result == 4 }"
      ></span>
      <span
        class="round"
        :class="[
          { red: result == 1 || result == 2 || result == 4 },
          { black: result == 0 || result == 3 }
        ]"
      >
        {{ result }}
      </span>
      <div class="text">
        {{
          result == 0 || result == 1
            ? Lang[Type].small
            : result == 3 || result == 4
            ? Lang[Type].big
            : ""
        }}
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "toningResult",
  props: {
    result: {
      type: Number,
      default: null
    },
    sendMode: {
      type: String,
      default: ""
    }
  },
  computed: {
    ...mapState({
      Lang: (state) => state.config.$lang,
      Type: (state) => state.config.$Type
    })
  }
}
</script>
<style lang="scss" scoped>
.toning-result {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateX(0deg);
  .text {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0.2rem;
    color: #ddd;
  }
  .round {
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background: #ddd;
    margin: 0 0.3rem;
    line-height: 1rem;
    text-align: center;
    font-size: 0.55rem;
    font-weight: 600;
    color: #fff;
    &.black {
      color: #222;
    }
    &.red {
      background: #fe8365;
    }
  }
}
</style>
