<template>
  <section class="screen follow-user-container">

    <flat-list
      @fetch="fetch"
      :security-size="20"
      :pageSize="12"
      indexes="uid"
      ref="flat"
      emptyText="暂无关注列表"
    >
      <template v-slot:item="{item,index}">
        <aside
            class="follow-user-item center cursor-pointer"
            :key="'follow-'+item.uid"
            :style="{
              'margin-top': index > 3 ? '':'0px'
            }"
            @click.stop="openUserDetail(item)"
        >
          <v-image backgroundColor="transparent" class="follow-user-avatar" radius="50%" :src="item.head_pic"></v-image>
          <div class="follow-user-name line-1">{{item.nick_name}}</div>
          <v-button class="follow-user-button" @press="cancelFollow(item)" >取消关注</v-button>
        </aside>
      </template>
    </flat-list>
  </section>
</template>

<script>
import {
  FlatList,
  vImage,
  vButton
} from '$components';
import mixins from '../mixins';
export default {
  name: "follow-user",
  components:{
    vButton,
    FlatList,
    vImage
  },
  mixins
}
</script>

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