<script setup>
	import {
		ref
	} from 'vue'

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

	import {
		goToPage
	} from "@/utils/common.js"

	import {
		getProjecsProcess,
	} from "@/api/work/countAnalysis.js"

	function backToBefore() {
		uni.navigateBack({})
	};

	let scrollTop = ref(0)
	let loading = ref(true)

	function searchClick() {
		goToPage('/pages/countAnalysis/search/index?page=projectProcessSearch')
	}

	function getList(sendParams) {
		console.log(sendParams);
		loading.value = true
		getProjecsProcess(sendParams).then(res => {
			loading.value = false
			res.data.listProjects.map(item => {
				let itemRateValue = item.rate * 100
				item.rate = itemRateValue + '%'
			})
			processList.value = res.data.listProjects;
			listTotal.value = res.data.listProjects.length;
		}).catch(() => {
			loading.value = false
		})
	}

	let processList = ref([])
	let listTotal = ref(0)

	function showProblemList(type, id, num) {
		if (num === 0) return;

		uni.navigateTo({
			url: `/pages/countAnalysis/overseeList/index?type=${type}&subId=${id}`
		})
	}

	// 折叠/展开
	const changeFoldItem = (status, id) => {
		let item = processList.value.find(item => item.id === id);
		item.unfold = status;
	}

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

	onLoad(() => {
		uni.$on("projectProcessSearch", resolve => {
			let optionFilter = Object.assign({}, resolve);
			let filterArr = ["null", "undefined", ""];
			for (let i in optionFilter) {
				if (filterArr.includes(optionFilter[i])) {
					optionFilter[i] = null;
				};
			};
			getList(optionFilter);
		});
		getList({});
	});

	onUnload(() => {
		uni.$off('projectProcessSearch');
	});

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
</script>

<template>
	<view class="container">

		<page-title @searchClick='searchClick' showSearch>问题处理进度</page-title>
		<view class="cards-list">
			<view v-for="(item,index) in processList" :key="index">
				<!-- 未折叠卡片 -->
				<view class="card" v-if="item.unfold">
					<view class="card-item">
						<view class="card-item-name">项目名称</view>
						<view class="card-item-content">{{item.subName}}</view>
					</view>

					<view class="card-item">
						<view class="card-item-name">进度</view>
						<view class="card-item-content">{{item.rate}}</view>
					</view>

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

					<view class="card-item">
						<view class="card-item-name">完成资金</view>
						<view class="card-item-content">{{item.amtComp}}</view>
					</view>

					<view class="card-item" @click="showProblemList('notDeal',item.id,item.problemNum)">
						<view class="card-item-name">问题数</view>
						<view class="card-item-content can-click">{{item.problemNum}}</view>
					</view>

					<view class="card-item bottom-item">
						<view class="card-btn" :class="item.problemNum === 0 ? 'fat-btn' : ''"
							@click="goToProjectInfo(item.id,item.subName)">
							项目查看</view>
						<view class="card-btn" v-if="item.problemNum !== 0"
							@click="showProblemList('notDeal',item.id,item.problemNum)">未处理问题查看</view>
					</view>

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

						<view class="card-fold-center" @click.stop="changeFoldItem(false,item.id)">
							<view class="card-fold-btn card-unfold-btn"></view>
						</view>

						<view class="card-fold-chaos"></view>
					</view>
				</view>

				<!-- 折叠卡片 -->
				<view class="card-fold" v-else>
					{{item.subName ?? "--"}}

					<view class="card-fold-option">
						<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

						<view class="card-fold-center" @click.stop="changeFoldItem(true, item.id)">
							<view class="card-fold-btn"></view>
						</view>

						<view class="card-fold-chaos"></view>
					</view>
				</view>
			</view>

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

			<view class="gap-bottom"></view>
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>

		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<style lang="scss" scoped>
	.card-fold {
		position: relative;
		width: 100%;
		min-height: 152rpx;
		margin-bottom: 20rpx;
		padding: 24rpx 30rpx 52rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.card-fold-option {
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 38rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%);
		z-index: 999;

		.card-fold-count {
			flex: 1;
			font-size: 28rpx;
			color: #1869F6;
		}

		.card-fold-center {
			flex: 1;

			.card-fold-btn {
				width: 32rpx;
				height: 20rpx;
				margin: 0 auto;
				background-image: url("@/static/icon-fold.png");
				background-size: 100% 100%;
			}

			.card-unfold-btn {
				transform: rotate(180deg);
			}
		}

		.card-fold-chaos {
			flex: 1;
		}
	}

	.bottom-item {
		margin-bottom: 20rpx;
	}
</style>