<template>
    <div class="container">
        <div class="title" ref="anchor">游戏数字资产的链上开创者们</div>
        <el-radio-group class="menu" v-model="sortStr" size="normal">
            <el-radio-button v-for="(item, index) in sortList" :key="index" :label="item.value">
                <div class="radio-item">
                    <i class="font_family" :class="[item.icon]"></i>
                    <span>{{ item.label }}</span>
                </div>
            </el-radio-button>
        </el-radio-group>

        <div class="border" style="margin-top: 30px"></div>
        <el-input
            class="search"
            prefix-icon="el-icon-search"
            placeholder="请输入您想找到的作者名称…"
            v-model="search"
            clearable
            @change="onSearch"
        >
        </el-input>
        <div class="list" v-loading="fetchingData">
            <router-link
                :to="{ path: '/castingDetail?id=' + item.id }"
                class="content"
                v-for="item in list"
                :key="item.id"
            >
                <el-image
                    class="imgBox"
                    :src="item.bg || require('../assets/bg-moren备份 2@3x.png')"
                    fit="cover"
                    :lazy="true"
                ></el-image>
                <img class="img" :src="item.avatar || require('../assets/img_default_photo.png')" alt="" />
                <div class="text">
                    <div class="name">{{ item.nickname }}</div>
                    <img class="img1" src="../assets/img/renzheng_icon@3x.png" alt="" />
                </div>
                <div class="text">
                    <div class="name name1">{{ item.id }}</div>
                    <img class="img1 img2" src="../assets/img/copy_icon@3x.png" alt="" />
                </div>
                <div class="introduce">{{ item.intro || '该用户什么都没留下...' }}</div>
                <div class="border"></div>
                <div class="fans">
                    <div class="followers">
                        <div class="text3">{{ item.followers }}</div>
                        <div class="text4">粉丝</div>
                    </div>
                    <el-button
                        style="color: #939599"
                        plain
                        round
                        :class="{ prim: !item.follow }"
                        size="mini"
                        @click="like(item)"
                    >
                        {{ item.follow ? '已关注' : '关注' }}
                    </el-button>
                </div>
            </router-link>

            <el-empty v-if="empty" description="还没有开发者哦～"></el-empty>
        </div>

        <div class="pagination-wrapper">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalElements"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import pageableTable from '../mixins/pageableTable';
import user from '../mixins/user';
export default {
    data() {
        return {
            sortList: [
                {
                    label: '全部',
                    icon: 'icon-icon-quanbu',
                    value: 'id,desc'
                },
                {
                    label: '最新',
                    icon: 'icon-icon-zuixin',
                    value: 'createdAt,desc'
                },
                {
                    label: '人气',
                    icon: 'icon-icon-renqi',
                    value: 'sales,desc'
                },
                {
                    label: '关注',
                    icon: 'icon-icon-guanzhu',
                    value: 'followers,desc'
                }
            ],
            search: '',
            sortStr: 'id,desc',
            url: '/user/all',
            list: []
        };
    },
    mixins: [pageableTable, user],
    methods: {
        beforeGetData() {
            return { search: this.search, query: { hasRole: 'ROLE_MINTER' } };
        },
        setList(list) {
            this.list = list;
            console.log(this.list);
        }
    }
};
</script>
<style lang="less" scoped>
@import url('../styles/list.less');
.followed {
    border-color: #939599;
    color: #939599 !important;
}
</style>
