<template>
  <div class="record">
    <div class="info-block">
      <div class="time">
        <div style="font-size: 16px;">最后登入机器</div>
        <div>2023-07-06</div>
        <div>23:23:23</div>
      </div>
      <div class="game-img">
        <div class="box">
          <img :src="data.gameImg | img" alt="">
        </div>
      </div>
      <div class="info">
        <!-- 空闲 -->
        <img v-show="data.deviceStatus === 1" class="state-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/Available_zh.png" alt="">
        <!-- 异常 -->
        <img v-show="data.deviceStatus === 2" class="state-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/In%20Service.png" alt="">
        <!-- 游戏中 -->
        <img v-show="data.deviceStatus === 3" class="state-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Occupied.png" alt="">
        <div>游戏名称：{{ data.gameNameEn }}</div>
        <div>机台号：{{ data.egmId }}</div>
        <div>最高投注额：{{ data.maxBet }}</div>
        <div>多选注额：{{ data.multidenom }}</div>
      </div>
    </div>
    <div class="data">
      <div class="column">
        <div>下注</div>
        <div>输/赢</div>
        <div>游戏</div>
        <div>彩金记录</div>
        <div>总游戏时间</div>
      </div>
      <div class="row">
        <div>0.00</div>
        <div>0.00</div>
        <div>{{ data.gameNameEn }}</div>
        <div>0.00</div>
        <div>{{ data.sessionLengthDisplay }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.record {
  color: #14afbb;
  border-bottom: 1px solid #cccccc17;
  margin-top: 6px;
  margin-bottom: 12px;
  .info-block {
    display: flex;
    .time {
      flex: 1;
      text-align: right;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 20px;
    }
    .game-img{
      padding: 6px 12px;
      flex: 1;
      .box {
        border: 1px solid #006643;
        border-radius: 10px;
        overflow: hidden;
        img {
          height: 106px;
          display: block;
          margin: auto;
        }
      }
    }
    .info {
      flex: 1;
      padding: 6px 12px;
      font-size: 14px;
      font-size: 12px;
      .state-img {
        height: 30px;
      }
    }
  }
  .data{
    text-align: center;
    font-size: 12px;
    padding: 10px;
    .column {
      display: flex;
      background-image: linear-gradient(#004156, #00212e);
      > div {
        flex: 1;
        padding: 3px;
        color: #f8d140;
      }
    }
    .row {
      display: flex;
      > div {
        flex: 1;
        padding: 3px;
      }
    }
  }
}
</style>
