<template>
	<view class="container">
		<navBar title="佣金明细" :back="true" color="#333333" background="#FFFFFF" />

		<view class="bgBox" :style="{'background-image':`url(${picBase+'yongjin_bg.png'})`}">
			<view class="topBox">
				<view class="userBox">
					<image class="avatar" :src="!userInfo.avatar?picBase+'defaultAvatar.png':userInfo.avatar" mode="">
					</image>
					<text>{{userInfo.name?userInfo.name:'默认用户'}}</text>
					<view class=" flag" :style="{'background-image':`url(${picBase+'dashi_bg.png'})`}">
						推广大使
						<!-- <image src="../../../static/other/huangguan.png" mode="" class="hg_i"></image> -->
					</view>
				</view>
			</view>
			<view class="addBg" :style="{'background-image':`url(${picBase+'card_b_bg.png'})`}">
				<view class="cardTop">
					<!-- <image src="../../../static/tabbar/my.png" mode="" class="water_coin"></image> -->
					<view class="left">
						<view class="txt">
							累计收入(元)
						</view>
						<view class="money">
							￥{{info.totalIncome}}
						</view>
					</view>
					<view class="right">
						<view class="txt">
							可提现收入(元)
						</view>
						<view class="money">
							￥{{info.withdrawIncome}}
						</view>
					</view>
				</view>

				<view class="cardBot">
					<view class="btn" @click="cash">
						立即提现
					</view>
				</view>
			</view>


			<view class="botContent">


				<view class="titleBox">
					<image :src="picBase+'s_star.png'" mode="heightFix" class="starIcon"></image>
					佣金明细
				</view>

				<view class="list">

					<view class="empty" style="margin-top: 50%;" v-if="info.data.length==0">
						<u-empty mode="data" />
					</view>

					<view class="" v-else>
						<view class="item" v-for="(item,index) in info.data"
							:style="{'background-image':`url(${picBase+'card_bg2.png'})`}">
							<!-- <image src="../../../static/tabbar/my.png" mode="" class="water2"></image> -->
							<view class="top">
								<view class="left">
									<image :src="item.user.avatar?item.user.avatar:picBase+'defaultAvatar.png'" mode=""
										class="avatar"></image>
									<view class="des">
										<view class="name">
											{{item.user.name?item.user.name:'默认用户'}}
										</view>
										<view class="time">
											{{item.created_at}}
										</view>
									</view>
								</view>
								<view class="right">
									￥{{item.amount}}
								</view>
							</view>
							<view class="bot">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	// import navBar from '@/components/navBar/index.vue'
	import {
		getYongjinList,
		getUserInfo
	} from '@/api/index/index.js'
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				picBase: this.$picBase2,
				userInfo: null,
				info: {
					totalIncome: 0,
					withdrawIncome: 0,
					data: []
				},
				// list: []
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			this.getYongjinList()
		},
		methods: {
			async getUserInfo() {
				let res1 = await getUserInfo()
				console.log('用户信息返回值--------', res1);
				if (res1.code == 0) {
					uni.setStorageSync('userInfo', res1.data)
					this.userInfo = res1.data
				} else {
					this.$toast(res1.message)
				}
			},
			async getYongjinList() {
				let res1 = await getYongjinList()
				console.log('佣金明细返回值--------', res1);
				if (res1.code == 0) {
					this.info = res1.data
					// this.userInfo = [1, 1]
				} else {
					this.$toast(res1.message)
				}
			},
			cash() {
				// getApp().availMoney = this.info.withdrawIncome
				uni.navigateTo({
					url: '/pages/my/cash/index?availMoney=' + this.info.withdrawIncome
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>