<script setup>
	import {
		ref,
		reactive
	} from "vue";

	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"

	import {
		getProjectInfoList,
	} from "@/api/work/projectInfo.js";

	import {
		getYearthroughList,
		getYearMonththroughList,
		getAreaCountValue,
	} from "@/api/work/countAnalysis.js";

	import {
		addFocus,
		cancelFocus
	} from "@/api/work/focus.js";

	let pageKey = ref(null);

	let loading = ref(true);
	let moreListFlag = true;

	let projectList = ref([]);
	let listTotal = ref(0);

	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
	})

	function getList() {
		if (searchInfo.value.pageNo == 1) {
			loading.value = true
		}
		getProjectInfoList(searchInfo.value).then(res => {
			loading.value = false
			projectList.value = projectList.value.concat(res.data.list);
			listTotal.value = res.data.total;

			if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list
					.length)) moreListFlag = false;
		}).catch(() => {
			loading.value = false
		})
	}

	// 收藏/取消
	function changeFocus(id, status) {
		let item = projectList.value.find(item => item.id === id);

		if (status) {
			cancelFocus({
				subId: id
			}).then(res => {
				if (res.code === 200) {
					item.isAttention = 0;
				}
			}).catch(() => {
				uni.showToast({
					title: "更改收藏状态失败。",
					icon: "none",
					duration: 2000
				})
			})
		} else {
			addFocus({
				subId: id
			}).then(res => {
				if (res.code === 200) {
					item.isAttention = 1;
				}
			}).catch(() => {
				uni.showToast({
					title: "更改收藏状态失败。",
					icon: "none",
					duration: 2000
				})
			})
		}
	}

	function goToDetail(id, subName) {
		uni.navigateTo({
			url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
		})
	}

	function goToReport(type, subId, subName) {
		uni.navigateTo({
			url: `/pages/projectInfo/report/index?type=${type}&subId=${subId}&subName=${subName}`
		})
	}

	function getYearList() {
		if (searchInfo.value.pageNo == 1) {
			loading.value = true
		}
		let params = Object.assign({}, searchInfo.value);

		if (pageKey.value === 'yearAmt' || pageKey.value === 'ndjh') {
			params = Object.assign({
				orderType: orderByStatus.value || null
			}, searchInfo.value)
		}

		getYearthroughList(params).then(res => {
			loading.value = false
			projectList.value = projectList.value.concat(res.data.list);
			listTotal.value = res.data.total;

			if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list
					.length)) moreListFlag = false;
		}).catch(() => {
			loading.value = false
		})
	}

	function getMonthList() {
		if (searchInfo.value.pageNo == 1) {
			loading.value = true
		}

		let params = Object.assign({}, searchInfo.value)

		if (pageKey.value === 'ndjh') {
			params = Object.assign({
				orderType: orderByStatus.value
			}, searchInfo.value)
		}

		getYearMonththroughList(params).then(res => {
			loading.value = false
			projectList.value = projectList.value.concat(res.data.list);
			listTotal.value = res.data.total;

			if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list
					.length)) moreListFlag = false;
		}).catch(() => {
			loading.value = false
		})
	}

	// 按金额排序
	let orderByStatus = ref("")
	const changeOrderByStatus = () => {
		if (orderByStatus.value === "desc") {
			orderByStatus.value = "asc"
		} else if (orderByStatus.value === "asc") {
			orderByStatus.value = ""
		} else {
			orderByStatus.value = "desc"
		}

		if (pageKey.value === 'yearAmt') {
			projectList.value = [];
			getYearList();
		}

		if (pageKey.value === 'ndjh') {
			projectList.value = [];
			getMonthList();
		}
	}

	// 统计数据
	let countList = ref([{
		title: "年度计划投资（万元）",
		key: "sumYearAmt",
		value: 0,
		color: ""
	}, {
		title: "全年占比",
		key: "yearRt",
		value: 0,
		color: "",
		isRate: true,
	}, {
		title: "当月完成金额（万元）",
		key: "sumMonthAmtSj",
		value: 0,
		color: "count-special-value"
	}, {
		title: "当月占比",
		key: "monthRt",
		value: 0,
		color: "count-special-value",
		isRate: true,
	}]);
	const getCountValue = () => {
		let params = {
			year: searchInfo.value.year,
			indusKind: searchInfo.value.indusKind,
			subjectId: searchInfo.value.subjectId,
			zjly: searchInfo.value.zjly,
		}
		getAreaCountValue(params).then(res => {
			for (let i in countList.value) {
				countList.value[i].value = res.data[countList.value[i].key] ?? 0;
			}
		})
	}

	let title = ref('')
	onLoad(options => {
		pageKey.value = options.key;
		searchInfo.value = Object.assign(searchInfo.value, options);
		if (pageKey.value === "num" || pageKey.value === "totalAmt") getList();
		if (pageKey.value === "yearAmt") getYearList();
		if (pageKey.value === "compAmt") getMonthList();
		if (pageKey.value === "home") {
			title.value = `详情(${options?.name})`
			getMonthList();
			getCountValue();
		}
		if (options.key === 'mothAmt') {
			pageKey.value = options.key
			title.value = `详情(${options?.name})`
			getYearList();
		}
		if (options.key === 'year') {
			pageKey.value = 'yearAmt'
			title.value = `详情(${options?.name})`
			getYearList();
		}
		if (options.key === 'ndjh') {
			title.value = `详情(${options?.name})`
			getMonthList()
		}
	})

	onReachBottom(() => {
		if (!moreListFlag) {
			return uni.showToast({
				title: "已经到底了。",
				icon: "none",
				duration: 2000
			})
		}
		searchInfo.value.pageNo++;
		if (pageKey.value === "num" || pageKey.value === "totalAmt") getList();
		if (["yearAmt", "mothAmt", "home"].includes(pageKey.value)) getYearList();
		if (pageKey.value === "compAmt" || pageKey.value === "ndjh") getMonthList();
	})
