<template>
	<div class="app-main app-content">
		<app-tabs :tabs="tabs" :isFixed="true" :isAdd="true" :currentTab="tabIndex" :height="100" @add="pageTo('/admin/member/add')" @change="change" itemWidth="33.33%" />
		<!-- list -->
		<block v-if="!$util.isEmpty(list.data)">
			<block v-for="(item,index) in list.data" :key="index">
				<tui-list-cell :arrow="true" @click="pageTo({
					url: '/admin/member/detail',
					query: {
						id: item.id
					}
				})">
					<div class="tui-msg-box">
						<img :src="item.avatarUrl" class="tui-msg-pic" mode="widthFix" />
						<div class="tui-msg-item">
							<div class="tui-msg-name">
                                <div>{{item.userName}}</div>
							    <appVipModule v-if="item.isMember" class="level-img" :text="`VIP ${item.userAsset.memberLevel || ''}`" />
								<div v-else class="normal-img">
									<div class="vip-text">普通用户</div>
								</div>
                            </div>
							<div class="tui-msg-content">
                                <div>
                                    <i class="iconfont iconzhifubao"></i>
                                </div>
                                <span>{{item.visitTimeFormat}}</span>
                            </div>
						</div>
					</div>
					<div class="tui-msg-right">
						<badge-module type="danger" :dot="item.level==3?true:false" v-if="item.messageNum>0">{{item.messageNum}}</badge-module>
					</div>
				</tui-list-cell>
			</block>
		</block>
		<block v-else>
			<app-wrapper-empty :is-empty="$util.isEmpty(list.data)" />
		</block>
	</div>
</template>

<script>
import AppTabs from '@/components/plugin/tabs'
import TuiListCell from '@/components/plugin/list-cell'
import BadgeModule from '@/components/plugin/badge'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import appVipModule from '@/components/module/app-vip'
// api
import { list } from '@/mixins'
import { getClass, getList } from '@/api/member'
export default {
	name: 'admin-memebr',
	components: {
		AppTabs,
		TuiListCell,
		BadgeModule,
		AppWrapperEmpty,
		appVipModule
	},
	mixins: [list],
	data() {
		return {
			tabIndex: 0,
			tabs: [
				{
					name: '全部',
					value: 0
				},
				{
					name: '粉丝',
					value: 0
				},
				{
					name: '会员',
					value: 0
				}
			]
		}
	},
	onLoad(option) {
		// this.init()
	},
	methods: {
		init() {
			this._list()
		},
		// 列表
		_list() {
			let status = JSON.parse(JSON.stringify(this.tabIndex))
			status = status == 0 ? -1 : status
			return getList({
				search: '',
				page: this.list.page,
				status: status,
				...this.form
			}).then(res => {
				this.completes(res)
				if (this.$util.isEmpty(res.data)) return false
				this.tabs[0].value = res.data.asset.totalUser
				this.tabs[1].value = res.data.asset.totalFans
				this.tabs[2].value = res.data.asset.totalMember
			})
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false
			} else {
				this.tabIndex = e.index
				this.resetList()
				this._list()
			}
		},
		// 跳转
		detail(item) {
			this.$util.pageTo('/admin/member/detail')
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		padding-top: 120px;
		padding-bottom: 20px;
	}
	.tabs-wrap {
		position: fixed;
		.tabs-left {
			width: 80%;
		}
		.tabs-right {
			width: 19%;
			border-left: $borderColor;
			@include disFlex(center, center);
		}
	}
	// list
	.tui-msg-box {
		display: flex;
		align-items: center;

		.tui-msg-pic {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
            margin-right: 20upx;
		}

		.tui-msg-item {
			max-width: 500upx;
			min-height: 80upx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
            justify-content: space-between;
            & > div {
                @include disFlex(center, flex-start);
                & > div:first-child {
                    margin-right: 8px;
                }
            }
            .level-img {
                width: 74px;
                /deep/.vip-text {
                    top: 0;
                    left: 20px;
                    font-weight: 400;
                    transform: scale(0.5);
                }
            }
			.normal-img {
                width: 70px;
				padding: 2px 6px;
				color: #999;
				background-color: #F0F2F6;
				border-radius: 20px;
				.vip-text {
					font-size: 24px;
                	transform: scale(0.6);
					position: relative;
					top: -2px;
					left: -8px;
				}
			}
            .iconfont {
                color: #00AAED;
            }
		}

		.tui-msg-name {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 30upx;
			line-height: 1;
			color: #262b3a;
		}

		.tui-msg-content {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 24upx;
			line-height: 1;
			color: #9397a4;
		}
	}

	.tui-msg-right {
		max-width: 120upx;
		height: 80upx;
        margin-left: auto;
        margin-right: 24px;
		text-align: right;
		display: flex;
		// flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
</style>
