<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div style="display: inline-block; font-size: larger">{{ type }}</div>
      <div
        style="
          display: inline-block;
          margin-left: 350px;
          font-size: small;
          color: gray;
        "
      >
        {{ time }}
      </div>
      <span style="float: right; height: 5px; font-weight: 600">completed</span>
    </div>
    <div class="text item">
      <div
        v-show="winner_1"
        style="display: inline-block; font-size: large; font-weight: 600"
      >
        {{ player_1 }}
      </div>
      <div
        v-show="winner_1"
        style="float: right; font-size: large; font-weight: 600"
      >
        {{
          score_1[0] + " " + score_1[1] + " " + score_1[2] + " " + score_1[3]
        }}
      </div>
      <div v-show="winner_2" style="display: inline-block; font-size: large">
        {{ player_1 }}
      </div>
      <div v-show="winner_2" style="float: right; font-size: large">
        {{
          score_1[0] + " " + score_1[1] + " " + score_1[2] + " " + score_1[3]
        }}
      </div>
      <div
        style="float: right; font-size: large; color: blue"
        v-show="winner_1"
      >
        win √
      </div>
    </div>
    <el-divider></el-divider>
    <div class="text item">
      <div
        v-show="winner_2"
        style="display: inline-block; font-size: large; font-weight: 600"
      >
        {{ player_2 }}
      </div>
      <div
        v-show="winner_2"
        style="float: right; font-size: large; font-weight: 600"
      >
        {{
          score_2[0] + " " + score_2[1] + " " + score_2[2] + " " + score_2[3]
        }}
      </div>
      <div v-show="winner_1" style="display: inline-block; font-size: large">
        {{ player_2 }}
      </div>
      <div v-show="winner_1" style="float: right; font-size: large">
        {{
          score_2[0] + " " + score_2[1] + " " + score_2[2] + " " + score_2[3]
        }}
      </div>
      <div
        style="float: right; font-size: large; color: blue"
        v-show="winner_2"
      >
        win √
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  props: [
    "type",
    "time",
    "player_1",
    "player_2",
    "score_1",
    "score_2",
    "winner_1",
    "winner_2"
  ]
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 430px;
}
</style>