<template>
  <div>
    <div v-audio :class="{btn: !data.playerId}" class="device-box" @click="click().showJoinGasme(data)">
      <div class="header">
        <div v-if="header === 'title'" class="game-name">{{ data.gameNameEn }}</div>
        <div v-if="header === 'player'">
          <img class="img player" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_play_again.png" alt="">
        </div>
      </div>
      <div class="device-content">
        <img :src="data.lobbyImg | img" alt="" class="game-img">
        <img v-if="data.playerId" :src="userImg[0]" alt="" class="user">
      </div>
      <!-- <div>
        gameNameEn: {{ data.gameNameEn }}
      </div>
      <div>
        assetNumber: {{ data.assetNumber }}
      </div>
      <div>
        id: {{ data.id }}
      </div> -->
      <div class="num-box">
        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_ellipse_03.png" alt="">
        <div class="num">{{ data.egmId }}</div>
      </div>
    </div>
    <DeviceDialog ref="dialog" :data="data" @start="() => click().joinGasme(data)"/>
  </div>
</template>

<script>
import DeviceDialog from '@/components/dialog/device'
export default {
  components: {
    DeviceDialog,
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
    header: {
      type: String,
      default: 'title',
    },
  },
  data() {
    const userImg = [
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/people_5.png',
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/4.png',
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/2.png',
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/3.png',
      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/6.png',
    ]
    return {
      userImg,
    }
  },
  methods: {
    click() {
      return {
        joinGasme: ({ id, playerId }) => {
          if (playerId) {
            return
          }
          const data = {
            deviceId: id,
          }
          this.$request({
            url: '/api/gaming',
            method: 'post',
            data,
          }).then(({ data }) => {
            this.$router.replace(`/game?id=${id}`)
          })
        },
        showJoinGasme: () => {
          this.$refs.dialog.show()
        },
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.device-box {
  width: 170px;
  height: 300px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header{
    position: relative;
    height: 60px;
    .game-name {
      margin-top: 10px;
      text-align: center;
      font-size: 15px;
      color: #f7ff00;
      font-weight: bold;
    }
    .player {
      width: 80%;
      display: block;
      margin: -6px auto;
    }
  }
  .device-content {
    flex: 1;
    /* background: red; */
    width: 80%;
    margin: auto;
    position: relative;
    .game-img {
      max-width: 100%;
      max-height: 100%;
      /* height: 100%; */
      height: 200px;
      margin: auto;
      display: block;
    }
    .user {
      position: absolute;
      bottom: 20px;
      width: 120px;
      left: 8px;
    }
  }
  .num-box {
    position: absolute;
    right: -12px;
    bottom: -8px;
    width: 60px;
    height: 60px;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .num {
      text-align: center;
      position: relative;
      z-index: 1;
      margin-top: 22px;
      font-size: 14px;
      text-shadow: 0px 0px 6px black;
    }
  }
}
</style>
