<template>
  <section class="screen">
    <flat-list
      @fetch="fetch"
      ref="flat"
      indexes="uid"
    >
      <template v-slot:item="{item}">
        <article class=""></article>
        <aside class="chat-layout-item rowACenter cursor-pointer"
               :class="{'chat-layout-item-active':uid === item.uid}"
               v-if="item.uid"
               @click="triggerOpenUserContent(item)"
        >
          <v-image class="chat-layout-avatar" radius="50%" :src="item.head_pic">
            <div v-if="item.count && uid !== item.uid" class="chat-dot absolute center">
              <span>{{item.count}}</span>
            </div>
          </v-image>
          <div class="flex-1 chat-layout-content">
            <header class="rowACenter">
              <div class="chat-layout-title">{{item.nick_name}}</div>
              <layout-sex v-if="item.sex !== undefined" :type="item.sex" :birthday="item.birthday" class="chat-sex-margin"></layout-sex>
            </header>
          </div>
        </aside>
      </template>
    </flat-list>
  </section>
</template>

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

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