<template>
	<div class="app-content">
		<div class="rank-wrap">
			<div class="user-blo">
				<div class="user-wrap">
					<div class="user-wrap-left">
						<app-avatar-module :width="100" />
						<div class="user-det">
							<!-- <div class="user-name">{{ userInfo.merchantName }}</div> -->
							<div class="app-color-3">三级代理</div>
						</div>
					</div>
					<div class="user-wrap-right">
						<img :src="`${constant.imgUrl}/retail/interest/invite-store.png`" alt mode="widthFix" />
					</div>
				</div>
				<!-- 数据 -->
				<div class="user-data">
					<div class="data-list" v-for="(item, index) in userData" :key="index">
						<div class="app-size-30 app-bold">{{ item.value }}</div>
						<div class="app-color-3">{{ item.name }}</div>
						<div class="app-color-1" v-if="item.btn" @click="withdrawFn">{{ item.btn }}</div>
					</div>
				</div>
			</div>
			<div class="prompt-text">花店列表</div>
			<app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="20%" :padding="0" />
		</div>
		<!-- list -->
		<div class="rank-list">
			<block v-if="!$util.isEmpty(list.data)">
				<div class="list" v-for="(item, index) in list.data" :key="index">
					<app-avatar-module :src="item.userAvatar" :width="80" />
					<div class="list-det">
						<div class="list-det-right">
							<div class="list-name">{{ item.name }}</div>
							<div class="list-detail">
								<span>{{ item.userName }}</span>
								<span>{{ item.mobile }}</span>
								<span class="app-price">￥{{ item.fee }}</span>
							</div>
						</div>
						<div>
							<i v-if="item.status == 3" class="iconfont icondagou"></i>
							<span v-else class="app-price">{{ item.status | constantfilter('PROXY_STATUS') }}</span>
						</div>
					</div>
				</div>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import AppTabs from '@/components/plugin/tabs'
import AppAvatarModule from '@/components/module/app-avatar'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import { list } from '@/mixins'
// api
import { assetDet, applyList } from '@/api/proxy'
export default {
	name: 'my-invite-list',
	components: {
		AppTabs,
		AppAvatarModule,
		AppWrapperEmpty
	},
	mixins: [list],
	data() {
		return {
			constant: this.$constant,
			data: {},
			tabIndex: 0,
			tabs: [
				{
					name: '全部'
				},
				{
					name: '待审核'
				},
				{
					name: '试用中'
				},
				{
					name: '已付费'
				},
				{
					name: '已到期'
				}
			],
			// 用户数据
			userData: [
				{
					name: '账号余额(￥)',
					value: 0,
					btn: '提现'
				},
				{
					name: '邀请花店',
					value: 0
				},
				{
					name: '付费花店',
					value: 0
				},
				{
					name: '累计收益(¥)',
					value: 0
				}
			]
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this._assetDet()
			this._applyList()
		},
		_assetDet() {
			assetDet().then(res => {
				if (this.$util.isEmpty(res.data)) return false
				this.data = res.data
				this.userData[0].value = res.data.balance
				this.userData[1].value = res.data.inviteNum
				this.userData[2].value = res.data.payNum
				this.userData[3].value = res.data.income
			})
		},
		_applyList() {
			let status = this.getStatus(this.tabIndex)
			return applyList({ status: status }).then(res => {
				this.completes(res)
			})
		},
		// operate
		change(e) {
			if (this.tabIndex == e.index) {
				return false
			} else {
				this.tabIndex = e.index
				this.resetList()
				this._applyList()
			}
		},
		withdrawFn() {
			this.$msg('功能开发中...')
		},
		getStatus(e) {
			let val = ''
			switch (e) {
				case 0:
					val = -1
					break
				case 1:
					val = 0
					break
				case 2:
					val = 1
					break
				case 3:
					val = 3
					break
				case 4:
					val = 4
					break
				default:
					val = -1
					break
			}
			return val
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		// min-height: calc(100vh - 100px);
		// padding-top: 100px;
	}
	// 头部
	.rank-wrap {
		background-color: #fff;
		.user-blo {
			padding: 40px 30px 28px 30px;
		}
		.user-wrap {
			@include disFlex(center, space-between);
			margin-bottom: 60px;
			.user-wrap-left {
				@include disFlex(center, flex-start);
				.user-det {
					margin-left: 20px;
				}
				.user-name {
					font-size: 32px;
					margin-bottom: 10px;
				}
			}
			.user-wrap-right {
				width: 230px;
			}
		}
		.user-data {
			@include disFlex(flex-start, space-between);
			.data-list {
				text-align: center;
				& > div {
					margin-top: 10px;
					&:first-child {
						margin-top: 0;
					}
				}
			}
		}
		.prompt-text {
			color: $fontColor3;
			padding: 26px 0 16px 30px;
			background-color: $backColor;
		}
	}
	// list
	.rank-list {
		background-color: #fff;
		.list {
			@include disFlex(center, flex-start);
			margin: 0 30px;
			padding: 24px 0;
			.list-det {
				@include disFlex(center, space-between);
				width: calc(100% - 100px);
				margin-left: 20px;
				.list-det-right {
					color: $fontColor3;
					.list-name {
						color: #333;
						font-size: 30px;
						margin-bottom: 6px;
					}
					.list-detail {
						& > span {
							margin-right: 20px;
						}
					}
				}
				.icondagou {
					color: $mainColor;
				}
			}
		}
	}
</style>
