<template>
	<div class="header-back">
		<m-nav-bar :transparent="true" title="我的推广积分" style="color: #ffffff" />
		<div class="user-data">
			<m-user-avatar />
			<m-user-name />
			<div class="user-score">
				<m-user-allintegral intro="您的个人总积分："></m-user-allintegral>
			</div>
		</div>
	</div>
	<div class="integral-box">
		<van-search class="search" shape="round" placeholder="请输入下级代理昵称" v-model="searchValue" />
		<div class="test-scores content-box">
			<table class="table" v-if="integralList.length > 0">
				<tr>
					<th>头像</th>
					<th>昵称</th>
					<th>推广人数</th>
					<th v-if="saleType == 2 || saleType == 3">未结算</th>
					<th v-else>推广积分</th>

					<th v-if="saleType == 2 || saleType == 3">已结算</th>
					<th v-if="saleType == 2 || saleType == 3">按钮</th>
				</tr>
				<tr @click="goStudentScore(userInfo)" v-for="(userInfo, index) in integralList.filter((userInfo) => userInfo.nickName.includes(searchValue))" :key="index">
					<td>
						<van-image round width="50px" height="50px" :src="userInfo.headImage" />
					</td>
					<td>{{ userInfo.nickName }}</td>
					<td>{{ userInfo.extensionCount }}</td>
					<td>{{ userInfo.achievement }}</td>
					<td v-if="saleType == 2 || saleType == 3">{{ userInfo.achievementSettled }}</td>
					<td v-if="saleType == 2 || saleType == 3"><van-button type="primary" @click="showSettlement(userInfo)">结算</van-button></td>
				</tr>
			</table>
			<div v-else style="text-align: center">暂无数据</div>
		</div>
	</div>
</template>

<script lang="ts">
import { BranchModel } from "@/model/myBranchList";
import { ref, onBeforeMount } from "vue";

import store from "@/store";
// const saleType = store.getters.getUserData?.saleType

export type UserInfo = {
	openid: string;
	nickName: string;
	headImage: string;
	achievement: number;
	achievementSettled: number;
	extensionCount: number;
	id: number;
};
const branchModel = new BranchModel();

const useMyIntegral = () => {
	const integralList = ref<Array<UserInfo>>([]);

	onBeforeMount(async () => {
		const data = await branchModel.getIntegralList();
		integralList.value = data;
	});

	const integralSettlement = branchModel.integralSettlement;

	return {
		integralList,
		store,
	};
};
</script>

<script lang="ts" setup>
const saleType = ref(store.getters.getUserData?.saleType as number);
import { showSettlement } from "./components/settlement";
import { useRouter } from "vue-router";
const router = useRouter();
const { integralList } = useMyIntegral();
const searchValue = ref("");
const goStudentScore = (item: UserInfo) => {
	router.push({
		name: "studentScore",
		query: {
			id: item.id,
			headImage: item.headImage,
			nickName: window.encodeURIComponent(item.nickName),
		},
	});
};
</script>

<style scoped lang="scss">
.integral-box {
	margin-top: -90px;
	padding: 10px;
}
.header-back {
	width: 375px;
	padding-bottom: 82px;
	background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
	border-radius: 0px 0px 82px 82px;
	.user-data {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 19px 17px 24px;
		font-size: 23px;
		color: #ffffff;
	}
	.user-score {
		font-size: 14px;
	}
}
.content-box {
	width: 345px;
	background: #ffffff;
	box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.2);
	border-radius: 10px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 10px;
}
.summary {
	display: flex;
	justify-content: space-around;
	box-sizing: border-box;
	overflow: hidden;
	.search {
		width: 100%;
		border-radius: 10px;
		overflow: hidden;
	}
}
.test-scores {
	font-size: 13px;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 19px;
	color: #0a1a33;
	padding: 15px;
	box-sizing: border-box;
	.table {
		width: 100%;
		border-collapse: collapse;
		font-size: 13px;
		th {
			padding: 5px;
			color: #0a1a33;
		}
		td {
			text-align: center;
			padding: 5px;
			color: #8a9099;
		}
		tr {
			&:nth-of-type(n) {
				background: #ffffff;
			}
			&:nth-of-type(2n) {
				background: rgba(73, 142, 245, 0.15);
			}
		}
	}
}
</style>
