<template>
	<div class="app-content">
		<div class="rank-top-wrap">
			<div class="rank-top-text">
				<div class="rank-top-tit">VIP会员权益</div>
				<div>升级会员享受更多权益~</div>
			</div>
			<div class="rank-top-img">
				<img :src="`${constant.imgUrl}/retail/interest/VIP-interest.png`" alt mode="widthFix" />
			</div>
		</div>
		<!--  -->
		<div class="rank-bottom-wrap">
			<div class="rank-text">
				<div>1、充值或消费1元得1积分</div>
				<div>2、会员权益关系如下：</div>
			</div>
			<!-- level -->
			<div class="level-list-wrap">
				<div class="level-list-tit">
					<div>会员等级</div>
					<div>成长值</div>
					<div>折扣</div>
				</div>
				<div class="level-list-blo">
					<div class="level-list" v-for="(item, index) in list" :key="index">
						<div>
							<appVipModule class="level-img" :text="`VIP${item.level}`" />
						</div>
						<div>{{ item.growth }}</div>
						<div>{{ item.discount }}</div>
					</div>
				</div>
			</div>
            <!-- 按钮 -->
            <div class="btn-wrap">
                <div class="button-com red big" @click="pageTo('/pages/user/register')">申请成为会员</div>
            </div>
		</div>
        <!-- 商标 -->
        <app-trademark-module />
	</div>
</template>

<script>
import AppVipModule from '@/components/module/app-vip'
import AppTrademarkModule from '@/components/module/app-trademark'
// api
import { userGrade } from '@/api/member'
export default {
	name: 'interest-rank',
	components: {
		AppVipModule,
		AppTrademarkModule
	},
	data() {
		return {
			constant: this.$constant,
			list: []
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this._getDet()
		},
		_getDet() {
			userGrade().then(res => {
				this.list = res.data
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.rank-top-wrap {
		width: 100%;
		height: 230px;
		position: relative;
		background-color: #191919;
		.rank-top-text {
			color: #d2d2d2;
			padding-top: 60px;
			padding-left: 70px;
			.rank-top-tit {
				color: #ffd515;
				font-size: 44px;
				margin-bottom: 10px;
			}
		}
		.rank-top-img {
			position: absolute;
			top: 20px;
			right: 44px;
			width: 232px;
		}
	}
	// ----
	.rank-bottom-wrap {
		padding: 30px;
		background-color: #fff;
		.rank-text {
			margin-bottom: 26px;
			& > div {
				margin-bottom: 16px;
			}
        }
        .btn-wrap {
            width: calc(100% - 60px);
            margin-top: 50px;
            .button-com {
                width: 100%;
            }
        }
		.level-list-wrap {
            border: 1px solid #EEEEEE;
            font-size: 26px;
			.level-list-tit,
			.level-list {
				@include disFlex(center, space-between);
				& > div {
					margin: 0 auto;
					flex: 1;
					@include disFlex(center, center);
					height: 70px;
				}
				.level-img {
					/deep/.vip-text {
						left: 42px;
						transform: scale(0.8);
					}
				}
			}
			.level-list-tit {
				color: #fff;
				background-color: #d9c096;
				& > div {
					border-left: 1px solid #fff;
				}
				& > div:first-child {
					border-left: none;
				}
			}
			.level-list {
				&:nth-child(2n) {
					background-color: #f7f7ed;
				}
				& > div {
					border-left: 1px solid #EEEEEE;
				}
				& > div:first-child {
					border-left: none;
				}
			}
		}
	}
</style>
