<template>

  <div class="view-friends-container screen">
    <flat-list
        @fetch="fetch"
        indexes="uid"
        ref="flat"
    >
      <template v-slot:layout>
        <aside class="view-friends-item rowACenter cursor-pointer"
          v-for="(item,index) in chatUserList"
          :key="'view-friends-'+item.uid"
               @click="openChatUser(item)"
        >
          <v-image radius="50%" :src="item.head_pic" class="view-friends-avatar">
            <layout-dot v-if="item.count" :value="item.count" class="absolute view-message-dot"></layout-dot>
          </v-image>
          <div class="flex-1">
            <header class="row aCenter">
              <div class="line-1 view-message-title" >{{item.nick_name}}</div>
              <layout-sex
                  :type="item.sex"
                  :birthday="item.birthday"
              ></layout-sex>
            </header>
            <div class="view-message-info line-1" v-if="item.message">{{item.message}}</div>

          </div>
<!--          <div class="view-friends-introduce">互相关注</div>-->
        </aside>
      </template>

    </flat-list>

  </div>

</template>

<script>
import {
  vImage,
  FlatList
} from '$components';
import layoutSex from '$layout/layout-sex';
import layoutDot from '$layout/layout-dot';
import mixins from '../mixins';
import popup, {PopupExportComponent} from "$utils/tool/popup";
export default {
  name: "view-friends",

  components:{
    FlatList,
    vImage,
    layoutSex,
    layoutDot
  },

  methods:{
    fetch(obj){

      this.$store.dispatch('getSessionListPromise').then(()=> obj.success([{}])).catch(obj.fail);
    },

    openChatUser(item){
      return popup.$open(PopupExportComponent.chat,{
        user:item
      });
    }
  },

  mixins
}
</script>

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