<template>
	<view class="content">
		<view class="todo f-col aic">
			<view class="f-col aic">
				<view class="title_box f-row aic jcb" @click="tolist('')">
					<view class="title f-row aic">
						<image :src="`/static/my/${img}.png`" mode=""></image>
						{{title}}
					</view>
					<view class="num">
						{{total}}
					</view>
				</view>
				<view class="list" v-if="list.length">
					<view :class="['box',{'close':list.length>5&&open}]">
						<view class="item_box">
							<view @click="tolist(item.title)" class="item f-row aic" v-for="item,i in list" :key="i">
								<view class="">
									{{item.title}}
								</view>
								<text>{{item.num}}</text>
							</view>
						</view>
					</view>
					<view class="more" v-show="list.length>5" @click="open = !open">
						{{!open?'显示更多':'收起'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		computed,
		watch,
		getCurrentInstance
	} from 'vue';
	import {
		beforeJump
	} from '@/utils/index.js';

	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		img: {
			type: String,
			default: ''
		},
		list: {
			type: Array,
			default: function() {
				return []
			}
		},
		total: {
			type: Number,
			default: 0
		},
		type:{
			type: String,
			default: ''
		}
	})
	const open = ref(false)
	const moreHeight = ref(null)
	const CurrentInstance = getCurrentInstance()
	watch(() => props.list, () => {
		nextTick(() => {
			uni.createSelectorQuery().in(CurrentInstance.proxy).select('.item_box')
				.boundingClientRect(data => {
					moreHeight.value = data?.height + 'px'
				}).exec()
		})

	}, {
		immediate: true
	})
	const tolist = (title) => {
		let id = null
		beforeJump('/pages/task/index', () => {

			if (props.type == '0') {
				id = 0
			}
			if (props.type == '1') {
				id = 1
			}
			if (props.type == '2') {
				return uni.navigateTo({
					url: `/pages/task/self?title=${title}`
				})
			}
			uni.navigateTo({
				url: `/pages/task/index?id=${id}&title=${title}`
			})
		})
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding-top: 30rpx;
	}

	.todo {
		.title_box {
			width: 630rpx;
			height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.16);
			border-radius: 16rpx;
			padding: 0 30rpx;

			.title {
				image {
					width: 48rpx;
					height: 48rpx;
				}

				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}

			.num {
				width: 54rpx;
				height: 54rpx;
				background: url('../../static/my/num.png') no-repeat;
				background-size: 54rpx 54rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 54rpx;
			}
		}

		.list {
			width: 570rpx;
			padding: 20rpx 30rpx 30rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.16);
			border-radius: 0rpx 0rpx 16rpx 16rpx;

			.box {

				max-height: 120rpx;
				transition: all .3s;
				overflow: hidden;

				.item_box {
					display: flex;
					flex-wrap: wrap;
				}

				.item {
					font-size: 28rpx;
					height: 60rpx;
					width: 50%;

					view {
						color: #666666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}

					text {
						color: #ED361D;
						margin: 0 10rpx;

					}
				}
			}



			.close {
				// height: 300rpx;
				max-height: v-bind(moreHeight);
			}

			.more {
				font-size: 28rpx;
				color: #008DFF;
				text-decoration: underline;
				margin-top: 20rpx;
			}
		}
	}
</style>