<template>
  <section class="room-audience screen">
    <flat-list
      @fetch="fetch"
      :security-size="10"
      ref="flat"
      indexes="uid"
      @changeData="changeData"
    >
      <template v-slot:item="{item,index}">
        <aside class="room-audience-item rowACenter" >
          <v-image :src="item.head_pic" radius="50%"
                   class="room-audience-avatar cursor-pointer"
                   :border-width="2"
                   borderColor="#fff"
                   @click.stop="openUserInfo($event,item)"
          ></v-image>
          <section class="flex-1 room-audience-content">
            <div class="line-1 room-audience-username">{{item.nick_name}}</div>
            <section class="row">
              <layout-sex :type="item.sex" :birthday="item.birthday"></layout-sex>
            </section>
          </section>
          <div v-if="admin && audienceItem.wheat" @click="triggerAllowForWheat(item)" class="center room-audience-wheat cursor-pointer">上麦</div>
        </aside>
      </template>
    </flat-list>

  </section>
</template>

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

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