<template>

  <div :style="backgroundStyle">
		<van-sticky>
			<!-- <van-nav-bar title="月度排名" /> -->
			<van-nav-bar title="公司总排名">
				<!-- <template #right>
					
				</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 :style="backgroundStyle1"></div>

			<div class="filter-container">
				<van-button size="small" type="primary" @click="showFilterPopup = true">
					筛选：{{ fieldValue1 }} / {{ activeTab }}
				</van-button>
				<van-icon name="arrow-down" color="#fff" />
			</div>
			<div class="my-ranking-section" style="margin-top: 4vh;">
				<div class="ranking-item my-ranking-item">
					<div class="ranking-column ranking-number">{{ myRanking.myRank }}</div>
					<div class="ranking-column ranking-name">
						<div class="user-name">{{ myRanking.userName }}</div>
						<div class="dept-name">{{ myRanking.deptName }}</div>
					</div>
					<div class="ranking-column ranking-score">{{ myRanking.score }}</div>
				</div>
			</div>
			<!-- list 放在 tabs 内容区 -->
			<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多" @load="onLoad"
				class="listDiv">
				<div v-for="(ranking, index) in list" :key="index" class="ranking-item">
					<div class="ranking-column ranking-number">{{ index + 1 }}</div>
					<div class="ranking-column ranking-name">
						<div class="user-name">{{ ranking.userName }}</div>
						<div class="dept-name">{{ ranking.deptName }}</div>
					</div>
          <div class="ranking-column ranking-score">
            {{
              activeTab === '本月' ? ranking.monthScore :
                activeTab === '本季度' ? ranking.quarterScore :
                  ranking.yearScore
            }}
          </div>
				</div>
			</van-list>
		</van-pull-refresh>

		<!-- 筛选弹出层 -->
		<van-popup v-model:show="showFilterPopup" position="bottom" round>
			<div class="filter-popup">
				<div class="filter-header">
					<span>筛选条件</span>
					<van-icon name="cross" @click="showFilterPopup = false" />
				</div>
				<div class="filter-content">
					<div class="filter-section">
						<div class="filter-title">级别选择</div>
						<div class="filter-options">
							<van-button v-for="option in options" :key="option.value"
								:type="fieldValue1 === option.text ? 'primary' : 'default'" size="small"
								@click="selectLevel(option.text)" class="filter-option-btn">
								{{ option.text }}
							</van-button>
						</div>
					</div>
					<div class="filter-section">
						<div class="filter-title">时间选择</div>
						<div class="filter-options">
							<van-button v-for="option in rankingOptions" :key="option.value"
								:type="activeTab === option.text ? 'primary' : 'default'" size="small"
								@click="selectTime(option.text)" class="filter-option-btn">
								{{ option.text }}
							</van-button>
						</div>
					</div>
					<div class="filter-actions">
						<van-button type="primary" block @click="applyFilter">确定</van-button>
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</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 showFilterPopup = ref(false)

const onTabChange = (name) => {
	activeTab.value = name
	onRefresh();
}

// 筛选相关方法
const selectLevel = (level) => {
	fieldValue1.value = level;
}

const selectTime = (time) => {
	activeTab.value = time;
}

const applyFilter = () => {
	showFilterPopup.value = false;
	onRefresh();
}
const cascaderValue = ref('');
const options = [
	{
		text: '总部级',
		value: '总部级',
	},
	{
		text: '公司级',
		value: '公司级',

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

];
import pmImg from '@/assets/img/pm.jpg';
import pmImg1 from '@/assets/img/phb.png';
const backgroundStyle = {
  backgroundImage: `url(${pmImg})`,
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat',
  height: '100vh'
};
const backgroundStyle1 = {
  backgroundImage: `url(${pmImg1})`,
  width: '150px',
  height: '70px',
  backgroundSize: 'contain',
  backgroundRepeat: 'no-repeat',
  marginTop: '3vh',
  marginLeft: '6%'
};

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;
}

.my-ranking-section {
	background-color: #ffffff;
	border-radius: 10px 10px 0 0;
	padding-top: 5px;
}

/* 排名列表布局 */
.ranking-item {
	display: flex;
	align-items: center;
	padding: 16px;
	background-color: rgba(255, 255, 255, 0.9);
	margin: 8px 16px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 我的排名特殊样式 */
.my-ranking-item {
	background-color: rgba(255, 255, 255, 0.95);
	/* border: 2px solid #0094ff; */
	margin-bottom: 20px;
	position: relative;
}

.my-ranking-item::before {
	content: "我的排名";
	width: 25px;
	position: absolute;
	left: 5px;
	color: #0094ff;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 10px;
	font-weight: bold;
}

.ranking-column {
	flex: 1;
	text-align: center;
	font-size: 14px;
}

.ranking-number {
	font-weight: bold;
	color: #ff6b35;
	font-size: 18px;
}

.ranking-name {
	color: #333;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.user-name {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 2px;
}

.dept-name {
	font-size: 12px;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 90%;
}

.ranking-score {
	font-weight: bold;
	color: #0094ff;
}

/* 筛选弹出层样式 */
.filter-popup {
	padding: 20px;
	max-height: 70vh;
	overflow-y: auto;
}

.filter-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: bold;
}

.filter-header .van-icon {
	font-size: 18px;
	color: #999;
	cursor: pointer;
}

.filter-section {
	margin-bottom: 24px;
}

.filter-title {
	font-size: 14px;
	color: #333;
	margin-bottom: 12px;
	font-weight: 500;
}

.filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filter-option-btn {
	margin: 0;
	min-width: 60px;
}

.filter-actions {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

/* 筛选按钮容器 */
.filter-container {
	margin-left: 5%;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 遮罩 */
.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>