<template>
  <section class="view-room-container screen">
    <flat-list
      @fetch="fetch"
      indexes="rid"
      ref="flat"
    >
      <template v-slot:item="{item,index}">
        <aside class="view-room-item rowACenter cursor-pointer relative" @click="openDetail(item)">
          <div class="absolute view-room-label center" v-if="item.category_name">{{item.category_name}}</div>
          <v-image class="view-room-use-avatar" :src="item.room_cover" radius="0.15rem"></v-image>
          <section class="flex-1">
            <header class="rowACenter">
              <img src="@/assets/images/icon.gif" class="view-room-icon" />
              <div class="flex-1">
                <div class="line-1">{{item.room_name}}</div>
              </div>
            </header>
            <footer class="rowACenter view-room-footer">
              <aside
                v-for="(item,index) in 4"
                class="view-room-avatar"
              ></aside>
            </footer>
          </section>
        </aside>
      </template>
    </flat-list>
  </section>
</template>

<script>
import {
  FlatList,
  vImage
} from "$components";
import mixins from '../mixins';
import props from '../props';
export default {
  name: "view-room",
  components: {
    FlatList,
    vImage
  },
  mixins,
  props
}
</script>

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