</script>

<template>
	<view class="container">
		<page-title>{{title || '详情'}}</page-title>

		<view class="cards-list" v-if="pageKey === 'num'">
			<view class="card" v-for="(item,index) in projectList" :key="index">
				<!-- 灯与收藏 -->
				<view class="card-item light-item">
					<view class="card-name-title card-light">
						<view v-if="item.isShow === '1'">
							<view v-if="item.status_fgw === '0'" class="card-light-bottom light-green"></view>
							<view v-if="item.status_fgw === '1'" class="card-light-bottom light-yellow"></view>
							<view v-if="item.status_fgw === '2'" class="card-light-bottom light-red"></view>
						</view>
					</view>

					<view class="card-item-content">
						<view class="focus" :class="item.isAttention?'focus-on':''" @click="changeFocus(item.id,item.isAttention)">
						</view>
					</view>
				</view>

				<!-- 项目名称 -->
				<view class="card-name">
					<view class="card-name-title">
						<text class="card-name-description">项目名称</text>
					</view>

					<text class="card-name-text">{{item.subName || "--"}}</text>
				</view>

				<!-- 总投资（万元） -->
				<view class="card-item">
					<view class="card-item-name">总投资（万元）</view>

					<view class="card-item-content">{{item.amtTotal || "--"}}</view>
				</view>

				<!-- 申报单位 -->
				<view class="card-item">
					<view class="card-item-name">申报单位</view>

					<view class="card-item-content">{{item.unitName || "--"}}</view>
				</view>

				<!-- 当前状态 -->
				<view class="card-item">
					<view class="card-item-name">当前状态</view>

					<view class="card-item-content">{{item.status || "--"}}</view>
				</view>

				<!-- 计划日期 -->
				<view class="card-item">
					<view class="card-item-name">计划日期</view>

					<view class="card-item-content">{{item.beginDate || "--"}}</view>
				</view>

				<!-- 红灯原因 -->
				<view class="card-item" v-if="item.status_fgw === '2'">
					<view class="card-item-name">红灯原因</view>
					<view class="card-item-content">{{ item.colorReason??"--" }}</view>
				</view>

				<!-- 黄灯原因 -->
				<view class="card-item" v-if="item.status_fgw === '1'">
					<view class="card-item-name">黄灯原因</view>
					<view class="card-item-content">{{ item.colorReason??"--" }}</view>
				</view>

				<!-- 项目查看按钮(特殊) -->
				<view class="card-item" v-if="item.usersub == 1">
					<view class="card-btn fat-btn special-btn" @click="goToDetail(item.id,item.subName)">项目查看</view>
				</view>

				<!-- 项目查看按钮 -->
				<view class="card-item" v-else>
					<view class="card-btn fat-btn" @click="goToDetail(item.id,item.subName)">项目查看</view>
				</view>

				<!-- 周月年报按钮 -->
				<view class="card-item bottom-item">
					<view class="card-btn thin-btn report-btn" @click="goToReport('weekly',item.id,item.subName)">周报
					</view>

					<view class="card-btn thin-btn report-btn" @click="goToReport('monthly',item.id,item.subName)">月报
					</view>

					<view class="card-btn thin-btn report-btn" @click="goToReport('yearly',item.id,item.subName)">年度计划
					</view>
				</view>

				<!-- 编号 -->
				<view class="card-value">{{index + 1}} / {{listTotal}}</view>
			</view>

			<empty-show v-if="projectList.length===0"></empty-show>
		</view>

		<view class="cards-list" v-if="pageKey === 'totalAmt'">
			<view class="card no-padding" v-for="(item,index) in projectList" :key="index">
				<card-title :numerator="index+1" :denominator="listTotal"></card-title>

				<view class="card-name">
					<view class="card-name-title">
						<text class="card-name-description">项目名称</text>
					</view>

					<text class="card-name-text">{{item.subName || "--"}}</text>
				</view>

				<view class="card-item">
					<view class="card-item-name">计划投资金额</view>

					<view class="card-item-content">{{item.amtTotal ?? "--"}}</view>
				</view>
			</view>

			<empty-show v-if="projectList.length===0"></empty-show>
		</view>

		<view class="cards-list" v-if="['yearAmt','mothAmt','home'].includes(pageKey)">
			<view class="count-value" v-if="pageKey === 'home'">
				<view class="count-item" v-for="(item,index) in countList" :key="index">
					<view class="count-item-value" :class="item.color">{{item.value}}{{item.isRate ? "%" : ""}}</view>
					<view class="count-item-description">{{item.title}}</view>
				</view>
			</view>

			<view class="order-by" v-if="pageKey === 'yearAmt' || pageKey === 'mothAmt' || pageKey === 'ndjh'">
				<view class=" order-by-item">
					金额
					<view class="order-by-icon" :class="orderByStatus" @click="changeOrderByStatus()"></view>
				</view>
			</view>

			<view class="card no-padding" v-for="(item,index) in projectList" :key="index">
				<card-title :numerator="index+1" :denominator="listTotal"></card-title>

				<view class="card-name">
					<view class="card-name-title">
						<text class="card-name-description">项目名称</text>
					</view>

					<text class="card-name-text">{{item.subName || "--"}}</text>
				</view>

				<view class="card-item">
					<view class="card-item-name">年度</view>
					<view class="card-item-content">{{item.y_month ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">计划投资金额</view>
					<view class="card-item-content">{{item.amt ?? "--"}}万元</view>
				</view>
			</view>

			<empty-show v-if="projectList.length===0"></empty-show>
		</view>

		<view class="cards-list" v-if="pageKey === 'compAmt' || pageKey === 'ndjh'">
			<view class="order-by" v-if="pageKey === 'yearAmt' || pageKey === 'mothAmt' || pageKey === 'ndjh'">
				<view class=" order-by-item">
					金额
					<view class="order-by-icon" :class="orderByStatus" @click="changeOrderByStatus()"></view>
				</view>
			</view>

			<view class="card no-padding" v-for="(item,index) in projectList" :key="index">
				<card-title :numerator="index+1" :denominator="listTotal"></card-title>

				<view class="card-name">
					<view class="card-name-title">
						<text class="card-name-description">项目名称</text>
					</view>
					<text class="card-name-text">{{item.subName || "--"}}</text>
				</view>

				<view class="card-item">
					<view class="card-item-name">年度</view>
					<view class="card-item-content">{{item.month ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">实际投资金额</view>

					<view class="card-item-content">{{item.amt ?? "--"}}万元</view>
				</view>
			</view>

			<empty-show v-if="projectList.length===0"></empty-show>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.no-padding {
		padding-top: 0 !important;
	}

	.card {
		padding-top: 16rpx;
		overflow: hidden;
	}

	.light-item {
		margin-bottom: 32rpx;
	}

	.card-light {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-light-bottom {
		width: 122rpx;
		height: 44rpx;
		margin: auto 0;
		background-size: 100% 100%;
	}

	.light-red {
		background-image: url('@/static/icon-light-red.png');
	}

	.light-yellow {
		background-image: url('@/static/icon-light-yellow.png');
	}

	.light-green {
		background-image: url('@/static/icon-light-green.png');
	}

	.focus {
		width: 46rpx;
		height: 40rpx;
		background-image: url("@/static/focus-off.png");
		background-size: 100% 100%;
	}

	.focus-on {
		background-image: url("@/static/focus-on.png");
	}

	.special-btn {
		background: linear-gradient(225deg, #2428F1 0%, #12C8C2 94%);
	}

	.bottom-item {
		margin-bottom: 64rpx;
	}

	.card-value {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 255rpx;
		height: 68rpx;
		padding-right: 22rpx;
		text-align: right;
		line-height: 68rpx;
		color: #1869F6;
		font-size: 32rpx;
		background: linear-gradient(270deg, #B2CEFF 0%, rgba(219, 232, 255, 0) 100%);
	}

	.order-by {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 106rpx;
		margin-bottom: 34rpx;
		padding: 0 40rpx;
		border-radius: 40rpx;
		background: #FFF;

		.order-by-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #343437;

			.order-by-icon {
				width: 22rpx;
				height: 46rpx;
				margin-left: 24rpx;
				background-image: url("@/static/orderBy-none.png");
				background-size: 100% 100%;
			}

			.desc {
				background-image: url("@/static/orderBy-desc.png");
			}

			.asc {
				background-image: url("@/static/orderBy-asc.png");
			}
		}
	}

	.count-value {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 200rpx;
		margin-bottom: 20rpx;
		background: linear-gradient(180deg, #FFFFFF 2%, #A5C6FF 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		border: 4rpx solid #fff;

		.count-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 50%;
			height: 50%;
			text-align: center;

			.count-item-value {
				margin-bottom: 8rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #FF4000;
			}

			.count-special-value {
				color: #330DDF;
			}

			.count-item-description {
				font-size: 24rpx;
				color: #343437;
			}
		}
	}
</style>