<template>
	<van-sticky>
		<!-- <van-nav-bar title="月度排名" /> -->
		<van-nav-bar title="公司总排名">
			<template #right>
				<van-dropdown-menu ref="menuRef">
					<van-dropdown-item :title="checkedText" ref="itemRef" teleport="body">
						<van-radio-group v-model="fieldValue1">

							<van-cascader v-model="cascaderValue" title="请选择" :options="options"
								@close="menuRef.close()" @finish="onFinish" />
						</van-radio-group>
						<div style="padding: 16px 16px">

						</div>
					</van-dropdown-item>
				</van-dropdown-menu>
			</template>

		</van-nav-bar>
	</van-sticky>

	<van-overlay :show="overlayloading">
		<div class="wrapper">
			<van-loading color="#0094ff"> 加载中... </van-loading>
		</div>
	</van-overlay>

	<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
		<!-- 添加 tabs 容器 -->
		<van-tabs v-model:active="activeTab" @change="onTabChange" sticky>
			<van-tab title="本月" name="本月"></van-tab>
			<van-tab title="本季度" name="本季度"></van-tab>
			<van-tab title="本年" name="本年"></van-tab>
		</van-tabs>
		<div v-if="myRanking" class="my-ranking-section">
			<van-cell :border="false" class="my-ranking-cell">
				<template #title>
					<div class="my-title">我的排名</div>
				</template>
				<template #label>
					<div class="labeldiv">姓名: {{ myRanking.userName }}({{ myRanking.deptName }})</div>
					<!-- 使用后端返回的真实排名 -->
					<div class="labeldiv">总排名: {{ myRanking.rankingNum }}</div>
					<div class="labeldiv">总分: {{ myRanking.totalScore }}</div>
				</template>
			</van-cell>
		</div>
		<!-- list 放在 tabs 内容区 -->
		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多" @load="onLoad" class="listDiv">
			<van-cell v-for="(ranking, index) in list" :key="index">
				<template #title>
					{{ ranking.createName }}
				</template>
				<template #label>
					<div class="labeldiv"> {{ ranking.userName }}({{ ranking.deptName }})</div>
					<!-- 根据当前选中的 tab 显示对应的期间 -->
					<div class="labeldiv">排名: {{ index + 1 }}</div>
					<div class="labeldiv">总分: {{ ranking.totalScore }}</div>

				</template>
			</van-cell>
		</van-list>
	</van-pull-refresh>
</template>

<script setup>
import {
	onMounted,
	reactive,
	getCurrentInstance,
	ref
} from "vue";
import {
	showConfirmDialog,
	showSuccessToast,
	showFailToast,
	showDialog
} from 'vant';
import {
	useRoute
} from "vue-router";
import {
	sortData
} from "@/api/dati";
import "@/assets/custom.less";
const {
	proxy
} = getCurrentInstance()
const route = useRoute();
/*
*
*
* 修改弹框
*
*
* */
const activeTab = ref('本年')
const onTabChange = (name) => {
	activeTab.value = name
	onRefresh();
}
const cascaderValue = ref('');
const options = [
	{
		text: '总部级',
		value: '总部级',
	},
	{
		text: '公司级',
		value: '公司级',

	},
	{
		text: '车间级',
		value: '车间级',

	},
	{
		text: '班组级',
		value: '班组级',

	},

];
const fieldValue = ref('')
const fieldValue1 = ref('总部级')
const jsonStringDept = localStorage.getItem('dept');
let deptInformation = ref([])
try {
	deptInformation.value = jsonStringDept ? JSON.parse(jsonStringDept) : [];
} catch (error) {
	deptInformation.value = [];
}
let deptCode = deptInformation.value[0].deptCode
const onFinish = ({ selectedOptions }) => {

	fieldValue1.value = selectedOptions.map((option) => option.text).join('/');
	onRefresh();
	menuRef.value.close();
};

//***********************************************************************************
let userId = route.query.userId;
if (userId == '' || userId == 'undefined') userId = localStorage.getItem('userId')
const overlayloading = ref(false);

const pageSize = ref(10);
const pageNo = ref(1);
const start = ref("");
const end = ref("");
const startTime = ref("");
const endTime = ref("");

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const menuRef = ref(null);
const rankingOptions = [{
	text: "本月",
	value: 'month'
},
{
	text: "本季度",
	value: 'quarter'
},
{
	text: "本年",
	value: 'year'
}
];
const checked = ref("month");
const checkedText = ref("查询");

const changeChecked = (val) => {
	checked.value = val.value;
	checkedText.value = val.text;
};
const total = ref(0)
const resultData = ref([])
const myRanking = ref({})
const now = new Date()
var cur_year = now.getFullYear()
var cur_quarter = Math.ceil(now.getMonth() / 3)
var cur_month = String(now.getMonth() + 1).padStart(2, '0')
const fetchData = ref({
	userId: userId,
	sortType: checked.value,
	year: cur_year,
	quarter: cur_quarter,
	month: cur_month,
})

/* 查询请求 */
const queryFetch = async () => {
	console.log(activeTab.value);
	console.log(fieldValue1.value);
	const url = '/sgsafe/Ranking/queryH5'
	//fetchData.value.sortType = checked.value
	const param = {
		page: pageNo.value,
		rows: pageSize.value,
		params: activeTab.value + '/' + fieldValue1.value,
		deptCode: deptCode
	};
	console.log(param);
	try {

		const res = await proxy.$axios.post(url, param);
		if (res.data.code === 0) {
			total.value = res.data.data.pageData.total
			resultData.value = res.data.data.pageData.records
			myRanking.value = res.data.data.myRanking
			console.log(res.data.data);
		} else {
			console.log('操作失败!' + res.data.msg)
		}
	} catch (error) {
		console.error('请求出错:', error);
	}
};
const onQuery = () => {
	start.value = "";
	end.value = "";
	onRefresh();
	menuRef.value.close();
};

const onLoad = async () => {
	overlayloading.value = true;
	if (refreshing.value) {
		list.value = [];
		list.length = 0;
		pageNo.value = 1;
		refreshing.value = false;
	}
	try {
		await queryFetch();
		overlayloading.value = false;
		if (pageSize.value * pageNo.value < total.value) {
			//22
			list.value = [...list.value, ...resultData.value]
			pageNo.value++;
		} else {
			list.value = [...list.value, ...resultData.value]
			finished.value = true;
		}
		loading.value = false;
	} catch (error) {
		console.log(error);
		finished.value = true;
		showFailToast("获取集团排名失败");
	} finally {
		loading.value = false;
	}
};


const onRefresh = () => {
	finished.value = false;
	refreshing.value = true;
	// 重新加载数据
	// 将 loading 设置为 true，表示处于加载状态
	loading.value = true;
	//activeTab

	onLoad();
};
</script>

<style scoped>
.labeldiv {
	font-size: 14px;
}

/* 遮罩 */
.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.van-overlay {
	z-index: 2;
	background-color: rgba(0, 0, 0, 0.5);
}

::v-deep .van-dropdown-menu {
	margin-right: 5px;
}

::v-deep .van-dropdown-menu__bar {
	box-shadow: none;
}
</style>