<template>
  <aside class="play-item relative cursor-pointer"
         :class="{
            'play-item-clear-right': rowLast,
            'play-item-use-left': rowStart,
            'play-item-clear-top': row === 0
          }"
         @click="triggerDetail"
  >

    <div class="play-border-image" v-if="item.decorate_jb && (item.decorate_jb.play_image || item.decorate_jb.base_image)">
      <svg-animate class="screen"
                   v-if="item.decorate_jb.play_image"
                   :src="item.decorate_jb.play_image"
      ></svg-animate>
      <v-image
          v-else-if="item.decorate_jb.base_image"
          :src="item.decorate_jb.base_image"
          class="screen"
          backgroundColor="transparent"
          mode="scaleToFill"
      >
      </v-image>
    </div>

    <div class="play-border-image" v-if="item.decorate_bk && (item.decorate_bk.play_image || item.decorate_bk.base_image)">
      <svg-animate class="screen"
        v-if="item.decorate_bk.play_image"
        :src="item.decorate_bk.play_image"
      ></svg-animate>
      <v-image
          v-else-if="item.decorate_bk.base_image"
          :src="item.decorate_bk.base_image"
          class="screen"
          backgroundColor="transparent"
          mode="scaleToFill"
      >
      </v-image>
    </div>

    <layout-user-status :item="item"></layout-user-status>
    <div class="screen overflow">
      <div class="play-item-image-wrap overflow"
           @click.stop="triggerRoomDetail"
      >
        <v-image
            class="play-item-image"
            :src="item.cover_image"
            backgroundColor="transparent"
        ></v-image>
      </div>
      <aside class="play-content">
        <div class="rowACenter">
          <div class="flex-1 play-item-title" >
            <layout-naming :nickName="item.nick_name" :naming="item.guanming"></layout-naming>
          </div>
          <div class="play-audio row center" @click.stop="triggerPlay">
            <div
                v-for="item in 5"
                :key="item"
                class="play-audio-item"
                :class="['play-audio-'+item,play?'play-audio-animate-'+item:'']"
            ></div>
          </div>
        </div>
        <div class="rowACenter play-game-container">
          <div class="play-game flex-1"><div class="line-1">{{item.game_name}}</div></div>
          <span class="play-price-group"><span>{{price}}</span>元/局</span>
        </div>
      </aside>
    </div>

  </aside>

</template>

<script>
import {
  vImage,
  svgAnimate
} from '$components';
import props from '../props';
import mixins from '../mixins';
import layoutNaming from '$layout/layout-naming';
import layoutUserStatus from '$layout/layout-user-status';
export default {
  name: "layout-play",
  components:{
    vImage,
    svgAnimate,
    layoutNaming,
    layoutUserStatus
  },
  props,
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
